使用ScrollMagic製做與滾動相關的動畫效果

時間 2019-12-05

標籤使用 scrollmagic 製做滾動相關動畫效果简体版

原文原文鏈接

使用ScrollMagic製做與滾動相關的動畫效果

做者：吳業飛
時間：2019年1月17日html

背景

常常看到一些國外動效作的特別炫的網站使用的是ScrollMagic這個js庫，因而我決定寫個demo試用一下。node

需求

產品詳情頁的側邊分類導航要實現滾動到頁面頂部轉爲固定效果。ide

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ScrollMagicDemo</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
        }
        .banner {
            background: #ccc;
            height: 500px;
        }
        .section {
            padding: 100px 15px;
            background: rgba(0, 0, 255, 0.521);
            height: 2000px;
        }
        .side-bar {
            position: absolute;
            width: 200px;
            height: 300px;
            background: rgb(245, 96, 96);
        }
        .content {
            height: 2000px;
            background: gray;
            padding-left: 200px;
        }
    </style>
</head>
<body>
    <div class="banner">
        <span class="start-point">1</span>
        Banner
    </div>
    <div class="section">
        <div class="side-bar">side-bar</div>
        <div class="content">content</div>
    </div>
    <script src="./../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js"></script>
    <script>
        var controller = new ScrollMagic.Controller();
        var scene = new ScrollMagic.Scene({
            triggerElement: '.section',//觸發元素
            triggerHook: "onLeave",//觸發元素開始離開視口時觸發
            offset: 100,//從開始點滾動多少px觸發（施法前搖）
            duration: 0//效果持續的距離（法術持續時間/距離）

        }).setPin(".side-bar");//固定須要固定的元素

        controller.addScene(scene);
    </script>
</body>
</html>
複製代碼