如何动画横向滚动动画，并且包含文本垂直移动？ [英] How to animate a scroll animation that goes horizontally, and the containing text moves vertically?

查看：89
本文介绍了如何动画横向滚动动画，并且包含文本垂直移动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想制作一个滚动动画，但我对这种类型的实现没有任何想法。我该如何处理这个动画（div和包含七个文本），滚动div从左到右移动，并且它包含文本在视口中时从下到上移动。



$（document）.ready（function（）{$（window）.scroll（function（）{}）;}

.one，.two，.three ,.四，。五，六，。七{高度：1000像素;}。{一个背景：＃FF9900;}一{背景：红色;}，三个{背景：绿色;}四个{背景：蓝色;}。 5 {background：purple;}。six {background：darkblue;}。7 {background：＃00ffff;} 

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css/> < link rel =stylesheethref =hover.cssmedia =all/> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< div class =container-fluid one> < h1 style =color：#fff;> One< / h1>< / div> < div class =container-fluid two>< h1 style =color：#fff;>两个< / h1>< / div> < div class =container-fluid three>< h1 style =color：#fff;> Three< / h1>< / div> < div class =container-fluid four>< h1 style =color：#fff;>四个< / h1>< / div> < div class =container-fluid five>< h1 style =color：#fff;> Five< / h1>< / div> < div class =container-fluid six>< h1 style =color：#fff;>六个< / h1>< / div> < div class =container-fluid seven>< h1 style =color：#fff;> Seven< / h1>< / div>

解决方案

以下脚本已在Google Chrome 54.0.2840.71 for Mac上测试过。向左/向右滚动以滑动到下一个屏幕。
显然，您必须单击笔结果框以启用codepen上的左/右键以进行导航。请问这样的事情能帮助你开始吗？

看到它正在工作



HTML 

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css/> 
< link rel =stylesheethref =t1.css/> 
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script> 
< div class =section> 
< div class =container-fluid one> 
< h1 style =color：#fff;> One< / h1> 
< / div> 
< div class =container-fluid two> 
< h1 style =color：#fff;>两个< / h1> 
< div class =block block1>< / div> 
< div class =block block2>< / div> 
< / div> 
< div class =container-fluid three> 
< h1 style =color：#fff;> Three< / h1> 
< div class =block block1>< / div> 
< div class =block block2>< / div> 
< / div> 
< div class =container-fluid four> 
< h1 style =color：#fff;> Four< / h1> 
< / div> 
< div class =container-fluid five> 
< h1 style =color：#fff;> Five< / h1> 
< / div> 
< div class =container-fluid six> 
< h1 style =color：#fff;>六个< / h1> 
< / div> 
< div class =container-fluid seven> 
< h1 style =color：#fff;> Seven< / h1> 
< / div> 
< / div>

