Как анимировать анимацию прокрутки, которая идет горизонтально, а содержащий текст перемещается по вертикали?

Я хочу сделать анимацию прокрутки, но я не имею никакого представления об этом типе реализации. Как я мог подойти к этой анимации (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> 
 
\t <div class="container-fluid three"><h1 style="color:#fff;">Three</h1></div> 
 
\t  <div class="container-fluid four"><h1 style="color:#fff;">Four</h1></div> 
 
\t \t <div class="container-fluid five"><h1 style="color:#fff;">Five</h1></div> 
 
\t \t  <div class="container-fluid six"><h1 style="color:#fff;">Six</h1></div> 
 
\t \t \t <div class="container-fluid seven"><h1 style="color:#fff;">Seven</h1></div>

источник

2016-10-27 Samudrala Ramu

Вам нужна прокрутка параллакса? –

Нет, это не просто анимация с прокруткой Parallax означает, что div перемещается влево и вправо, а его текст перемещается снизу вверх, когда он находится в окне просмотра. –

Как вам удалось ответить ниже, Самудрала? – halfer

Следующий сценарий был протестирован на Google Chrome 54.0.2840.71 для Mac. Прокрутите влево/вправо, чтобы перейти к следующему экрану. Очевидно, вам нужно щелкнуть по кадру с результирующим фреймом, чтобы включить клавиши «влево»/«вправо», в кодефе, для навигации. Что-то вроде этого поможет вам начать?

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

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, но это сложнее.

источник

2016-11-01 14:34:10

Как анимировать анимацию прокрутки, которая идет горизонтально, а содержащий текст перемещается по вертикали?

ответ

Смежные вопросы