particlesjs

今天发现一个粒子动画的插件下个笔记做个备用：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     
        <style>
        #page1 {
    background: url(images/mask.png) left center no-repeat;
    height: 750px;
    padding-top: 87px;
    background-size: cover;
    /* Retina display */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        background-image: url(images/mask@2x.png);
        background-size: 1440px 750px;
    }
}
.topside {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
            .graphics {
    position: relative;
    top: 0;
    // background: url(images/graphics.png) 22px center no-repeat;
    // background-size: cover;
    height: 400px;
    /* Retina display */
    // @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    //     background-image: url(images/graphics@2x.png);
    //     background-size: 1189px 427px;
    // }
}
        </style>
    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/particles.js"></script>
     <script src="js/swiper.min.js"></script>
</head>
<body>

    <div class="page" id="page1">
        <div class="topside">
           
            <div class="graphics" id="particles-js"></div>
        </div>
    </div>
</body>
</html>
<script>
$(function(){

    //粒子动画
    particlesJS('particles-js', {
      particles: {
        color: '#fff',
        shape: 'circle', // "circle", "edge" or "triangle"
        opacity: 1,
        size: 4,
        size_random: true,
        nb: 150,
        line_linked: {
          enable_auto: true,
          distance: 100,
          color: '#fff',
          opacity: 1,
          width: 1,
          condensed_mode: {
            enable: false,
            rotateX: 600,
            rotateY: 600
          }
        },
        anim: {
          enable: true,
          speed: 1
        }
      },
      interactivity: {
        enable: true,
        mouse: {
          distance: 300
        },
        detect_on: 'canvas', // "canvas" or "window"
        mode: 'grab',
        line_linked: {
          opacity: .5
        },
        events: {
          onclick: {
            enable: true,
            mode: 'push', // "push" or "remove"
            nb: 4
          }
        }
      },
      /* Retina Display Support */
      retina_detect: true
});
});
</script>

 

posted @ 2016-07-29 13:45  山顶洞外人  阅读(241)  评论(0)  编辑  收藏  举报