如何在HTML CSS JS制作网页中鼠标拖拽粒子效果动画背景cid1146

作者code
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>DaisyJS: Particle System Example</title>
  6. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  8. <style>
  9. body {
  10. background-image:linear-gradient(rgba(193, 35, 35, 0.71),rgba(32, 39, 216, 0.71)),url(one.png) !important;
  12. background-size: cover;
  15. }
  16. #carbonads a{color:#fff;text-decoration:none}#carbonads a:hover{color:#fff}
  20. /**
  21. * DaisyJS Demo Styles
  22. * by Waren Gonzaga
  23. */
  25. * {
  26. -webkit-box-sizing: border-box;
  27. -moz-box-sizing: border-box;
  28. box-sizing: border-box;
  29. }
  31. html, body {
  32. width: 100%;
  33. height: 100%;
  34. overflow: hidden;
  35. }
  37. body {
  39. font-family: 'Poppins', sans-serif;
  40. color: #fff;
  41. line-height: 1.3;
  42. -webkit-font-smoothing: antialiased;
  43. }
  45. #momoland {
  46. width: 100%;
  47. height: 100%;
  48. overflow: hidden;
  49. }
  51. .wrapper {
  52. position: absolute;
  53. left: 0;
  54. top: 15%;
  55. padding: 0 20px;
  56. width: 100%;
  57. text-align: center;
  58. }
  60. .wrapper > img {
  61. width: 200px;
  62. height: auto;
  63. }
  65. h1 {
  66. color: #fff;
  67. font-size: 100px;
  68. font-family: 'Poppins', sans-serif;
  69. font-weight: 800;
  70. margin-bottom: -10px;
  71. letter-spacing: 2px;
  72. }
  74. p{
  75. width: 39%;
  76. margin: 0 auto;
  77. line-height: 24px;
  78. }
  79. .btn{
  80. padding: 15px 40px;
  81. background: transparent;
  82. color: white;
  83. font-size: 19px;
  84. cursor: pointer;
  85. border-radius: 50px;
  86. outline: none;
  87. border: 2px solid white;
  88. font-family: 'Poppins', sans-serif;
  89. transition: all 0.5s ease-in-out;
  90. }
  93. .btn:hover{
  94. background: white;
  95. color: black;
  96. }
  98. </style>
  99. </head>
  100. <body>
  102. <div id="momoland">
  103. <div class="wrapper">
  104. <br><br><br>
  107. <div id="carbon-block"></div>
  108. <div>
  109. </div>
  110. </div>
  111. </div>
  115. <script src="daisy.js" defer></script>
  117. <script type="text/javascript">
  119. document.addEventListener('DOMContentLoaded', function () {
  120. daisyjs(document.getElementById('momoland'), {
  121. dotColor: '#fff',
  122. lineColor: '#ddd'
  123. });
  124. }, false);
  127. </script>
  128. </body>
  129. </html>
<!doctype html>
<html>
<head> 
<title>DaisyJS: Particle System Example</title>
   
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    
        <style>
body {
  background-image:linear-gradient(rgba(193, 35, 35, 0.71),rgba(32, 39, 216, 0.71)),url(one.png) !important;
    
    background-size: cover;
  
    
}
#carbonads a{color:#fff;text-decoration:none}#carbonads a:hover{color:#fff}
            
             

/**  
 * DaisyJS Demo Styles
 * by Waren Gonzaga
 */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
 
  font-family: 'Poppins', sans-serif;
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

#momoland {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper {
    position: absolute;
    left: 0;
    top: 15%;
    padding: 0 20px;
    width: 100%;
    text-align: center;
}

.wrapper > img {
    width: 200px;
    height: auto;
}

h1 {
    color: #fff;
    font-size: 100px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    margin-bottom: -10px;
    letter-spacing: 2px;
}

            p{
                width: 39%;
                margin: 0 auto;
                line-height: 24px;
            }
            .btn{
                padding: 15px 40px;
                background: transparent;
                color: white;
                font-size: 19px;
                cursor: pointer;
                border-radius: 50px;
                outline: none;
                border: 2px solid white;
                font-family: 'Poppins', sans-serif;
                transition: all 0.5s ease-in-out;
            }
 
            
            .btn:hover{
                background: white;
                color: black;
            }
            
        </style>
    </head>
    <body>

        <div id="momoland">
            <div class="wrapper">
               <br><br><br>
                 
         
                <div id="carbon-block"></div>
