gsap动画初体验

最新推荐文章于 2024-08-08 17:26:57 发布

用户身份不明

最新推荐文章于 2024-08-08 17:26:57 发布

阅读量174

点赞数

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/weixin_55741908/article/details/131704234

版权

该代码示例展示了如何使用gsap.js库和ScrollTrigger插件创建一个基于页面滚动的动态图像展示。当用户滚动页面时，图片会按照预设的动画效果移动、旋转并淡出，提供了一种富媒体的交互体验。此外，代码还包括了一个点击事件处理程序，会在页面上生成带有随机颜色的心形图标，并执行动画效果。

摘要由CSDN通过智能技术生成

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

<head>
  <meta charset="utf-8" />
  <title>gsap.js演示</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    /* 给body的高度设定为：5000px，使得滚轮有滑动空间 */
    body {
      height: 6000px;
      width: 100%;
      overflow-x: hidden;
      background: linear-gradient(to bottom right, #000, #000 10%, #dff6ff);
      padding-top: 300px;
      padding-left: 300px;

    }

    span {
      display: block;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0.4px 0.4px 0.4px 0px #fff;
    }

    .demo {
      /* 让div元素的上边距为500px */
      /* 元素默认隐藏 */
      opacity: 1;
      /* background-color: #29a2ff; */
      display: block;
      margin-bottom: 5px;
    }

    .d1 {
      width: 717px;
      -webkit-user-select: none;
      /* Chrome，Safari，Opera，Edge */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer */
      user-select: none;
      /* 标准语法 */
    }

    .imageIcon {
      height: 30px;
    }

    .gsap-marker-scroller-end {
      top: 800px !important;
    }

    .gsap-marker-scroller-start {
      top: 100px !important;
    }
  </style>
</head>

<body>
  <!-- 动画 -->
  <div class="d1">
    <img src="./img/1.png" alt="" class="demo">
    <img src="./img/2.png" alt="" class="demo">
    <img src="./img/3.png" alt="" class="demo">
    <img src="./img/4.png" alt="" class="demo">
    <img src="./img/5.png" alt="" class="demo">
    <img src="./img/6.png" alt="" class="demo">
    <img src="./img/7.png" alt="" class="demo">
    <img src="./img/8.png" alt="" class="demo">
    <img src="./img/9.png" alt="" class="demo">
    <img src="./img/10.png" alt="" class="demo">
    <img src="./img/11.png" alt="" class="demo">
    <img src="./img/12.png" alt="" class="demo">
    <img src="./img/13.png" alt="" class="demo">
    <img src="./img/14.png" alt="" class="demo">
    <img src="./img/15.png" alt="" class="demo">
    <img src="./img/16.png" alt="" class="demo">
    <img src="./img/17.png" alt="" class="demo">
    <img src="./img/18.png" alt="" class="demo">
    <img src="./img/19.png" alt="" class="demo">
    <img src="./img/20.png" alt="" class="demo">
    <img src="./img/21.png" alt="" class="demo">
    <img src="./img/22.png" alt="" class="demo">
    <img src="./img/23.png" alt="" class="demo">
    <img src="./img/24.png" alt="" class="demo">
    <img src="./img/25.png" alt="" class="demo">
    <img src="./img/26.png" alt="" class="demo">
    <img src="./img/27.png" alt="" class="demo">
    <img src="./img/28.png" alt="" class="demo">
    <img src="./img/29.png" alt="" class="demo">
    <img src="./img/30.png" alt="" class="demo">
    <img src="./img/31.png" alt="" class="demo">
    <img src="./img/32.png" alt="" class="demo">
    <img src="./img/33.png" alt="" class="demo">
    <img src="./img/34.png" alt="" class="demo">
    <img src="./img/35.png" alt="" class="demo">
    <img src="./img/36.png" alt="" class="demo">
    <img src="./img/37.png" alt="" class="demo">
    <img src="./img/38.png" alt="" class="demo">
    <img src="./img/39.png" alt="" class="demo">
    <img src="./img/40.png" alt="" class="demo">
  </div>

  <!-- 导入脚本文件 -->
  <script src="js/gsap.min.js" type="text/javascript"></script>
  <!-- 导入滚动条交互插件 -->
  <script src="js/ScrollTrigger.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- 自定义脚本，此脚本需要写在导入脚本文件之后 -->
  <script type="text/javascript">




    // 注册插件
    gsap.registerPlugin(ScrollTrigger);

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: 'body', //以body为参照
        start: '200px  50%', //body 100px的地方为开始位置
        end: '800px  100%',
        // markers: true, //绘制线条
        scrub: true,
      }
    });
    // var tl = gsap.timeline();
    // 获取所有图片元素
    const images = document.querySelectorAll('.demo');
    console.log(images)
    // 对每个图片设置动画效果
    for (var i = 0; i < images.length; i++) {
      var image = images[i]; // 假设每张图片的id为 "image0" 至 "image99"

      // 随机生成运动的方向
      var directionX = Math.random() < 0.5 ? -1 : 1;
      var directionY = Math.random() < 0.5 ? -1 : 1;

      // 添加动画序列到时间轴
      tl.to(
        image,
        {
          x: directionX * Math.random() * window.innerWidth + "px",
          y: directionY * Math.random() * window.innerHeight + "px",
          opacity: 0,
          rotation: Math.random() * 360,
          duration: 2,
          ease: "power2.out",
        },
        0.1 * i
      );

    }

  </script>
  <script>
    var a = document.getElementById('a')
    var arr = ['❤点个红心呀', '❤记得收藏哦', '❤呀'];
    var i = 0;
    document.documentElement.onclick = function (e) {
      // 获取鼠标点击所在坐标
      var x = e.pageX, y = e.pageY;
      // 创建一个元素并将数组中的值随着点击的次数不断改变
      var a = document.createElement('img')
      a.src = './img/ww.png'
      a.classList.add('imageIcon')
      document.body.append(a)
      // 创建新元素设置绝对定位定位，使元素在点击时会创建在鼠标指针处
      a.style.position = 'absolute'
      a.style.left = x + "px";
      a.style.top = y + "px";
      i = (i + 1) % arr.length
      // 设置随机颜色，使用es6新语法``
      a.style.color = `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()} )`
      a.animate({
        "top": y - 180 + 'px',
        "opacity": 1
      }, 1500)
      // 由于原生js中的animate没有回调函数只能写个计时器来删除
      setTimeout(() => {
        a.parentNode.removeChild(a)
      }, 1000)

    }
  </script>
</body>

</html>