ScrollMagic的基本配置

最新推荐文章于 2023-06-11 15:14:34 发布

YY小怪兽

最新推荐文章于 2023-06-11 15:14:34 发布

阅读量900

点赞数

分类专栏： ScrollMagic 文章标签： javascript 前端 http

本文链接：https://blog.csdn.net/lihui61357457/article/details/121604569

版权

ScrollMagic 专栏收录该内容

4 篇文章

订阅专栏

详情可见

  // 官方文档: http://scrollmagic.io/docs/index.html
    // 1.创建一个控制器对象controller
    let controller = new ScrollMagic.Controller();
    // 2.创建一个场景对象scene
    let scene = new ScrollMagic.Scene({
        offset: 0,
        // 告诉ScrollMagic当前的场景从哪一个元素开始
        // triggerElement: "footer",
        // triggerElement: ".section3",
        triggerElement: "header",
        // 告诉ScrollMagic当前的场景从指定元素相对于视口的什么位置开始
        // triggerHook: "onEnter",
        // triggerHook: "onCenter",
        triggerHook: "onLeave",
        duration: 200,
        reverse: false,
    });
    // 告诉ScrollMagic哪一个元素需要固定
    // scene.setPin(".section1", {pushFollowers: false});
    scene.setPin(".section1");
    // 3.将场景对象添加到控制器对象
    controller.addScene(scene);