如何设置水平滚动动画的动画，并使包含的文本垂直移动？
我想制作一个滚动动画，但我对这种类型的实现一无所知。 我怎么能接近这个动画（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; }
One
Two
Three
Four
Five
Six
Seven
以下脚本在适用于Mac的Google Chrome 54.0.2840.71上进行了测试。 向左/向右滚动以滑动到下一个屏幕。 显然，您必须单击笔结果框以启用codepen上的左/右键进行导航。 这样的事情会帮助你入手吗？
看它工作
HTML
One
Two
Three
Four
Five
Six
Seven
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的解决方案 ，但它更复杂。