Zeigen Sie eine Reihe von Bildern auf Bildlauf

Question

Die nächste Lösung, die ich gefunden habe, ist Show div on scrollDown after 800px.

Ich lerne HTML, CSS und JS, und ich beschloss, ein digitales Daumenkino zu machen: eine einfache Animation, die auf dem Bildlauf des Benutzers abgespielt werden würde (dh Bild für Bild laden).

Ich dachte, ich würde alle Bilder zum HTML hinzufügen und dann CSS verwenden, um sie an der gleichen Position zu "stapeln", dann JS oder jQuery verwenden, um an verschiedenen Stellen im Bild zu blättern (dh ansteigend) Pixelabstände vom oberen Rand der Seite).

Leider kann ich das Verhalten, das ich suche, nicht erzeugen.

HTML (nur alle Bilder der Animation):

<img class="frame" id="frame0" src="images/hand.jpg"> 
<img class="frame" id="frame1" src="images/frame_0_delay-0.13s.gif"> 

CSS:

body { 
     height: 10000px; 
} 
.frame { 
    display: block; 
    position: fixed; 
    top: 0px; 
    z-index: 1; 
    transition: all 1s; 
} 
#hand0 { 
    padding: 55px 155px 55px 155px; 
    background-color: white; 
} 
.frameHide { 
    opacity: 0; 
    left: -100%; 
} 
.frameShow { 
    opacity: 1; 
    left: 0; 
} 

JS:

frame0 = document.getElementById("frame0"); 

var myScrollFunc = function() { 
    var y = window.scrollY; 
    if (y >= 800) { 
    frame0.className = "frameShow" 
    } else { 
    frame0.className = "frameHide" 
    } 
}; 

window.addEventListener("scroll", myScrollFunc); 
}; 

Answer 1

Einer Ihrer größeren Probleme ist, dass frame0.className = "frameShow" entfernt Einstellung Ihre ursprüngliche Klasse frame, die eine Reihe von Eigenschaften entfernen wird es. Um dies zumindest auf einfache Weise zu beheben, können wir frame0.className = "frame frameShow" usw. machen. Ein weiteres Problem ist, dass frame0 hinter frame1 gerendert wird, was auf verschiedene Arten behoben werden kann. dh. Putting frame0 ‚s <img>nachframe1 oder Einstellung frame0‘ s CSS ein z-index:2; zu haben, und dann Einstellung frame0 ‚s Klasse class="frame frameHide", damit es nicht zeigen, bis zu beginnen. Ich habe auch den Rand und das Padding aus dem Körper mit CSS entfernt, da es die Position der Bilder stört. Ich habe Ihren Code so funktionieren lassen, wie ich es verstanden habe. Hier ist ein JSFiddle.

Answer 2

Es hängt von Ihrem Fall, zum Beispiel in diesem jsFiddle 1 Ich zeige den nächsten (oder vorherigen) Rahmen je nach dem Wert der vertikalen Scroll volle Fenster.

Also für meinen Fall ist der Code:

var jQ = $.noConflict(), 
    frames = jQ('.frame'), 
    win = jQ(window), 

// this is very important to be calculated correctly in order to get it work right 
// the idea here is to calculate the available amount of scrolling space until the 
// scrollbar hits the bottom of the window, and then divide it by number of frames 
    steps = Math.floor((jQ(document).height() - win.height())/frames.length), 

// start the index by 1 since the first frame is already shown 
    index = 1; 

win.on('scroll', function() { 

    // on scroll, if the scroll value equal or more than a certain number, fade the 
    // corresponding frame in, then increase index by one. 
    if (win.scrollTop() >= index * steps) { 
    jQ(frames[index]).animate({'opacity': 1}, 50); 
    index++; 

    } else { 

    // else if it's less, hide the relative frame then decrease the index by one 
    // thus it will work whether the user scrolls up or down 
    jQ(frames[index]).animate({'opacity': 0}, 50); 
    index--; 
    } 
}); 

---

Update:

ein anderes Szenario betrachtet, wo wir den Rahmen in einem Scroll-able div haben, dann wickeln wir die .frame Bilder in einem anderen div .inner.

jsFiddle 2

var jQ = $.noConflict(), 
    cont = jQ('#frames-container'), 
    inner = jQ('#inner-div'), 
    frames = jQ('.frame'), 
    frameHeight = jQ('#frame1').height(), 
    frameWidth = jQ('#frame1').width() + 20, // we add 20px because of the horizontal scroll 
    index = 0; 

// set the height of the outer container div to be same as 1 frame height 
// and the inner div height to be the sum of all frames height, also we 
// add some pixels just for safety, 20px here 
cont.css({'height': frameHeight, 'width': frameWidth}); 
inner.css({'height': frameHeight * frames.length + 20}); 

cont.on('scroll', function() { 
    var space = index * frameHeight; 
    if (cont.scrollTop() >= space) { 
    jQ(frames[index]).animate({'opacity': 1}, 0); 
    index++; 
    } else { 
    jQ(frames[index]).animate({'opacity': 0}, 0); 
    index--; 
    } 
}); 

---

** Bitte beachten Sie, dass alle Frames in beiden Fällen gleiche Höhe aufweisen müssen.