スライドページにdivが現れ、前後に揺れる効果があります(JS実現)

10768 ワード




    
    test
    
        window.onload = function()</span><span class="token punctuation">{</span>
            var two = document.<span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'two'</span><span class="token punctuation">)</span><span class="token selector">;
            document.onscroll = function()</span><span class="token punctuation">{</span>
                var temp = document.documentElement.scrollTop<span class="token selector">;//                
                //             200px   ani1  ,    ani2  
                if(temp>=200)</span><span class="token punctuation">{</span>
                    two.style[<span class="token string">'animation-name'</span>]=<span class="token string">'ani1'</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token selector">else</span><span class="token punctuation">{</span>
                    two.style[<span class="token string">'animation-name'</span>]=<span class="token string">'ani2'</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                <span class="token selector">if(temp>=400)</span><span class="token punctuation">{</span>
                    three.style[<span class="token string">'animation-name'</span>]=<span class="token string">'ani1'</span><span class="token punctuation">;</span>

                <span class="token punctuation">}</span><span class="token selector">else</span><span class="token punctuation">{</span>
                    three.style[<span class="token string">'animation-name'</span>]=<span class="token string">'ani2'</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token selector">
       


    
"one">
"two" class="two">1321321321
"three">3333333