Загрузка...

[Гайд] Как сделать красивые particles

Тема в разделе Frontend создана пользователем richok11 25 июл 2021. 317 просмотров

  1. richok11
    Кому понравилось (1) Скопировать BBCode
    richok11 Автор темы 25 июл 2021 3 4 мар 2020
    Мне кажется этот гайд подойдёт для чаелюбов, поэтому тут будет много воды xd
    ​
    Представим, что у нас есть некий код html​

    Сейчас сайт у нас будет выглядеть вот так :

    [IMG]
    Код :    ​

    <html>


    <head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" href="main.css">
    </head>

    <!------------------------------------->

    <body>

    </body>


    </html>


    Можно приступать к добавлению партиклов
    Для этого нам нужны сами партиклы, но так как мы лютые пастеры, воспользуемся готовыми

    Добавление вида :

    Для этого нам нужен css :    ​

    /* =============================================================================
    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: #000000;
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    }

    Просто ctrl+c, ctrl+v

    После чего нужно добавить некоторые аспекты в html (написать скрипт для партиклов и подключить css + js)    ​

    <html>


    <head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    </head>

    <!------------------------------------->

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

    <script>
    particlesJS("particles-js", {
    "particles": {
    "number": {
    "value": 160,
    "density": {
    "enable": true,
    "value_area": 800
    }
    },
    "color": {
    "value": "#ffffff"
    },
    "shape": {
    "type": "circle",
    "stroke": {
    "width": 0,
    "color": "#000000"
    },
    "polygon": {
    "nb_sides": 5
    }
    },
    "opacity": {
    "value": 1,
    "random": true,
    "anim": {
    "enable": true,
    "speed": 1,
    "opacity_min": 0,
    "sync": false
    }
    },
    "size": {
    "value": 3,
    "random": true,
    "anim": {
    "enable": false,
    "speed": 4,
    "size_min": 0.3,
    "sync": false
    }
    },
    "line_linked": {
    "enable": false,
    "distance": 150,
    "color": "#ffffff",
    "opacity": 0.4,
    "width": 1
    },
    "move": {
    "enable": true,
    "speed": 1,
    "direction": "none",
    "random": true,
    "straight": false,
    "out_mode": "out",
    "bounce": false,
    "attract": {
    "enable": false,
    "rotateX": 600,
    "rotateY": 600
    }
    }
    },
    "interactivity": {
    "detect_on": "canvas",
    "events": {
    "onhover": {
    "enable": true,
    "mode": "bubble"
    },
    "onclick": {
    "enable": true,
    "mode": "repulse"
    },
    "resize": true
    },
    "modes": {
    "grab": {
    "distance": 400,
    "line_linked": {
    "opacity": 1
    }
    },
    "bubble": {
    "distance": 250,
    "size": 0,
    "duration": 2,
    "opacity": 0,
    "speed": 3
    },
    "repulse": {
    "distance": 400,
    "duration": 0.4
    },
    "push": {
    "particles_nb": 4
    },
    "remove": {
    "particles_nb": 2
    }
    }
    },
    "retina_detect": true
    });
    </script>

    </body>


    </html>

    [IMG]
    Ну и у нас готовы партиклы)    ​
     
    25 июл 2021
Загрузка...
Top