Viewing 30 posts - 1 through 30 (of 60 total)
  • Author
    Posts
  • #669521

    http://vincentgarreau.com/particles.js/

    The user got help on a similar problem. But the solution was never posted. I was looking to the do the same.

    Details provided in private content.

    #669524

    Hi M|C!

    What you need to do is outside our support policy and we do not cover that, I am afraid.
    Please consider to hire a freelancer who can help you with that request

    Regards,
    Basilis

    #791988

    M | C… I have implemented Particles.js inside an Enfold Color Section recently… if you’re still interested I can post the steps here.

    #792133

    Hi,

    @Two Trees, that would be appreciated, please share if you something working.

    Best regards,
    Rikard

    #792687

    Ok… hopefully this makes sense and is easy to follow for designers/developers that use Enfold regularly.
    Firstly here’s a simplified version of the Enfold One Page Portfolio demo that I’ve set up to show results… http://dev.twotreescreative.com.au/. And you’ll notice that I’ve implemented TWO instances of particles.js on the same page, one instance behind a Color Section element (not full width) and one instance behind a Grid Row element (full width). .. this just requires some additional code a little later to call additional instances of particles.js.

    NOTE: These steps assume you’re using a child theme with Enfold.

    Step 1 – Configure Particles.js and download the package.

    Go to http://vincentgarreau.com/particles.js/ and click “Download” on the box in the middle of the screen so you’ll have particles.js-master.zip on your machine. Inside the zip you’ll need particles.js OR the minified version particles.min.js AND the files inside the “demo” folder.
    While you’re still on http://vincentgarreau.com/particles.js/ it’s also useful to configure your particles display using the controls on the right of screen. When you’re happy enough… click to “Download current config (json)” at the bottom of the controls panel… the contents of this file (which will be named particlesjs-config.json) will be handy later.

    Step 2 – Adding files to your hosting account (via FTP or cPanel or whatever).

    FTP to your server and browse to the /wp-content/themes/enfold-child/ folder (where “enfold-child” is the name of your child theme).
    Upload particles.js OR the minified version particles.min.js (from the root of the “particles.js-master.zip” package you downloaded previously) to the root of your child theme folder.
    Now create two new folders/directories in your child theme directory… one named “js” and one named “css”.
    In the “js” folder, upload the file “app.js” from your machine, which you’ll find inside the “particles.js-master.zip” package – it’s in “demo > js > app.js”.
    Now jump back up to your child theme directory and open the new “css” folder you created… upload the file “style.css” from your machine, which you’ll find inside the “particles.js-master.zip” package – it’s in “demo > css > style.css”.

    Step 3 – Loading script files via the Child Theme Functions.php and adding some css to your Child Theme Stylesheet.

    In your WordPress admin, (via “Appearance > Editor”) add the following to your Theme Functions (functions.php)… obviously you’ll replace “dev.twotreescreative.com.au” and “enfold-child” to reflect your own site.

    function enfold_customization_custom_js() {
    ?>
    <script type = "text/javascript" src = "http://dev.twotreescreative.com.au/wp-content/themes/enfold-child/particles.js"></script>
    <script type = "text/javascript" src = "http://dev.twotreescreative.com.au/wp-content/themes/enfold-child/js/app.js"></script>
    <?php
    }
    add_action( 'wp_footer', 'enfold_customization_custom_js' );

    Once you’ve saved/updated the functions file, and you’re still in “Appearance > Editor” … add the following css to your Child Theme stylesheet – some of these properties can be tweaked later to suit your needs.

    * =============================================================================
       Particles.js CSS
       ========================================================================== */
    /* ---- base ---- */
    html{
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    canvas{
      display:block;
      vertical-align:bottom;
    }
    /* ---- particles.js container ---- */
    #particles-js {
      position:absolute;
      width: 100%;
      height: 100%;
      background-image: url('');
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      top: 0;
    }

    Step 4 – Time for a test.

    Edit the page (in WordPress admin) that you want to add the particles.js to and add a “Code Block” Element (from Avia Layout Builder) as the last element INSIDE the Color Section (or Grid Row) in which you’re after the particles effect.
    Edit the “Code Block” and enter

    <div id="particles-js"></div>

    in the Code Block Content area. Save and Update page and view results on front end. All things being equal, you should be seeing some particles floating around behind the specific Color Section… but they’ll just be the default “look”.

    Step 5 – Applying your specific settings for your particles.

    FTP to your site (from Step 2) and go into your Child Theme and then open the app.js file inside “js > app.js”.
    You’re now going to open and copy all of the contents of the file you downloaded (in Step 1) named “particlesjs-config.json” – which contains your custom configuration options from http://vincentgarreau.com/particles.js/ – into the “app.js” file.
    NOTE: In the app.js file, ONLY replace code between curly braces, that is { and } … don’t replace the first line of script “particlesJS(‘particles-js’,” (which I think is at line 14) or the last line, which is just “);” … just replace everything in between with the contents of you “particlesjs-config.json” file.
    Save the app.js file on your server and refresh the front-end of your site to check that the config of the particles has updated.

    __________________________________

    There may be better ways to implement all this… but this is just how I got it to work, with enough flexibility to get the effect I was after.

    • This reply was modified 2 years, 6 months ago by  Two Trees.
    #792829

    Hi,
    Great post, thanks for sharing

    Best regards,
    Mike

    #793767

    I get

    Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null
    at window.particlesJS (particles.js:1495)
    at app.js:14

    what could be wrong? the link in fuctions.php word to the app.js and particles.js

    thank you!

    #793774

    Hiya argientdesigns… have you got the example you’re working on online? It could be that the scripts are being loaded/called before the page is ready for them… but I may need some more detail.

    #793782

    @ two trees…

    yes… have a look here. just the first color section it should be.

    can give you also admin login & FTP if you wand.

    THX a lot!

    #793799

    First thing to try – can you go back in to the “Code Block” element in the page editor, and copy/paste this div again…

    <div id="particles-js"></div>

    … or retype it… copying from my instructions left some bad characters.

    #793800

    Oooh shit havn’t seen the bad charecters… its working now. thanks for your input. have a nice day my friend!

    #793872

    Cool… that was an easy fix!
    The result on your website is good too. Glad it worked.

    #803865

    Hi Two Trees

    Thanks so much that. I followed your instructions and it all worked brilliantly except that the particles effect does not appear as background to the color action but as an element, i.e. other content in the section does not appear over the top but before it. Any advice on what I’m doing wrong would be much appreciated.

    Peter

    #804196

    Hi Peter
    I might be able to help … have you got a link to the page so I can check how it’s rendering?
    Cheers.

    #804211

    Hi

    It seems to be working now – I just deleted the files and uploaded them again and it’s working now. Sorry to have and bothered you and thanks again for the original post.

    Peter

    #804257

    No problems.
    Cheers.

    #804970

    Hi,

    Glad that you got it working. Let us know if you need more assistance :)

    Best regards,
    Nikko

    #812031

    hi there,

    I tried to follow your instructions and it works ok but i just cant get the particles effect to word a background

    what can cause this?

    Thank you!

    #812370

    Hi rotem,
    I’m open to help you figure out the issue… but I would need to see the published page, to check how the elements are rendering. Is there a link you can post here?

    #813213

    Hi,

    @Twon Trees we appreciate all the effort here!
    It would be amazing if you can create that documentation and add it here:
    https://github.com/KriesiMedia/enfold-library/

    I will do accept the Pull request if you do one for us, do you mind helping there?

    Thank you!

    Best regards,
    Basilis

    #814190

    Hi Basilis,
    I will have a look at adding the documentation to the library as soon as I get some free time.
    Should I specify a specific folder with the pull request?
    Thanks,
    Lee

    #815150

    Hi,

    Yea we would appreciate!
    If not, I will still do it for you, no worries.

    But we appreciate if you do the effort. If you do not have them time let mek now and I will do it for you

    Best regards,
    Basilis

    #846046

    I tried above methods but my particles.js background is positioned right after my avia content (I already tried to replace the code right before the end of color section.

    #846048

    Having the same problem of #post-793782

    #846617

    Hi,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #849104

    Added the link

    #849358

    Halo… did you get this solved? If you’re able to link me to the page in question, I can see if anything jumps out at me as to what’s going wrong.
    I know you said you’d added a link… but I can’t see it.
    Cheers, Lee

    #849870

    Hi,

    @Halo: It looks like you managed to add the “particle” effect on the first color section. Is that correct?

    Best regards,
    Ismael

    #894851

    @TwoTrees: You’re a rockstar! Tutorial worked seemlessly. Big, big, kudos!
    Cheers,
    Andi

    #895051

    Excellent! Glad to know it was worth documenting :)

Viewing 30 posts - 1 through 30 (of 60 total)

The topic ‘Trying to Add JS Particles Background via Enfold theme’ is closed to new replies.