Движение изображения при прокрутке с помощью jquery

Question

Может кто-нибудь предложить учебник/ресурс или привести пример основного движения изображения с помощью jquery. Я искал несколько недель через Google и пробовал различные учебные пособия и шаблоны, и мне трудно найти пример того, что, по моему мнению, было бы простой анимацией.

Я пытаюсь выяснить, как создать эффект, когда вы прокручиваете страницу вниз, небольшое изображение перемещается из точки A в точку B. Движение может быть диагональным, горизонтальным, вертикальным и т. Д. Я просто хочу указать начальную позицию и конечную позицию, а также прокрутить начало и конец, чтобы добраться до этого пункта назначения.

Идея состоит в том, что я собираюсь взять несколько изображений CAD-каркаса и выполнить прорезиненный эффект сборки/повторной сборки. По мере прокрутки вниз узел САПР взрывается. Когда вы прокручиваете резервную копию, процесс меняет направление, и сборка собирается.

Answer 1

$(function() { 
 
    
 
    var animationData = [ 
 
    { 
 
     id: "section1", 
 
     startX: 100, 
 
     startY: 50, 
 
     deltaX: +20, 
 
     deltaY: -5, 
 
    }, 
 
    { 
 
     id: "section2", 
 
     startX: 75, 
 
     startY: 50, 
 
     deltaX: -20, 
 
     deltaY: -5, 
 
    }, 
 
    { 
 
     id: "section3", 
 
     startX: 50, 
 
     startY: 75, 
 
     deltaX: -40, 
 
     deltaY: +15, 
 
    }, 
 
    { 
 
     id: "section4", 
 
     startX: 75, 
 
     startY: 75, 
 
     deltaX: +30, 
 
     deltaY: +35, 
 
    }, 
 
    ]; 
 
    
 
    // scrollTop() will be in the range of 0 to scrollMax 
 
    var scrollMax = $("#content").height() - $("#scrollarea").height();  
 
    var scrollArea$ = $("#scrollarea"); // cache ref for efficiency 
 
    
 
    // position objects and show 
 
    $("#section1").offset({ top: animationData[0].startY, left: animationData[0].startX}); 
 
    $("#section2").offset({ top: animationData[1].startY, left: animationData[1].startX}); 
 
    $("#section3").offset({ top: animationData[2].startY, left: animationData[2].startX}); 
 
    $("#section4").offset({ top: animationData[3].startY, left: animationData[3].startX});  
 
    $(".section").show(); 
 
    
 
    scrollArea$.scroll(function(){ 
 
     
 
     var scrollPerc = scrollArea$.scrollTop()/scrollMax; // 0.0 to 1.0 
 
     
 
     var sec1Left = animationData[0].startX + (animationData[0].deltaX * scrollPerc); 
 
     var sec1Top = animationData[0].startY + (animationData[0].deltaY * scrollPerc); 
 
     var sec2Left = animationData[1].startX + (animationData[1].deltaX * scrollPerc); 
 
     var sec2Top = animationData[1].startY + (animationData[1].deltaY * scrollPerc); 
 
     var sec3Left = animationData[2].startX + (animationData[2].deltaX * scrollPerc); 
 
     var sec3Top = animationData[2].startY + (animationData[2].deltaY * scrollPerc); 
 
     var sec4Left = animationData[3].startX + (animationData[3].deltaX * scrollPerc); 
 
     var sec4Top = animationData[3].startY + (animationData[3].deltaY * scrollPerc); 
 
     
 
     $("#section1").offset({ top: sec1Top, left: sec1Left}); 
 
     $("#section2").offset({ top: sec2Top, left: sec2Left}); 
 
     $("#section3").offset({ top: sec3Top, left: sec3Left}); 
 
     $("#section4").offset({ top: sec4Top, left: sec4Left}); 
 

 
    }); 
 
});

.section { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    display: none; 
 
} 
 

 
#section1 { 
 
    background-color: red; 
 
} 
 

 
#section2 { 
 
    background-color: blue; 
 
} 
 

 
#section3 { 
 
    background-color: yellow; 
 
} 
 

 
#section4 { 
 
    background-color: green; 
 
} 
 

 
#content { 
 
    width: 100%; 
 
    height: 300px; 
 

 
} 
 

 
#scrollarea { 
 
    overflow-y: scroll; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="scrollarea"> 
 
    <div id="content"> 
 
    <div id="section1" class="section"></div> 
 
    <div id="section2" class="section"></div> 
 
    <div id="section3" class="section"></div> 
 
    <div id="section4" class="section"></div> 
 
    </div> 
 
</div>

Answer 2

Существует базовая W3School учебник без JQuery:

https://www.w3schools.com/howto/howto_css_parallax.asp

---

Использование JQuery:

http://www.youon.it/parallax-scroll-in-css-jquery-tutorial-delleffetto-in-parallasse/

http://devfloat.net/jquery-parallax-scrolling-tutorials/

Редактировать

http://stephen.band/jparallax/