问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
已注销
    3.6k83856

    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()滚动不分上下方向- -上下滚动都是触发一样的内容

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

    javascriptjquerycss3
    阅读 10.7k
    3 个回答
    得票最新
    头像
    xzavier
      7.1k417

      原理：先给元素设置一个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>
      头像
      JaysonWang
        5801310

        scrollTop

        头像
        已注销
          3.6k83856

          自行摸索结果- -

          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());
            });
        }
    }

          要点：
          1、为了更清楚简单地测试效果，这里默认元素elLeft的初始left为0
          2、只有当elLeft进入可视区域才开始发生位移，改变left,所以没到可视区域（可视窗口高度+可视窗口之上高度<elLeft.offset().top）时，让偏移量一直保持0不动

          问题：
          1、由于浏览器不同，鼠标滚动的默认距离都是不同的，举例来说
          chrome的$(window).scrollTop()默认是每次100高度,而firefox则是132高度

          2、滚动条总长度不确定，举例来说：
          如果整个滚动条长度是1123，每次滚动高度100，那么最后会多出23

          实际测试结果，以上两个问题都会导致left偏移的量不均匀，就是说，会导致每次left加减100，但是突然变成只加减了23...

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题