[Resolved] Particles web Matrix effect

Home Forums Support [Resolved] Particles web Matrix effect

Home Forums Support Particles web Matrix effect

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #241516
    Christophe

    Hello,

    How can i add this effect into a section or header?
    http://vincentgarreau.com/particles.js/

    I load the JS script via functions.php:

    function add_theme_scripts() {
      wp_enqueue_script( 'script', get_template_directory_uri() . '/js/particles.js', array ( 'jquery' ), 1.1, true);
      wp_enqueue_script( 'script', get_template_directory_uri() . '/js/app.js', array ( 'jquery' ), 1.1, true);
      wp_enqueue_script( 'script', get_template_directory_uri() . '/js/lib/stats.js', array ( 'jquery' ), 1.1, true);
      wp_enqueue_script( 'script', get_template_directory_uri() . '/js/other.js', array ( 'jquery' ), 1.1, true);
    }
    add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

    I try adding this html into a section:

    <div class="count-particles">
      <span class="js-count-particles">--</span> particles
    </div>
    
    <!-- particles.js container -->
    <div id="particles-js"></div>

    Here you can see a screenshot where are adding the files:
    https://www.dropbox.com/s/ocg1cqvdy44f5fn/Schermafbeelding%202016-11-04%20om%2000.44.24.png?dl=0

    The website: https://ticketassist.be

    It doens’t work. Hope you can help :-/

    Regards,
    Christophe

    #241544
    Tom
    Lead Developer
    Lead Developer

    In your wp_enqueue_script function calls, these parameters need to be different: 'script'

    get_template_directory_uri() points to the parent theme directory.

    You want to use: get_stylesheet_directory_uri()

    That should get you closer πŸ™‚

    #241882
    Christophe

    Hi Tom,

    Thanks for your support.
    I find a tutorial how can add this:
    http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

    It works perfect now!!!

    Regards,
    Christophe

    #241967
    Tom
    Lead Developer
    Lead Developer
    #248927
    Jamal

    Hi

    I’m struggling with this as well and i would like to avoid the plugin route if possible. Have tried asking around on stackexchange without much luck, will appreciate some help.

    I have uploaded particles.js and app.js to js folder under child theme. Added <div id="particles-js"></div> in the page header and below to functions.php

    // Enqueue particles.js
    add_action( 'wp_enqueue_scripts', 'particles_animation' );
    function particles_animation() {
        wp_enqueue_script( 'particles', get_stylesheet_directory_uri() . '/js/particles.min.js', array(), '1.0.0', true );
    }

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #249071
    Tom
    Lead Developer
    Lead Developer

    Hi Jamal,

    Does your #particles-js element have a width/height?

    My site might be a good example: https://tomusborne.com/

    #249171
    Christophe

    Hi Jamal, Tom,

    Maybe this can help… http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/
    If you download the plugin from the tutorial and look in the plugin’s source code, than you can find how it’s implement the particles. it is not so difficult.

    PS: Tom, nice page example πŸ˜‰

    #249485
    Jamal

    Yay it worked ! Thank you Tom and Christophe

    I can’t believe i couldn’t get this to work for more than a week and nearly all i had to do was right there on Tom’s website. I even had checked it before but it didn’t hit me until now.

    Followed the following steps:

    1. Uploaded particles.min.js to my child theme in a folder named js
    2. Put <div id="particles-js"></div> in page header
    3. Insert this script in wp_footer GP hooks

    <script type='text/javascript' src='http://www.MYSITE.COM/wp-content/themes/generatepress_child/js/particles.min.js?ver=1.0.0'></script>
    <script type='text/javascript'>
    particlesJS("particles-js", {"particles":{"number":{"value":400,"density":{"enable":true,"value_area":800}},"color":{"value":"#fff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":10,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":500,"color":"#ffffff","opacity":0.4,"width":2},"move":{"enable":true,"speed":6,"direction":"bottom","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":0.5}},"bubble":{"distance":400,"size":4,"duration":0.3,"opacity":1,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
    </script>

    All i have to learn now is to enqueue it but that’s fun for another day.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #249572
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working! πŸ™‚

    #249604
    Christophe

    Jamal,

    Good work!
    Nice that you post your solution. This can help other members πŸ˜‰

    Regards,
    Christophe

    #250190
    Jamal

    Thanks Christophe

    But now i have another problem, none of the links in the page header are clickable. How can i solve this?

    Btw,forgot to mention (in my previous post) step 4 where i added this css:

    #particles-js {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    left:0;
    }

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #250191
    Jamal

    Css below seem to fix it,is it the right way?

    .inside-page-header-container a{
        position:relative;
        z-index:9999;
    }

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #250264
    Tom
    Lead Developer
    Lead Developer

    Might be better to apply the z-index to the actual .inside-page-header-container (or a deeper element) instead of just the links.

    #250357
    Jamal

    Nothing else seems to work except .inside-page-header-container a and i put z-index: 89 so the button can go under sticky navigation when scrolling.

    If you don’t think doing like this will break anything i’m happy with the result. Thank you !

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #250410
    Tom
    Lead Developer
    Lead Developer

    Shouldn’t break anything, it just means your non-links in the container won’t be “above” the particles. If it works for you the it’s perfect πŸ™‚

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.