CSS 

  html，
 body，
 .section，
 .container-fluid {
 height：100％; 
} 
 
 
 
 h1 {
 margin-top：-300px; 
转换：全1; 
} 
 
 .active h1 {
 margin-top：0; 
} 
 
 .section {
 display：-webkit-box; 
 display：-moz-box; 
显示：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 flex-flow：row; 
身高：100％; 
宽度：100％; 
} 
 
 .container-fluid {
 padding：20px; 
颜色：白色; 
 font-size：22px; 
 background-color：crimson; 
 border：none; 
 flex：1; 
 -webkit-flex：1; 
 text-align：center; 
最小宽度：100％; 
} 
 
 .one {
 background：＃ff9900; 
} 
 
 .two {
 background：red; 
} 
 
 .three {
 background：green; 
} 
 
 .four {
 background：blue; 
} 
 
 .five {
 background：purple; 
} 
 
 .six {
 background：darkblue; 
} 
 
 .seven {
 background：＃00ffff;

JS 

  function prevent_default（e）{
e = e || window.event; 
 if（e.preventDefault）
 e.preventDefault（）; 
 e.returnValue = false; 
} 
 
 function disable_scroll（）{
 if（window.addEventListener）//较早的FF 
 window.addEventListener（'DOMMouseScroll'，prevent_default，false）; 
 window.onwheel = prevent_default; //现代标准
 window.onmousewheel = document.onmousewheel = prevent_default; //旧版浏览器，IE 
 window.ontouchmove = prevent_default; // mobile 
 // document.onkeydown = prevent_defaultForScrollKeys; 
 
 
函数enable_scroll（）{
 if（window.removeEventListener）
 window.removeEventListener（'DOMMouseScroll'，prevent_default，false）; 
 window.onmousewheel = document.onmousewheel = null; 
 window.onwheel = null; 
 window.ontouchmove = null; 
 document.onkeydown = null; 
 
 
 var lastScrollLeft = 0，
 direction = 0，
 listen_for_scroll = false，
 first_page_scroll = true，
 element_y = 100; 
 
 $（'。container-fluid'）。eq（get_current_slide_position（）+ direction）.addClass（'active'）; 
 
函数get_current_slide_position（）{
 return Math.floor（$（document）.scrollLeft（）/ $（window）.width（））; 
 
 $ b $ function get_current_slide_x（direction）{
 var current_el_pos = get_current_slide_position（），
 next_el_pos = current_el_pos + direction，
 next_horizo​​ntal_pos = next_el_pos * $（窗口）.WIDTH（）; 
返回next_horizo​​ntal_pos; 
 
 $ b $（window）.scroll（function（）{
 
 // var document_scroll_left = $（'body'）。scrollLeft（），
 var document_scroll_left = $（document）.scrollLeft（），
 $ b window_width = $（window）.width（）; 
 
 
 if（listen_for_scroll）{ 
 // console.log（$（document）.scrollLeft（））
 
 if（lastScrollLeft！= document_scroll_left）{
 console.log（lastScrollLeft）; 
 console.log（document_scroll_left）; 
 $ b $ if（lastScrollLeft> document_scroll_left）{
 console.log（'0'）; 
 direction = 0; 
} else if（lastScrollLeft< document_scroll_left）{
 console.log（'1'）; 
 direction = 1; 
} 
 
 if（first_page_scroll）{
方向= 0; 
} 
 
 l_pos = get_current_slide_x（方向）; 
 
 listen_for_scroll = false; 
 disable_scroll（）; 
 $（'。container-fluid'）。removeClass（'active'）; 
 $（'。container-fluid'）。eq（get_current_slide_position（）+ direction）.addClass（'active'）; 
 
 console.log（'开始动画'）
 console.log（l_pos）$ b $（'html，body'）。animate（{
 scrollLeft：l_pos 
}，'slow'，function（）{
 console.log（'ending animation'）
 clearTimeout（$。data（this，'scrollTimer'））; 
 $ .data（this，'scrollTimer'，setTimeout（function（）{
 lastScrollLeft = $（document）.scrollLeft（）; 
 direction = 0; 
 enable_scroll（）; 
 listen_for_scroll = true; 
}，450））; 
}）; 
} 
 
} 
 
 if（first_page_scroll）{
 lastScrollLeft = document_scroll_left; 
 first_page_scroll = false; 
 listen_for_scroll = true; 
} 
}）;





我也来过一个 CSS only solution ，但它更复杂。


I want make a scroll animation but I don't have any idea about this type of implementation. How could I to approach this animation to (div and containing one-seven text), on scrolling div moves left to right and it containing text moves bottom to top when it is in viewport.

$(document).ready(function(){
   $(window).scroll(function(){
   
   });
});

.one,.two,.three,.four,.five,.six,.seven{
height:1000px;

}
.one{
background:#ff9900;
}
.two{
background:red;
}
.three{
background:green;
}
.four{
background:blue;
}
.five{
background:purple;
}
.six{
background:darkblue;
}
.seven{
background:#00ffff;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="hover.css" media="all"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid one"><h1 style="color:#fff;">One</h1></div>
    <div class="container-fluid two"><h1 style="color:#fff;">Two</h1></div>
	  <div class="container-fluid three"><h1 style="color:#fff;">Three</h1></div>
	    <div class="container-fluid four"><h1 style="color:#fff;">Four</h1></div>
		  <div class="container-fluid five"><h1 style="color:#fff;">Five</h1></div>
		    <div class="container-fluid six"><h1 style="color:#fff;">Six</h1></div>
			  <div class="container-fluid seven"><h1 style="color:#fff;">Seven</h1></div>

解决方案

The following script was tested on Google Chrome 54.0.2840.71 for Mac. Scroll left / right to slide to the next screen. Apparently you have to click on the pen result frame to enable the left / right keys, on codepen, for navigation. Would something like this help to get you started?

See it working

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <link rel="stylesheet" href="t1.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="section">
        <div class="container-fluid one">
            <h1 style="color:#fff;">One</h1>
        </div>
        <div class="container-fluid two">
            <h1 style="color:#fff;">Two</h1>
            <div class="block block1"></div>
            <div class="block block2"></div>
        </div>
        <div class="container-fluid three">
            <h1 style="color:#fff;">Three</h1>
            <div class="block block1"></div>
            <div class="block block2"></div>
        </div>
        <div class="container-fluid four">
            <h1 style="color:#fff;">Four</h1>
        </div>
        <div class="container-fluid five">
            <h1 style="color:#fff;">Five</h1>
        </div>
        <div class="container-fluid six">
            <h1 style="color:#fff;">Six</h1>
        </div>
        <div class="container-fluid seven">
            <h1 style="color:#fff;">Seven</h1>
        </div>
    </div>

CSS

html,
body,
.section,
.container-fluid {
    height: 100%;
}



h1 {
    margin-top: -300px;
    transition: all 1s;
}

.active h1 {
    margin-top: 0;
}

.section {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    height: 100%;
    width: 100%;
}

.container-fluid {
    padding: 20px;
    color: white;
    font-size: 22px;
    background-color: crimson;
    border:none;
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    min-width: 100%;
}

.one {
    background: #ff9900;
}

.two {
    background: red;
}

.three {
    background: green;
}

.four {
    background: blue;
}

.five {
    background: purple;
}

.six {
    background: darkblue;
}

.seven {
    background: #00ffff;
}

JS

function prevent_default(e) {
        e = e || window.event;
        if (e.preventDefault)
            e.preventDefault();
        e.returnValue = false;
    }

    function disable_scroll() {
        if (window.addEventListener) // older FF
            window.addEventListener('DOMMouseScroll', prevent_default, false);
        window.onwheel = prevent_default; // modern standard
        window.onmousewheel = document.onmousewheel = prevent_default; // older browsers, IE
        window.ontouchmove = prevent_default; // mobile
        // document.onkeydown  = prevent_defaultForScrollKeys;
    }

    function enable_scroll() {
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', prevent_default, false);
        window.onmousewheel = document.onmousewheel = null;
        window.onwheel = null;
        window.ontouchmove = null;
        document.onkeydown = null;
    }

    var lastScrollLeft = 0,
        direction = 0,
        listen_for_scroll = false,
        first_page_scroll = true,
        element_y = 100;

    $('.container-fluid').eq(get_current_slide_position() + direction).addClass('active');

    function get_current_slide_position() {
        return Math.floor($(document).scrollLeft() / $(window).width());
    }

    function get_current_slide_x(direction) {
        var current_el_pos = get_current_slide_position(),
            next_el_pos = current_el_pos + direction,
            next_horizontal_pos = next_el_pos * $(window).width();
        return next_horizontal_pos;
    }

    $(window).scroll(function() {

        // var document_scroll_left = $('body').scrollLeft(),
        var document_scroll_left = $(document).scrollLeft(),

            window_width = $(window).width();


        if (listen_for_scroll) {
            // console.log($(document).scrollLeft())

            if (lastScrollLeft != document_scroll_left) {
            console.log(lastScrollLeft);
            console.log(document_scroll_left);

                if (lastScrollLeft > document_scroll_left) {
                    console.log('0');
                    direction = 0;
                } else if (lastScrollLeft < document_scroll_left) {
                    console.log('1');
                    direction = 1;
                }

                if (first_page_scroll) {
                    direction = 0;
                }

                l_pos = get_current_slide_x(direction);

                listen_for_scroll = false;
                disable_scroll();
                $('.container-fluid').removeClass('active');
                $('.container-fluid').eq(get_current_slide_position() + direction).addClass('active');

                console.log('starting animation')
                console.log(l_pos)
                $('html, body').animate({
                    scrollLeft: l_pos
                }, 'slow', function() {
                    console.log('ending animation')
                    clearTimeout($.data(this, 'scrollTimer'));
                    $.data(this, 'scrollTimer', setTimeout(function() {
                        lastScrollLeft = $(document).scrollLeft();
                        direction = 0;
                        enable_scroll();
                        listen_for_scroll = true;
                    }, 450));
                });
            }

        }

        if (first_page_scroll) {
            lastScrollLeft = document_scroll_left;
            first_page_scroll = false;
            listen_for_scroll = true;
        }
    });

I also came accross a CSS only solution, but it is more complicated.

这篇关于如何动画横向滚动动画，并且包含文本垂直移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