gsap实现可调参数的鼠标跟随蜘蛛爬行效果代码-html代码-BFW代码库

gsap实现可调参数的鼠标跟随蜘蛛爬行效果代码

代码语言：html

所属分类：其他

代码描述：gsap实现可调参数的鼠标跟随蜘蛛爬行效果代码，这个大蜘蛛会跟随你的鼠标走动。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          overflow: hidden;
          margin: 0;
          height: 100vh;
          font-family: sans-serif;
        }
        
        canvas {
          height: 100vh;
          width: 100%;
        }
        
        .credits {
          position: fixed;
          z-index: 10;
          bottom: 20px;
          left: 20px;
        }
        .credits a {
          text-decoration: none;
          color: #000;
        }
        .credits span {
          font-size: 11px;
        }
        .credits h1 {
          margin: -2px 0 0;
          padding: 0;
          font-size: 10px;
          font-weight: normal;
        }
        .credits h2 {
          margin: -1px 0;
          font-size: 14.1px;
          font-weight: normal;
        }
    </style>


</head>

<body>
    <!--
Instagram: https://www.instagram.com/supahfunk/
Twitter: https://twitter.com/supahfunk
-->
    <canvas id="canvas" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        /*--------------------
        Vars
        --------------------*/
        const canvas = document.querySelector('#canvas');
        const ctx = canvas.getContext('2d');
        const win = {
          w: window.innerWidth,
          h: window.innerHeight };
        
        const mouse = {
          x: win.w * 0.5,
          y: win.h * 0.5,
          lerpX: win.w * 0.5,
          lerpY: win.h * 0.5,
          stepX: 0,
          stepY: 0,
          oldStepX: 0,
          oldStepY: 0,
          angle: 0 };
        
        const opts = {
          cellSize: 40,
          pawRadius: 94,
          pawHeight: 200,
          pawRandomStep: 0.2,
          bodyHeight: 20,
          spiderOffsetX: 30,
          spiderOffsetY: 40,
          shadowY: 0.3,
          speed: 0.12,
          stop: false,
          jump: 0 };
        
        let cols = 0;
        let rows = 0;
        
        /*--------------------
        Lerp
        --------------------*/
        const lerp = (a, b, c) => {
          return (1 - c) * a + c * b;
        };
        
        /*--------------------
        Random
        --------------------*/
        const random = (start, range) => {
          return start - range + Math.random() * range * 2;
        };
        
        /*--------------------
        Resize
        --------------------*/
        const handleResize = () => {
          win.w = window.innerWidth;
          win.h = window.innerHeight;
          canvas.width = win.w;
          canvas.height = win.h;
          cols = Math.round(win.w / opts.cellSize) + 1;
          rows = Math.round(win.h / opts.cellSize) + 1;
        };
        handleResize();
        window.addEventListener('resize', handleResize);
        
        /*--------------------
        Paws
        --------------------*/
        const Paws = [
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 },
        { x: win.w * 0.5, y: win.h * 0.5 }];
        
        
        /*--------------------
        Clear
        --------------------*/
        const clear = () => {
          ctx.clearRect(0, 0, win.w, win.h);
        };
        
        /*--------------------
        Circle
        --------------------*/
        const circle = (x, y, r, c) => {
          ctx.fillStyle = c;
          ctx.beginPath();
          ctx.ellipse(x, y, r, r, 0, 0, Math.PI * 2);
          ctx.fill();
          ctx.closePath();
        };
        
        /*--------------------
        Circle
        --------------------*/
        const rect = (x, y, r, c) => {
          ctx.fillStyle = c;
          ctx.fillRect(x, y, r, r);
        };
        
        /*--------------------
        Walk
        --------------------*/
        const walk = () => {
          let ind = 0;
          Array(10).
          fill().
          forEach((a, i) => {
            const theta = i / 10;
            if (i % 5 === 0) return;
            const x = random(
            mouse.x + cols * 0.5 + opts.pawRadius * Math.sin(theta * Math.PI * 2),
            opts.pawRadius * opts.pawRandomStep);
        
            const y = random(
            mouse.y + rows * 0.5 + opts.pawRadius * Math.cos(theta * Math.PI * 2),
            opts.pawRadius * opts.pawRandomStep);
        
        
            gsap.to(Paws[ind++], {
           .........完整代码请登录后点击上方下载按钮下载查看