Scrolling-Animation auf bestimmten Ort zu einem anderen

Question

Lassen Sie uns sagen, dass ich eine Box haben, und es ist von der richtigen Stelle ausgeglichen durch tranform:translateX(-200px)

Beispiel unten pic hat zwei <section> ‚s, einer der großen grauen Box und andere weiße enthält die .box in rot. Die Abbildung zeigt, wo/wie sich die Animation nur bewegen soll, wenn der Betrachter scrollt und sich .box von -200px zu 0px hin und her bewegt.

$(document).ready(function(){ 
 

 
    $(window).scroll(function(){ 
 

 
    var wScroll = $(this).scrollTop(); 
 
    var greySection = $('.grey').height(); // Which is 800px high 
 
    
 
    // (what other variables, and functions could I add?) 
 
    
 
    if(wScroll > greySection /1.3) // 1.3 of section.grey is where i want the animation to start 
 
     $('.box').css('transform','translateX(' + /* (what do i put here?) */ + 'px)'); 
 
    
 
    }); 
 
    
 
});

.grey{ /* for visual purposes */ 
 
    background-color: grey; 
 
} 
 

 
section { 
 
    width:100%; 
 
    height:800px; 
 
} 
 

 
p{ 
 
    width:100%; 
 
    text-align:center; 
 
} 
 

 
.box{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:red; 
 
    margin:0 auto; /* Here is where the box position should end up */ 
 
    transform:translateX(-200px); /* Control this property to move box */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 
<section class="grey"> 
 
    <p>Some contents here. Ignore this section</p> 
 
</section> 
 

 
<section id="box-holder"> 
 
    <div class="box"></div> 
 
</section>

Wie konnte ich damit der Benutzer die transform Eigenschaft Kontrolle der Box Position zum fertigen Spot -200px-0px nur hin und her mit dem Scrollbar.

Answer 1

Ich werde jetzt aber erstmal ein paar Hinweise prüfen.

Verwenden Sie das Dokument bereit, damit Ihre Variable gespeichert wird und nicht nach jedem Bildlauf.

Sollte die Box nach rechts schieben, direkt in der Mitte oder nur 200px nach rechts? Ich bin ein wenig verwirrt durch die -200px. Hier

Answer 2

Sie gehen
https://jsfiddle.net/DenizTemizer/j6m73qnf/1/

var greySection; 
$(document).ready(function() { 
    greySection = $('.grey').height(); 
    console.log(greySection); 
}); 

$(window).scroll(function() { 
    var wScroll = $(this).scrollTop(); 
    if(!$('.grey').hasClass('animated') && wScroll > (greySection/1.3)) { 
    console.log("animate"); 
    $('.grey').addClass('animated'); 
    $('.box').css({ 
     "-webkit-transform":"translateX(0)", 
     "-ms-transform":"translateX(0)", 
     "transform":"translateX(0)" 
    }); 
    } 
}); 

Zugegeben als neue Antwort, so dass es einfacher ist, zu finden, wenn dieser Thread größer wird.

Answer 3

Ripped diese von Sachen ich arbeite, dann ist es chunked zusammen, Dig in

Die Formel, die Sie wollen, ist so etwas wie:.

(scrollTop-topOffset)/(pageHeight-windowHeight-topOffset)*translateDistance 

Dies ist, wo es in der JavaScript ist:

mem[7] = -(~~(((mem[0]-BoxOffset)/mem[6])*BoxDistance)); 

Dies braucht etwas Arbeit, ich von Null eine Rechtsverschiebung verwendet, um das Ergebnis zu runden, aber es handelt seltsam, wenn ich die Schnipsel lief so dass ich die Doppel verwendet ‚~~‘ und stellen sie dann musste es Negativ '-', um es positiv zu machen, nicht kopieren/einfügen, reparieren/aufräumen meine Chicken Scratch !! XD

INP=0xFFFF; // INPut flags 
 
BoxDistance=200; // box travel distance 
 
mem=[]; // mem array 
 

 

 
JC = function(intv, event){ 
 

 

 
\t L_BOOT:{ 
 

 

 
\t L_TRIPEVENT:{ 
 

 

 
\t if (!event) break L_TRIPEVENT; \t \t // if there is an event 
 

 
\t \t event = event || window.event; \t // for IE 
 
\t \t if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } \t // stop bubble up 
 
\t \t FP= event.target ? event.target : event.srcElement; \t // get it 
 

 
\t if ((INP&=intv)&0x002) break L_TRIPEVENT; \t // if boot is complete 
 

 

 
\t \t INP_Resize:{ 
 

 
\t \t \t // Save the old browser width/height dimentions? if needed ... 
 

 
\t \t if(INP&0x020) break INP_Resize; INP |= 0x020; // INP_Resize = OFF 
 

 
\t \t \t // 
 
\t \t \t // Get the window dimentions 
 
\t \t \t // 
 
\t \t \t mem[2] = (document.body.innerWidth)? document.body.innerWidth : document.body.clientWidth; \t \t // window width 
 
\t \t \t mem[3] = (document.body.innerHeight)? document.body.innerHeight : document.body.clientHeight; \t // window height 
 

 

 
\t \t \t // 
 
\t \t \t // Get the page dimentions 
 
\t \t \t // 
 
\t \t \t mem[4]=document.getElementById('box-holder').offsetWidth; \t \t // section width: 
 
\t \t \t mem[5]=document.getElementById('box-holder').offsetHeight*2; \t \t // section width: (box-holder x 2) both sections are of the same height 
 
\t \t \t BoxOffset=document.getElementById('ThisTrigger').offsetHeight; \t \t // section width: \t \t \t 
 

 

 
\t \t \t mem[6]=mem[5]-mem[3]-BoxOffset; \t // page height - window height = (scroll bottom) 
 

 

 
\t \t }// INP_Resize: 
 

 

 
\t \t INP_Scroll:{ 
 

 
\t \t \t mem[1] = mem[0]; \t \t // Save last scroll location, not really needed ... 
 

 
\t \t if(INP&0x010) break INP_Scroll; INP |= 0x010; // INP_Scroll = OFF 
 

 
\t \t \t mem[0] = ((document.body.scrollTop)? (document.body.scrollTop) : ((document.documentElement.scrollTop)? (document.documentElement.scrollTop):(window.pageYOffset)));// get current scroll location 
 

 
\t \t \t if (BoxOffset<mem[0]) { // get current scroll location 
 

 
\t \t \t \t if (BoxOffset<mem[0]) { 
 

 
\t \t \t \t \t mem[7] = -(~~(((mem[0]-BoxOffset)/mem[6])*BoxDistance)); // right shift 0 times, un-round to a whole number 
 

 
\t \t \t \t \t /* 
 
\t \t \t \t \t mem[0] = scroll top -> DistanceThusFar 
 
\t \t \t \t \t BoxOffset = with the top offfset 
 
\t \t \t \t \t mem[6] = (scroll bottom) -> DistanceCanGo 
 
\t \t \t \t \t BoxDistance = distance 
 

 
\t \t \t \t \t (DistanceThusFar/DistanceCanGo) = (0.???)% 
 
\t \t \t \t \t \t the ratio between how far, and whats left to go 
 
\t \t \t \t \t (0.???) * (BoxDistance) = (???px) 
 
\t \t \t \t \t \t the ratio multiplied by BoxDistance is the distance 
 
\t \t \t \t \t */ 
 

 
\t \t \t \t \t mem[7] = BoxDistance<mem[7] ? BoxDistance : mem[7]; \t // if the number rounded, exceeds BoxDistance, set it to BoxDistance 
 

 
\t \t \t \t }//if (mem[0]>=BoxOffse... 
 

 
\t \t \t } else { 
 

 
\t \t \t \t mem[7]^=mem[7]; // if the number rounded, is greater than 0, when scrollTop is less then trigger height, set it to zero 
 

 
\t \t \t } 
 

 
\t \t \t AX=mem[7]; 
 

 
\t \t \t document.getElementById("meee").setAttribute('style', 'margin-left: '+AX+'px;'); // update box distance 
 

 
\t \t }// INP_Scroll: 
 

 

 
\t }//L_TRIPEVENT: 
 

 
\t if (INP&0x001) break L_BOOT; INP|=0x001; INP&=0xFFD; // L_BOOT = OFF 
 

 
\t \t INP &= 0xFEF; // 1110:1111 <- set this bit off, to trip SCROLL interupt 
 
\t \t INP &= 0xFDF; // 1110:1111 <- set this bit off, to trip SCROLL interupt 
 

 
\t }//L_BOOT: 
 
\t 
 

 
\t \t // 
 
\t \t // Print out memory 
 
\t \t // 
 
\t \t PrintText=''; 
 
\t \t i=0; 
 
\t \t do{ 
 
\t \t \t PrintText += "<br> " + i + " \t " + mem[i]; 
 
\t \t i++; 
 
\t \t }while (i^0x08) 
 
\t \t document.getElementById("JC_TEST_TEXT").innerHTML = PrintText; 
 
\t \t PrintText^=PrintText; 
 

 

 
TIC=setTimeout(JC,100); 
 
}; JC(); 
 

 

 
function JCinterupts(i0,i1,i2,i3){ 
 

 
    if ('addEventListener' in window){ 
 
\t \t window.addEventListener(i0, (function (intv) {return function (event) {JC(intv, event);};})(0xFBF), false); 
 
     window.addEventListener(i1, (function (intv) {return function (event) {JC(intv, event);};})(0xFEF), false); 
 
     window.addEventListener(i2, (function (intv) {return function (event) {JC(intv, event);};})(0xFDF), false); 
 
     window.addEventListener(i3, (function (intv) {return function (event) {JC(intv, event);};})(0xFFE), false); 
 
    } else if ('attachEvent' in window){//IE 
 
     window.attachEvent('on'+i0, (function (intv) {return function (event) {JC(intv, event);};})(0xFBF)); 
 
     window.attachEvent('on'+i1, (function (intv) {return function (event) {JC(intv, event);};})(0xFEF)); 
 
     window.attachEvent('on'+i2, (function (intv) {return function (event) {JC(intv, event);};})(0xFDF)); 
 
     window.attachEvent('on'+i2, (function (intv) {return function (event) {JC(intv, event);};})(0xFFE)); 
 
    } 
 
    
 
} JCinterupts('click','scroll','resize','load');