<div> 
 </div>
</div>
 </div>

     

        <script src="daisy.js" defer></script>
      
        <script type="text/javascript">

  document.addEventListener('DOMContentLoaded', function () {
  daisyjs(document.getElementById('momoland'), {
    dotColor: '#fff',
    lineColor: '#ddd'
  });
}, false);


</script> 
    </body>
</html>

daisy.js

  1. ;(function(window, document) {
  2. "use strict";
  3. var pluginName = 'daisyjs';
  5. // http://youmightnotneedjquery.com/#deep_extend
  6. function extend(out) {
  7. out = out || {};
  8. for (var i = 1; i < arguments.length; i++) {
  9. var obj = arguments[i];
  10. if (!obj) continue;
  11. for (var key in obj) {
  12. if (obj.hasOwnProperty(key)) {
  13. if (typeof obj[key] === 'object')
  14. deepExtend(out[key], obj[key]);
  15. else
  16. out[key] = obj[key];
  17. }
  18. }
  19. }
  20. return out;
  21. }
  23. var $ = window.jQuery;
  25. function Plugin(element, options) {
  26. var canvasSupport = !!document.createElement('canvas').getContext;
  27. var canvas;
  28. var ctx;
  29. var particles = [];
  30. var raf;
  31. var mouseX = 0;
  32. var mouseY = 0;
  33. var winW;
  34. var winH;
  35. var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
  36. var orientationSupport = !!window.DeviceOrientationEvent;
  37. var tiltX = 0;
  38. var pointerX;
  39. var pointerY;
  40. var tiltY = 0;
  41. var paused = false;
  43. options = extend({}, window[pluginName].defaults, options);
  45. /**
  46. * Init
  47. */
  48. function init() {
  49. if (!canvasSupport) { return; }
  51. // create canvas
  52. canvas = document.createElement('canvas');
  53. canvas.className = 'pg-canvas';
  54. canvas.style.display = 'block';
  55. element.insertBefore(canvas, element.firstChild);
  56. ctx = canvas.getContext('2d');
  57. styleCanvas();
  59. // create particles
  60. var numParticles = Math.round((canvas.width * canvas.height) / options.density);
  61. for (var i = 0; i < numParticles; i++) {
  62. var p = new Particle();
  63. p.setStackPos(i);
  64. particles.push(p);
  65. }
  67. window.addEventListener('resize', function() {
  68. resizeHandler();
  69. }, false);
  71. document.addEventListener('mousemove', function(e) {
  72. mouseX = e.pageX;
  73. mouseY = e.pageY;
  74. }, false);
  76. if (orientationSupport && !desktop) {
  77. window.addEventListener('deviceorientation', function () {
  78. // contrain tilt range to [-30,30]
  79. tiltY = Math.min(Math.max(-event.beta, -30), 30);
  80. tiltX = Math.min(Math.max(-event.gamma, -30), 30);
  81. }, true);
  82. }
  84. draw();
  85. hook('onInit');
  86. }
  88. /**
  89. * Style the canvas
  90. */
  91. function styleCanvas() {
  92. canvas.width = element.offsetWidth;
  93. canvas.height = element.offsetHeight;
  94. ctx.fillStyle = options.dotColor;
  95. ctx.strokeStyle = options.lineColor;
  96. ctx.lineWidth = options.lineWidth;
  97. }
  99. /**
  100. * Draw particles
  101. */
  102. function draw() {
  103. if (!canvasSupport) { return; }
  105. winW = window.innerWidth;
  106. winH = window.innerHeight;
  108. // wipe canvas
  109. ctx.clearRect(0, 0, canvas.width, canvas.height);
  111. // update particle positions
  112. for (var i = 0; i < particles.length; i++) {
  113. particles[i].updatePosition();
  114. }
  115. // draw particles
  116. for (i = 0; i < particles.length; i++) {
  117. particles[i].draw();
  118. }
  120. // call this function next time screen is redrawn
  121. if (!paused) {
  122. raf = requestAnimationFrame(draw);
  123. }
  124. }
  126. /**
  127. * Add/remove particles.
  128. */
  129. function resizeHandler() {
  130. // resize the canvas
  131. styleCanvas();
  133. var elWidth = element.offsetWidth;
  134. var elHeight = element.offsetHeight;
  136. // remove particles that are outside the canvas
  137. for (var i = particles.length - 1; i >= 0; i--) {
  138. if (particles[i].position.x > elWidth || particles[i].position.y > elHeight) {
  139. particles.splice(i, 1);
  140. }
  141. }
  143. // adjust particle density
  144. var numParticles = Math.round((canvas.width * canvas.height) / options.density);
  145. if (numParticles > particles.length) {
  146. while (numParticles > particles.length) {
  147. var p = new Particle();
  148. particles.push(p);
  149. }
  150. } else if (numParticles < particles.length) {
  151. particles.splice(numParticles);
  152. }
  154. // re-index particles
  155. for (i = particles.length - 1; i >= 0; i--) {
  156. particles[i].setStackPos(i);
  157. }
  158. }
  160. /**
  161. * Pause particle system
  162. */
  163. function pause() {
  164. paused = true;
  165. }
  167. /**
  168. * Start particle system
  169. */
  170. function start() {
  171. paused = false;
  172. draw();
  173. }
  175. /**
  176. * Particle
  177. */
  179. function Particle() {
  180. this.stackPos = this.stackPos;
  181. this.active = true;
  182. this.layer = Math.ceil(Math.random() * 3);
  183. this.parallaxOffsetX = 0;
  184. this.parallaxOffsetY = 0;
  185. // initial particle position
  186. this.position = {
  187. x: Math.ceil(Math.random() * canvas.width),
  188. y: Math.ceil(Math.random() * canvas.height)
  189. };
  190. // random particle speed, within min and max values
  191. this.speed = {};
  192. switch (options.directionX) {
  193. case 'left':
  194. this.speed.x = +(-options.maxSpeedX + (Math.random() * options.maxSpeedX) - options.minSpeedX).toFixed(2);
  195. break;
  196. case 'right':
  197. this.speed.x = +((Math.random() * options.maxSpeedX) + options.minSpeedX).toFixed(2);
  198. break;
  199. default:
  200. this.speed.x = +((-options.maxSpeedX / 2) + (Math.random() * options.maxSpeedX)).toFixed(2);
  201. this.speed.x += this.speed.x > 0 ? options.minSpeedX : -options.minSpeedX;
  202. break;
  203. }
  204. switch (options.directionY) {
  205. case 'up':
  206. this.speed.y = +(-options.maxSpeedY + (Math.random() * options.maxSpeedY) - options.minSpeedY).toFixed(2);
  207. break;
  208. case 'down':
  209. this.speed.y = +((Math.random() * options.maxSpeedY) + options.minSpeedY).toFixed(2);
  210. break;
  211. default:
  212. this.speed.y = +((-options.maxSpeedY / 2) + (Math.random() * options.maxSpeedY)).toFixed(2);
  213. this.speed.x += this.speed.y > 0 ? options.minSpeedY : -options.minSpeedY;
  214. break;
  215. }
  216. }
  218. /**
  219. * Draw particle
  220. */
  221. Particle.prototype.draw = function() {
  222. // draw circle
  223. ctx.beginPath();
  224. ctx.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, options.particleRadius / 2, 0, Math.PI * 2, true);
  225. ctx.closePath();
  226. ctx.fill();
  228. // draw lines
  229. ctx.beginPath();
  230. // iterate over all particles which are higher in the stack than this one
  231. for (var i = particles.length - 1; i > this.stackPos; i--) {
  232. var p2 = particles[i];
  234. // pythagorus theorum to get distance between two points
  235. var a = this.position.x - p2.position.x;
  236. var b = this.position.y - p2.position.y;
  237. var dist = Math.sqrt((a * a) + (b * b)).toFixed(2);
  239. // if the two particles are in proximity, join them
  240. if (dist < options.proximity) {
  241. ctx.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
  242. if (options.curvedLines) {
  243. ctx.quadraticCurveTo(Math.max(p2.position.x, p2.position.x), Math.min(p2.position.y, p2.position.y), p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
  244. } else {
  245. ctx.lineTo(p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
  246. }
  247. }
  248. }
  249. ctx.stroke();
  250. ctx.closePath();
  251. };
  253. /**
  254. * Update particle position
  255. */
  256. Particle.prototype.updatePosition = function() {
  257. if (options.parallax) {
  258. if (orientationSupport && !desktop) {
  259. // map tiltX range [-30,30] to range [0,winW]
  260. var ratioX = (winW - 0) / (30 - (-30));
  261. pointerX = (tiltX - (-30)) * ratioX + 0;
  262. // map tiltY range [-30,30] to range [0,winH]
  263. var ratioY = (winH - 0) / (30 - (-30));
  264. pointerY = (tiltY - (-30)) * ratioY + 0;
  265. } else {
  266. pointerX = mouseX;
  267. pointerY = mouseY;
  268. }
  269. // calculate parallax offsets
  270. this.parallaxTargX = (pointerX - (winW / 2)) / (options.parallaxMultiplier * this.layer);
  271. this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10; // easing equation
  272. this.parallaxTargY = (pointerY - (winH / 2)) / (options.parallaxMultiplier * this.layer);
  273. this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10; // easing equation
  274. }
  276. var elWidth = element.offsetWidth;
  277. var elHeight = element.offsetHeight;
  279. switch (options.directionX) {
  280. case 'left':
  281. if (this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
  282. this.position.x = elWidth - this.parallaxOffsetX;
  283. }
  284. break;
  285. case 'right':
  286. if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth) {
  287. this.position.x = 0 - this.parallaxOffsetX;
  288. }
  289. break;
  290. default:
  291. // if particle has reached edge of canvas, reverse its direction
  292. if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth || this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
  293. this.speed.x = -this.speed.x;
  294. }
  295. break;
  296. }
  298. switch (options.directionY) {
  299. case 'up':
  300. if (this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
  301. this.position.y = elHeight - this.parallaxOffsetY;
  302. }
  303. break;
  304. case 'down':
  305. if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight) {
  306. this.position.y = 0 - this.parallaxOffsetY;
  307. }
  308. break;
  309. default:
  310. // if particle has reached edge of canvas, reverse its direction
  311. if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight || this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
  312. this.speed.y = -this.speed.y;
  313. }
  314. break;
  315. }
  317. // move particle
  318. this.position.x += this.speed.x;
  319. this.position.y += this.speed.y;
  320. };
  322. /**
  323. * Setter: particle stacking position
  324. */
  325. Particle.prototype.setStackPos = function(i) {
  326. this.stackPos = i;
  327. };
  329. function option (key, val) {
  330. if (val) {
  331. options[key] = val;
  332. } else {
  333. return options[key];
  334. }
  335. }
  337. function destroy() {
  338. console.log('destroy');
  339. canvas.parentNode.removeChild(canvas);
  340. hook('onDestroy');
  341. if ($) {
  342. $(element).removeData('plugin_' + pluginName);
  343. }
  344. }
  346. function hook(hookName) {
  347. if (options[hookName] !== undefined) {
  348. options[hookName].call(element);
  349. }
  350. }
  352. init();
  354. return {
  355. option: option,
  356. destroy: destroy,
  357. start: start,
  358. pause: pause
  359. };
  360. }
  362. window[pluginName] = function(elem, options) {
  363. return new Plugin(elem, options);
  364. };
  366. window[pluginName].defaults = {
  367. minSpeedX: 0.1,
  368. maxSpeedX: 0.7,
  369. minSpeedY: 0.1,
  370. maxSpeedY: 0.7,
  371. directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
  372. directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
  373. density: 10000, // how many particles will be generated: one particle every n pixels
  374. dotColor: '#666666',
  375. lineColor: '#666666',
  376. particleRadius: 7, // dot size
  377. lineWidth: 1,
  378. curvedLines: false,
  379. proximity: 100, // how close two dots need to be before they join
  380. parallax: true,
  381. parallaxMultiplier: 5, // the lower the number, the more extreme the parallax effect
  382. onInit: function() {},
  383. onDestroy: function() {}
  384. };
  386. // nothing wrong with hooking into jQuery if it's there...
  387. if ($) {
  388. $.fn[pluginName] = function(options) {
  389. if (typeof arguments[0] === 'string') {
  390. var methodName = arguments[0];
  391. var args = Array.prototype.slice.call(arguments, 1);
  392. var returnVal;
  393. this.each(function() {
  394. if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
  395. returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
  396. }
  397. });
  398. if (returnVal !== undefined){
  399. return returnVal;
  400. } else {
  401. return this;
  402. }
  403. } else if (typeof options === "object" || !options) {
  404. return this.each(function() {
  405. if (!$.data(this, 'plugin_' + pluginName)) {
  406. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  407. }
  408. });
  409. }
  410. };
  411. }
  413. })(window, document);
  415. /**
  416. * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
  417. * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  418. * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  419. * @license: MIT license
  420. */
  421. (function() {
  422. var lastTime = 0;
  423. var vendors = ['ms', 'moz', 'webkit', 'o'];
  424. for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  425. window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  426. window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  427. }
  429. if (!window.requestAnimationFrame)
  430. window.requestAnimationFrame = function(callback, element) {
  431. var currTime = new Date().getTime();
  432. var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  433. var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  434. timeToCall);
  435. lastTime = currTime + timeToCall;
  436. return id;
  437. };
  439. if (!window.cancelAnimationFrame)
  440. window.cancelAnimationFrame = function(id) {
  441. clearTimeout(id);
  442. };
  443. }());
