スクロールで一連の画像を表示

Question

私が見つけた最も近い解決策はShow div on scrollDown after 800pxです。

私はHTML、CSS、JSを学びました。ユーザーのスクロールで再生する（つまり、フレームの後にフレームを読み込む）簡単なアニメーションであるデジタルフリップブックの作成を試みました。

私はすべての画像をHTMLに追加し、CSSを使って同じ位置に「スタック」し、次にJSまたはjQueryを使用して、スクロールの異なるポイントで次のものにフェードインしますページの上部からのピクセル距離）。

残念ながら、私は、私が探している振る舞いを作り出すことはできません。

HTML（アニメーションのちょうどすべてのフレーム）：

<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

一つはframe0.className = "frameShow"削除しを設定していることですあなたの初期クラスframeは、多くのプロパティを削除しますes。これを解決するには、少なくとも簡単な方法で、frame0.className = "frame frameShow"などを実行できます。もう1つの問題は、frame0がframe1の後ろにレンダリングされ、さまざまな方法で修正される可能性があることです。すなわち、置くframe0z-index:2;を持っているのCSSの<img>frame1後、またはframe0の設定 '、その後、それがそもそも表示されませんclass="frame frameHide"にframe0のクラスを設定します。私はまた、画像の位置を乱すので、CSSを使ってマージンとパディングをボディから削除しました。あなたのコードが私が望んでいると理解している通りに作ったのですが、これはJSFiddleです。

Answer 2

これはあなたの場合によって異なります。jsFiddle 1私は、垂直スクロールフルウィンドウの値に応じて、次の（または前の）フレームを表示しています。

だから私の場合のためのコードは次のとおりです。

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

---

更新：

たちは、スクロール可能なdivの内側のフレームを持っている別のシナリオを考えると、我々はラップ.frame他の部門の画像.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--; 
    } 
}); 

---

どちらの場合も、すべてのフレームが同じ高さを持っている必要があることに注意してくださいしてください。