<!-- 
 

 
░░█████░░░░░░░░░░░░███░░░░░░░░░░░░ 
 
░░░░█░░░░░░░░░░░░░░█░░░░░░░░░█░░░░ 
 
░░░░█░░███░███░███░█░░░███░░░█░███ 
 
░░░░█░░█░█░█░█░█░░░█░░░█░█░███░█░█ JonathanClingan 
 
░░░░█░░█░█░█░█░░░█░█░░░█░█░█░█░█░░ ©JonsCode 
 
░░███░░███░█░█░███░███░███░███░███ 5.24.16 
 

 
    ■ JonWasHere :P 
 

 
--> 
 

 
<HTML /><!-- HTML markup --> 
 
<HEAD /><!-- self closing tags --> 
 

 
    <style> 
 

 
    HTML,BODY { 
 
     margin:0; 
 
     padding:0; 
 
     border:0; 
 
    } 
 
    .grey{ /* for visual purposes */ 
 
     background-color: grey; 
 
    } 
 
    .darkgrey{ /* for visual purposes */ 
 
     background-color: darkgrey; 
 
     height:34px; 
 
    } 
 
    section { 
 
     width:100%; 
 
     height:134px; 
 
    } 
 

 
    p{ 
 
     width:100%; 
 
     text-align:center; 
 
    } 
 
    .box{ 
 
     left:200px; 
 
     width:200px; 
 
     height:200px; 
 
     background-color:red; 
 
     margin:0 auto; 
 
    } 
 
    #JC_TEST_HOLD{ 
 
     position:absolute; 
 
     position:fixed; 
 
     overflow:visible; 
 
     padding:0 10px 0 0; 
 
     color:white; 
 
     z-index:900; 
 
     text-align:left; 
 
    } 
 
    #JC_TEST_BOX{ 
 
     height:100%; 
 
     overflow:auto; 
 
     position:relative; 
 
     margin:0; 
 
     padding:0 15px 0 0; 
 
     color:white; 
 
     background:rgba(0,0,0,0.8); 
 
     text-align:left; 
 
    } 
 
    #JC_TEST_TEXT{ 
 
     text-align:left; 
 
    } 
 

 
    </style> 
 

 
<BODY /><!-- Mhmmm, I like yo' body. ;) --> 
 

 
    <DIV ID="JC_TEST_HOLD" > 
 
    <DIV ID="JC_TEST_BOX" > 
 
     <p id="JC_TEST_TEXT"></p> 
 
    </DIV> 
 
    </DIV> 
 

 
    <section id="ThisBox" class="grey"> 
 
    <div id="ThisTrigger" class="darkgrey"> 
 
     <p>Some contents here. Ignore this section, or pay attention.</p> 
 
    </div> 
 
    </section> 
 

 
    <section id="box-holder"> 
 
    <div id="meee" class="box"></div> 
 
    </section>