Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
​
    <!-- ScrollReveal v3.3.6 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
</head>
<body>
    <style>
        .grid {
            /* 排版用，不影響功能*/
            height: 300px;
            margin: 50px;
            background: #ccc;
            font-size: 50px;
            line-height: 300px;
            text-align: center;
        }
    </style>
    <div class="grid">1</div>
    <div class="grid">2</div>
    <div class="grid">3</div>
    <div class="grid">4</div>
    <script>
        window.sr = ScrollReveal({ 
            // 參數設定[註1]
            origin: "bottom",  // 起始位置
            distance: "20px",  // 距離
            duration: 500,  // 動畫時間
            delay: 0,  // 動畫延遲時間
            rotate: { x: 0, y: 0, z: 0 },  // 旋轉角度
            opacity: 0,  // 透明度
            scale: 0.9, // 縮放比例
            easing: "cubic-bezier(0.6, 0.2, 0.1, 1)", // 動畫速度曲線
            container: window.document.documentElement, // 外層
            mobile: true, // 支援行動裝置
            reset: true, // 每次都啟動動畫
            useDelay: "always", // 延遲動畫次數
            viewFactor: 0.2, // 當該物件在可視範圍內，則顯示此物件(0.2表示可視範圍20%)
            viewOffset: { top: 0, right: 0, bottom: 0, left: 0 }, // 當外層有設定間隔造成偏移，則請設定在此維持精準度
            beforeReveal: function (domEl) { console.log(1) }, // 當啟動前，則執行此函式
            beforeReset: function (domEl) {console.log(2) }, // 當重啟前，則執行此函式
            afterReveal: function (domEl) {console.log(3) }, // 當啟動後，則執行此函式
            afterReset: function (domEl) {console.log(4) } // 當重啟後，則執行此函式
        });
        sr.reveal( ".grid", {
            // 參數設定[註1]
        });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers