【CSS】这种滚动动画效果是怎么实现的？

Z时代
2024-01-10
分类：技术分享

http://johnpolacek.github.io/...有个插件网站

其中有一个滚动的动画效果：位置如下图
图片描述

1、向下滚动左右两边的内容向中间移动
2、而向上滚动两个内容又退回到左右两边

看下了网站的代码，发现它是这么写的

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()方法里的内容是另一个$.function类方法里封装了。。没法看懂- -

自己试了下用$(window).scroll()方法完全没法实现，因为scroll()滚动不分上下方向- -上下滚动都是触发一样的内容

球有哪位大神有空帮忙看看这个网站上的那个动画效果，告诉我原理或者类似的简单实现方式，拜谢！

回答：

原理：先给元素设置一个left值让其隐藏，当滚动条到一定位置，改变其left值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理。不过，其中要判断滚动条向上滚动还是向下滚动。我给你实现了其中一个，另外自己摸索实践一下。代码很粗糙，理解一下，也不要管我在意我的命名，就想快点给你搞出来，所以很粗糙。只考虑实现，没考虑性能。DOM操作你可以自行优化。

<!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) {  //数据自取，可依据元素的scrollTop值
            var markLeft = parseInt($('#mark').css('left'));
            left = markLeft + (scrollTop/10);   //值的变动与滚动幅度现相关  ， 自行调节
            if(markLeft <= 640) {   //这个值是让他滚动到一个边界  ，  自行调节  
                $('#mark').css('left', left + 'px');   //举例一个元素，其他的自己来咯
            }
        } else if(isUpDown == 'up' && scrollTop <= 700) {   //往上时做相反  
            var markLeft = parseInt($('#mark').css('left'));
            left = markLeft - (scrollTop/10);   
            if(markLeft >= -100) {
                $('#mark').css('left', left + 'px');
            }
        }
        //其他的如opacity left 同理，自己实践一下吧
    });
</script>
</body></html>

回答：

scrollTop

回答：

自行摸索结果- -

function scrollTest() {
    var elLeft = $('.elLeft'),
        elRight = $('.elRight');
    var offsetTop = $('.elLeft').offset().top;
    // 滚动事件
    $(window).scroll(function() {
        //实时变化的浏览器窗口滚动条
        var wt = $(this).scrollTop(),
            wh = $(this).height();
        //delta为left将要偏移的值
        var delta = wt + wh - offsetTop;
       //只有当元素出现在可视区域时，才使left发生位移 
        if (delta < 0) {
            delta = 0;
        }
        // 判断元素left偏移到某个值时，停止动画
        $(delta <= 500 ? animeLeft(delta, true) : animeLeft(delta, false));
    });
    //动画函数左
    function animeLeft(delta, flag) {
        //判断是否继续调用动画函数
        if (flag) {
            elLeft.stop(true, false).animate({
                left: delta
            }, 200, function() {
                // alert($(window).scrollTop());
            });
        }    }