Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1299869

    I added javascript particles.js
    https://vincentgarreau.com/particles.js/
    I downloaded and extract in child theme, i added css code

    /* —- 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;
    }

    /* =============================================================================
    HTML5 CSS Reset Minified – Eric Meyer
    ========================================================================== */

    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
    body{line-height:1}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
    nav ul{list-style:none}
    blockquote,q{quotes:none}
    blockquote:before,blockquote:after,q:before,q:after{content:none}
    a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
    mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
    del{text-decoration:line-through}
    abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
    table{border-collapse:collapse;border-spacing:0}
    hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
    input,select{vertical-align:middle}
    li{list-style:none}

    /* =============================================================================
    My CSS
    ========================================================================== */

    /* —- base —- */

    html,body{
    width:100%;
    height:100%;
    background:#111;
    }

    html{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    body{
    font:normal 75% Arial, Helvetica, sans-serif;
    }

    canvas{
    display:block;
    vertical-align:bottom;
    }

    /* —- stats.js —- */

    .count-particles{
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    }

    .js-count-particles{
    font-size: 1.1em;
    }

    #stats,
    .count-particles{
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
    }

    #stats{
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    }

    .count-particles{
    border-radius: 0 0 3px 3px;
    }

    /* —- particles.js container —- */

    #particles-js{
    width: 100%;
    height: 100%;
    background-color: #b61924;
    background-image: url(”);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    }
    i added js code in app.js

    “particles”: {
    “number”: {
    “value”: 80,
    “density”: {
    “enable”: true,
    “value_area”: 800
    }
    },
    “color”: {
    “value”: “#ffffff”
    },
    “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”: false,
    “anim”: {
    “enable”: false,
    “speed”: 1,
    “opacity_min”: 0.1,
    “sync”: false
    }
    },
    “size”: {
    “value”: 5,
    “random”: true,
    “anim”: {
    “enable”: false,
    “speed”: 40,
    “size_min”: 0.1,
    “sync”: false
    }
    },
    “line_linked”: {
    “enable”: true,
    “distance”: 150,
    “color”: “#ffffff”,
    “opacity”: 0.4,
    “width”: 1
    },
    “move”: {
    “enable”: true,
    “speed”: 6,
    “direction”: “none”,
    “random”: false,
    “straight”: false,
    “out_mode”: “out”,
    “attract”: {
    “enable”: false,
    “rotateX”: 600,
    “rotateY”: 1200
    }
    }
    },
    “interactivity”: {
    “detect_on”: “canvas”,
    “events”: {
    “onhover”: {
    “enable”: true,
    “mode”: “repulse”
    },
    “onclick”: {
    “enable”: true,
    “mode”: “push”
    },
    “resize”: true
    },
    “modes”: {
    “grab”: {
    “distance”: 400,
    “line_linked”: {
    “opacity”: 1
    }
    },
    “bubble”: {
    “distance”: 400,
    “size”: 40,
    “duration”: 2,
    “opacity”: 8,
    “speed”: 3
    },
    “repulse”: {
    “distance”: 200
    },
    “push”: {
    “particles_nb”: 4
    },
    “remove”: {
    “particles_nb”: 2
    }
    }
    },
    “retina_detect”: true,
    “config_demo”: {
    “hide_card”: false,
    “background_color”: “#b61924”,
    “background_image”: “”,
    “background_position”: “50% 50%”,
    “background_repeat”: “no-repeat”,
    “background_size”: “cover”
    }
    i added code in function.php
    function enfold_customization_custom_js() {
    ?>
    <script type = “text/javascript” src = “http://test.jskindustrial.com/wp-content/themes/enfold-child/particles.js-master/particles.js-master/particles.js”></script&gt;
    <script type = “text/javascript” src = “http://test.jskindustrial.com/wp-content/themes/enfold-child/particles.js-master/app.js”></script&gt;
    <?php
    }
    add_action( ‘wp_footer’, ‘enfold_customization_custom_js’ );
    but it show nothing in output

    #1300071

    Hey jskindustrial,

    We can’t help you out if we can’t see the page where you are trying to implement this. Also please note that our support is limited when it comes to customisations like these.

    Best regards,
    Rikard

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