;(function(window, document) {
  "use strict";
  var pluginName = 'daisyjs';

  // http://youmightnotneedjquery.com/#deep_extend
  function extend(out) {
    out = out || {};
    for (var i = 1; i < arguments.length; i++) {
      var obj = arguments[i];
      if (!obj) continue;
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object')
            deepExtend(out[key], obj[key]);
          else
            out[key] = obj[key];
        }
      }
    }
    return out;
  }

  var $ = window.jQuery;

  function Plugin(element, options) {
    var canvasSupport = !!document.createElement('canvas').getContext;
    var canvas;
    var ctx;
    var particles = [];
    var raf;
    var mouseX = 0;
    var mouseY = 0;
    var winW;
    var winH;
    var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
    var orientationSupport = !!window.DeviceOrientationEvent;
    var tiltX = 0;
    var pointerX;
    var pointerY;
    var tiltY = 0;
    var paused = false;

    options = extend({}, window[pluginName].defaults, options);

    /**
     * Init
     */
    function init() {
      if (!canvasSupport) { return; }

      // create canvas
      canvas = document.createElement('canvas');
      canvas.className = 'pg-canvas';
      canvas.style.display = 'block';
      element.insertBefore(canvas, element.firstChild);
      ctx = canvas.getContext('2d');
      styleCanvas();

      // create particles
      var numParticles = Math.round((canvas.width * canvas.height) / options.density);
      for (var i = 0; i < numParticles; i++) {
        var p = new Particle();
        p.setStackPos(i);
        particles.push(p);
      }

      window.addEventListener('resize', function() {
        resizeHandler();
      }, false);

      document.addEventListener('mousemove', function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
      }, false);

      if (orientationSupport && !desktop) {
        window.addEventListener('deviceorientation', function () {
          // contrain tilt range to [-30,30]
          tiltY = Math.min(Math.max(-event.beta, -30), 30);
          tiltX = Math.min(Math.max(-event.gamma, -30), 30);
        }, true);
      }

      draw();
      hook('onInit');
    }

    /**
     * Style the canvas
     */
    function styleCanvas() {
      canvas.width = element.offsetWidth;
      canvas.height = element.offsetHeight;
      ctx.fillStyle = options.dotColor;
      ctx.strokeStyle = options.lineColor;
      ctx.lineWidth = options.lineWidth;
    }

    /**
     * Draw particles
     */
    function draw() {
      if (!canvasSupport) { return; }

      winW = window.innerWidth;
      winH = window.innerHeight;

      // wipe canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // update particle positions
      for (var i = 0; i < particles.length; i++) {
        particles[i].updatePosition();
      }
      // draw particles
      for (i = 0; i < particles.length; i++) {
        particles[i].draw();
      }

      // call this function next time screen is redrawn
      if (!paused) {
        raf = requestAnimationFrame(draw);
      }
    }

    /**
     * Add/remove particles.
     */
    function resizeHandler() {
      // resize the canvas
      styleCanvas();

      var elWidth = element.offsetWidth;
      var elHeight = element.offsetHeight;

      // remove particles that are outside the canvas
      for (var i = particles.length - 1; i >= 0; i--) {
        if (particles[i].position.x > elWidth || particles[i].position.y > elHeight) {
          particles.splice(i, 1);
        }
      }

      // adjust particle density
      var numParticles = Math.round((canvas.width * canvas.height) / options.density);
      if (numParticles > particles.length) {
        while (numParticles > particles.length) {
          var p = new Particle();
          particles.push(p);
        }
      } else if (numParticles < particles.length) {
        particles.splice(numParticles);
      }

      // re-index particles
      for (i = particles.length - 1; i >= 0; i--) {
        particles[i].setStackPos(i);
      }
    }

    /**
     * Pause particle system
     */
    function pause() {
      paused = true;
    }

    /**
     * Start particle system
     */
    function start() {
      paused = false;
      draw();
    }

    /**
     * Particle
     */
    
    function Particle() {
      this.stackPos = this.stackPos; 
      this.active = true;
      this.layer = Math.ceil(Math.random() * 3);
      this.parallaxOffsetX = 0;
      this.parallaxOffsetY = 0;
      // initial particle position
      this.position = {
        x: Math.ceil(Math.random() * canvas.width),
        y: Math.ceil(Math.random() * canvas.height)
      };
      // random particle speed, within min and max values
      this.speed = {};
      switch (options.directionX) {
        case 'left':
          this.speed.x = +(-options.maxSpeedX + (Math.random() * options.maxSpeedX) - options.minSpeedX).toFixed(2);
          break;
        case 'right':
          this.speed.x = +((Math.random() * options.maxSpeedX) + options.minSpeedX).toFixed(2);
          break;
        default:
          this.speed.x = +((-options.maxSpeedX / 2) + (Math.random() * options.maxSpeedX)).toFixed(2);
          this.speed.x += this.speed.x > 0 ? options.minSpeedX : -options.minSpeedX;
          break;
      }
      switch (options.directionY) {
        case 'up':
          this.speed.y = +(-options.maxSpeedY + (Math.random() * options.maxSpeedY) - options.minSpeedY).toFixed(2);
          break;
        case 'down':
          this.speed.y = +((Math.random() * options.maxSpeedY) + options.minSpeedY).toFixed(2);
          break;
        default:
          this.speed.y = +((-options.maxSpeedY / 2) + (Math.random() * options.maxSpeedY)).toFixed(2);
          this.speed.x += this.speed.y > 0 ? options.minSpeedY : -options.minSpeedY;
          break;
      }
    }

    /**
     * Draw particle
     */
    Particle.prototype.draw = function() {
      // draw circle
      ctx.beginPath();
      ctx.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, options.particleRadius / 2, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();

      // draw lines
      ctx.beginPath();
      // iterate over all particles which are higher in the stack than this one
      for (var i = particles.length - 1; i > this.stackPos; i--) {
        var p2 = particles[i];

        // pythagorus theorum to get distance between two points
        var a = this.position.x - p2.position.x;
        var b = this.position.y - p2.position.y;
        var dist = Math.sqrt((a * a) + (b * b)).toFixed(2);

        // if the two particles are in proximity, join them
        if (dist < options.proximity) {
          ctx.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
          if (options.curvedLines) {
            ctx.quadraticCurveTo(Math.max(p2.position.x, p2.position.x), Math.min(p2.position.y, p2.position.y), p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
          } else {
            ctx.lineTo(p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
          }
        }
      }
      ctx.stroke();
      ctx.closePath();
    };

    /**
     * Update particle position
     */
    Particle.prototype.updatePosition = function() {
      if (options.parallax) {
        if (orientationSupport && !desktop) {
          // map tiltX range [-30,30] to range [0,winW]
          var ratioX = (winW - 0) / (30 - (-30));
          pointerX = (tiltX - (-30)) * ratioX + 0;
          // map tiltY range [-30,30] to range [0,winH]
          var ratioY = (winH - 0) / (30 - (-30));
          pointerY = (tiltY - (-30)) * ratioY + 0;
        } else {
          pointerX = mouseX;
          pointerY = mouseY;
        }
        // calculate parallax offsets
        this.parallaxTargX = (pointerX - (winW / 2)) / (options.parallaxMultiplier * this.layer);
        this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10; // easing equation
        this.parallaxTargY = (pointerY - (winH / 2)) / (options.parallaxMultiplier * this.layer);
        this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10; // easing equation
      }

      var elWidth = element.offsetWidth;
      var elHeight = element.offsetHeight;

      switch (options.directionX) {
        case 'left':
          if (this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
            this.position.x = elWidth - this.parallaxOffsetX;
          }
          break;
        case 'right':
          if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth) {
            this.position.x = 0 - this.parallaxOffsetX;
          }
          break;
        default:
          // if particle has reached edge of canvas, reverse its direction
          if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth || this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
            this.speed.x = -this.speed.x;
          }
          break;
      }

      switch (options.directionY) {
        case 'up':
          if (this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
            this.position.y = elHeight - this.parallaxOffsetY;
          }
          break;
        case 'down':
          if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight) {
            this.position.y = 0 - this.parallaxOffsetY;
          }
          break;
        default:
          // if particle has reached edge of canvas, reverse its direction
          if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight || this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
            this.speed.y = -this.speed.y;
          }
          break;
      }

      // move particle
      this.position.x += this.speed.x;
      this.position.y += this.speed.y;
    };

    /**
     * Setter: particle stacking position
     */
    Particle.prototype.setStackPos = function(i) {
      this.stackPos = i;
    };

    function option (key, val) {
      if (val) {
        options[key] = val;
      } else {
        return options[key];
      }
    }

    function destroy() {
      console.log('destroy');
      canvas.parentNode.removeChild(canvas);
      hook('onDestroy');
      if ($) {
        $(element).removeData('plugin_' + pluginName);
      }
    }

    function hook(hookName) {
      if (options[hookName] !== undefined) {
        options[hookName].call(element);
      }
    }

    init();

    return {
      option: option,
      destroy: destroy,
      start: start,
      pause: pause
    };
  }

  window[pluginName] = function(elem, options) {
    return new Plugin(elem, options);
  };

  window[pluginName].defaults = {
    minSpeedX: 0.1,
    maxSpeedX: 0.7,
    minSpeedY: 0.1,
    maxSpeedY: 0.7,
    directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
    directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
    density: 10000, // how many particles will be generated: one particle every n pixels
    dotColor: '#666666',
    lineColor: '#666666',
    particleRadius: 7, // dot size
    lineWidth: 1,
    curvedLines: false,
    proximity: 100, // how close two dots need to be before they join
    parallax: true,
    parallaxMultiplier: 5, // the lower the number, the more extreme the parallax effect
    onInit: function() {},
    onDestroy: function() {}
  };

  // nothing wrong with hooking into jQuery if it's there...
  if ($) {
    $.fn[pluginName] = function(options) {
      if (typeof arguments[0] === 'string') {
        var methodName = arguments[0];
        var args = Array.prototype.slice.call(arguments, 1);
        var returnVal;
        this.each(function() {
          if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
            returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
          }
        });
        if (returnVal !== undefined){
          return returnVal;
        } else {
          return this;
        }
      } else if (typeof options === "object" || !options) {
        return this.each(function() {
          if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
          }
        });
      }
    };
  }

})(window, document);

/**
 * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 * @license: MIT license
 */
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };

    if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
}());

 在线演示

让链接同时具备两种打开方式

获取源码: 如何在HTML CSS JS制作网页中鼠标拖拽粒子效果动画背景cid1146
下载数:218人次, 文件大小: 783.3 KB, 上传日期: 2021年-2 月-21日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,981 人查阅

类似文章