particles实现透明点线粒子变换canvas效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：particles实现透明点线粒子变换canvas效果代码，点击可生成新的粒子线条。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        @charset "utf-8";
    @import url(https://fonts.googleapis.com/css?family=Lato:400,300,100);
    body {
      font-family: "Lato";
      background: #417bff;
      overflow: hidden;
      height: 100%; 
      width: 100%;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    
    #particles-js, #parallax, .layer, .some-space, .some-more-space {
      height: 100%;
      position: absolute;
      width: 100%;
    }
    
    #particles-js {
      opacity: 0.6;
    }
    
    h1 {
      color: white;
      font-size: 5em;
      font-weight: 100;
      letter-spacing: 0.2em;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
              transform: translate3d(-50%, -50%, 0);
    }
    
    a {
      color: white;
      border: 1px solid white;
      display: table;
      position: absolute;
      top: 60%;
      left: 50%;
      letter-spacing: 0.05em;
      -webkit-transform: translate3d(-50%, -50%, 0);
              transform: translate3d(-50%, -50%, 0);
      text-decoration: none;
      transition: all 200ms ease;
      padding: 10px 15px;
    }
    a:hover {
      background: white;
      color: black;
    }
    
    .some-space {
      animation: rotate 18s 0.5s infinite linear reverse;
    }
    
    .some-more-space {
      -webkit-animation: rotate 15s 0.1s infinite linear;
              animation: rotate 15s 0.1s infinite linear;
    }
    
    @-webkit-keyframes rotate {
      0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
                transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
      }
      100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
                transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
      }
    }
    
    @keyframes rotate {
      0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
                transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
      }
      100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
                transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
      }
    }
    </style>

</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles-min.js"></script>

    <div id="parallax">
        <div class="layer" data-depth="0.6">
            <div class="some-space">
                <h1>bfw.wiki</h1>
            </div>
        </div>
        <div class="layer" data-depth="0.4">
            <div id="particles-js"></div>
        </div>
    </div>

    <script>
        ;(function($, window, document, undefined) {
        
          // Strict Mode
          'use strict';
        
          // Constants
          var NAME = 'parallax';
          var MAGIC_NUMBER = 30;
          var DEFAULTS = {
            relativeInput: false,
            clipRelativeInput: false,
            calibrationThreshold: 100,
            calibrationDelay: 500,
            supportDelay: 500,
            calibrateX: false,
            calibrateY: true,
            invertX: true,
            invertY: true,
            limitX: false,
            limitY: false,
            scalarX: 10.0,
            scalarY: 10.0,
            frictionX: 0.1,
            frictionY: 0.1,
            originX: 0.5,
            originY: 0.5,
            pointerEvents: true,
            precision: 1
          };
        
          function Plugin(element, options) {
        
            // DOM Context
            this.element = element;
        
            // Selections
            this.$context = $(element).data('api', this);
            this.$layers = this.$context.find('.layer');
        
            // Data Extraction
            var data = {
              calibrateX: this.$context.data('calibrate-x') || null,
              calibrateY: this.$context.data('calibrate-y') || null,
              invertX: this.$context.data('invert-x') || null,
              invertY: this.$context.data('invert-y') || null,
              limitX: parseFloat(this.$context.data('limit-x')) || null,
              limitY: parseFloat(this.$context.data('limit-y')) || null,
              scalarX: parseFloat(this.$context.data('scalar-x')) || null,
              scalarY: parseFloat(this.$context.data('scalar-y')) || null,
              frictionX: parseFloat(this.$context.data('friction-x')) || null,
              frictionY: parseFloat(this.$context.data('friction-y')) || null,
              originX: parseFloat(this.$context.data('origin-x')) || null,
              originY: parseFloat(this.$context.data('origin-y')) || null,
              pointerEvents: this.$context.data('pointer-events') || true,
              precision: parseFloat(this.$context.data('precision')) || 1
            };
        
            // Delete Null Data Values
            for (var key in data) {
              if (data[key] === null) delete data[key];
            }
        
            // Compose Settings Object
            $.extend(this, DEFAULTS, options, data);
        
            // States
            this.calibrationTimer = null;
            this.calibrationFlag = true;
            this.enabled = false;
            this.depthsX = [];
            this.depthsY = [];
            this.raf = null;
        
            // Element Bounds
            this.bounds = null;
            this.ex = 0;
            this.ey = 0;
            this.ew = 0;
            this.eh = 0;
        
            // Element Center
            this.ecx = 0;
            this.ecy = 0;
        
            // Element Range
            this.erx = 0;
            this.ery = 0;
        
            // Calibration
            this.cx = 0;
            this.cy = 0;
        
            // Input
            this.ix = 0;
            this.iy = 0;
        
            // Motion
            this.mx = 0;
            this.my = 0;
        
            // Velocity
            this.vx = 0;
            this.vy = 0;
        
            // Callbacks
            this.onMouseMove = this.onMouseMove.bind(this);
            this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
            this.onOrientationTimer = this.onOrientationTimer.bind(this);
            this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
            this.onAnimationFrame = this.onAnimationFrame.bind(this);
            this.onWindowResize = this.onWindowResize.bind(this);
        
            // Initialise
            this.initialise();
          }
        
          Plugin.prototype.transformSupport = function(value) {
            var element = document.createElement('div');
            var propertySupport = false;
            var propertyValue = null;
            var featureSupport = false;
            var cssProperty = null;
            var jsProperty = null;
            for (var i = 0, l = this.vendors.length; i < l; i++) {
              if (this.vendors[i] !== null) {
                cssProperty = this.vendors[i][0] + 'transform';
                jsProperty = this.vendors[i][1] + 'Transform';
              } else {
                cssProperty = 'transform';
                jsProperty = 'transform';
              }
              if (element.style[jsProperty] !== undefined) {
                propertySupport = true;
                break;
              }
            }
            switch(value) {
              case '2D':
                featureSupport = propertySupport;
                break;
              case '3D':
                if (propertySupport) {
                  var body = document.body || document.createElement('body');
                  var documentElement = document.documentElement;
                  var documentOverflow = documentElement.style.overflow;
                  var isCreatedBody = false;
                  if (!document.body) {
                    isCreatedBody = true;
                    documentElement.style.overflow = 'hidden';
                    documentElement.appendChild(body);
                    body.style.overflow = 'hidden';
                    body.style.background = '';
                  }
                  body.appendChild(element);
                  element.style[jsProperty] = 'translate3d(1px,1px,1px)';
                  propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
                  featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
                  documentElement.style.overflow = documentOverflow;
                  body.removeChild(element);
                  if ( isCreatedBody ) {
                    body.removeAttribute('style');
                    body.parentNode.removeChild(body);
                  }.........完整代码请登录后点击上方下载按钮下载查看