Question

我想制作一个滚动动画，但我对这种类型的实现一无所知。我怎么能接近这个动画（div和包含七个文本），滚动div从左到右移动，当它在视口中时，它包含文本从下到上移动。

$(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>

Answer 1

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

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

我也遇到CSS only solution，但它更复杂。

如何为水平滚动的滚动动画设置动画，并使包含的文本垂直移动？

1 个答案: