第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

這種滾動(dòng)動(dòng)畫(huà)效果是怎么實(shí)現(xiàn)的？

這種滾動(dòng)動(dòng)畫(huà)效果是怎么實(shí)現(xiàn)的？

胡子哥哥 2018-09-05 17:26:39
http://johnpolacek.github.io/...有個(gè)插件網(wǎng)站其中有一個(gè)滾動(dòng)的動(dòng)畫(huà)效果：位置如下圖1、向下滾動(dòng) 左右兩邊的內(nèi)容向中間移動(dòng)2、而向上滾動(dòng) 兩個(gè)內(nèi)容又退回到左右兩邊看下了網(wǎng)站的代碼，發(fā)現(xiàn)它是這么寫(xiě)的witch (anim.attr('data-animation')) {                    case 'fly-in-left':                        anim                            .parent().css('overflow','hidden');                        scrolldeck.controller.animate(anim, { delay: windowHeight/2, duration: windowHeight/2, property:'left', start:-1200 });                        break;                    case 'fly-in-right':                        anim                            .parent().css('overflow','hidden');                        scrolldeck.controller.animate(anim, { delay: windowHeight/2, duration: windowHeight/2, property:'right', start:-1200 });                        break;                        animate()方法里的內(nèi)容是另一個(gè)$.function類(lèi)方法里封裝了。。沒(méi)法看懂- -自己試了下用$(window).scroll()方法 完全沒(méi)法實(shí)現(xiàn)，因?yàn)閟croll()滾動(dòng)不分上下方向- -上下滾動(dòng)都是觸發(fā)一樣的內(nèi)容球有哪位大神有空幫忙看看這個(gè)網(wǎng)站上的那個(gè)動(dòng)畫(huà)效果，告訴我原理或者類(lèi)似的簡(jiǎn)單實(shí)現(xiàn)方式，拜謝！                        
查看完整描述

1 回答

?
MM們

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊

原理：先給元素設(shè)置一個(gè)left值讓其隱藏，當(dāng)滾動(dòng)條到一定位置，改變其left值讓其出現(xiàn)。改變幅度與滾動(dòng)幅度正相關(guān)。透明度那個(gè)也是同理。不過(guò)，其中要判斷滾動(dòng)條向上滾動(dòng)還是向下滾動(dòng)。我給你實(shí)現(xiàn)了其中一個(gè)，另外自己摸索實(shí)踐一下。代碼很粗糙，理解一下，也不要管我在意我的命名，就想快點(diǎn)給你搞出來(lái)，所以很粗糙。只考慮實(shí)現(xiàn)，沒(méi)考慮性能。DOM操作你可以自行優(yōu)化。

<!DOCTYPE html>

<html>

<head>

    <title>ohyeah</title>

    <style type="text/css">

        #wrapper {height: 100%;overflow: hidden;}

        #screen {width: 300px;height: 800px;}

        #mark{position: relative;width: 200px;height: 50px;font-size: 40px;left: -100px;}

        #cover{position: relative;width: 200px;height: 50px;font-size: 40px;left: 1360px;}

        #dialog {position: relative;width: 200px;height: 50px;margin: 0 auto;font-size: 20px;line-height: 50px;opacity: 0;}

        #ohyeah {height: 800px;}

    </style>

    <script src="jquery.js" type="text/javascript"></script> 

</head>

<div id="wrapper">

    <div id="screen"></div>

    <div id="mark">love</div>

    <div id="dialog">ooo</div>

    <div id="cover">love</div>

    <div id="ohyeah"></div>

</div>

<script type="text/javascript">


    var beforeScrollTop = $(window).scrollTop();

    $(window).scroll(function() {

        var afterScrollTop = $(window).scrollTop(),

            updown = afterScrollTop - beforeScrollTop;

        if( updown === 0 ) return false;            

        beforeScrollTop = afterScrollTop;

        console.log(updown > 0 ? "down" : "up");

        

        var isUpDown = updown > 0 ? "down" : "up";  //判斷往上還是往下

        var scrollTop = $(window).scrollTop();

        if(isUpDown == 'down' && scrollTop >= 400) {  //數(shù)據(jù)自取，可依據(jù)元素的scrollTop值

            var markLeft = parseInt($('#mark').css('left'));

            left = markLeft + (scrollTop/10);   //值的變動(dòng)與滾動(dòng)幅度現(xiàn)相關(guān)  ， 自行調(diào)節(jié)

            if(markLeft <= 640) {   //這個(gè)值是讓他滾動(dòng)到一個(gè)邊界  ，  自行調(diào)節(jié)  

                $('#mark').css('left', left + 'px');   //舉例一個(gè)元素，其他的自己來(lái)咯

            }

            

        } else if(isUpDown == 'up' && scrollTop <= 700) {   //往上時(shí)做相反  

            var markLeft = parseInt($('#mark').css('left'));

            left = markLeft - (scrollTop/10);   

            if(markLeft >= -100) {

                $('#mark').css('left', left + 'px');

            }

        }


        //其他的如opacity left 同理，自己實(shí)踐一下吧

    });

        

    

</script>

</body>

</html>


查看完整回答
反對(duì) 回復(fù) 2018-10-17
  • 1 回答
  • 0 關(guān)注
  • 1363 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)