0
단일 수직 스크롤 방문 페이지를 만들려고합니다. 내 HTML은 # slide-1, # slide-2 등으로 표시된 div가 # slide-5까지 구성되어 있습니다. 빠른 플러그인과 내가 만든 몇 가지 변형을 통해 페이지를 스크롤 할 때 페이드 인하거나 사라질 때 페이드 아웃 할 수 있습니다. 특정 컨테이너가 보일 때 특정 애니메이션을 처리하는 방법이 있는지 궁금합니다.스크롤 이벤트에서 페이드 인/아웃 요소
여기에 js가 있습니다.
// Fading in the elements, etc.
slides = $('.slide');
slides.children('.section').addClass('hiding');
$('#slide-1').children('.section').addClass('showing');
$('#slide-1').find('.centeredPromoImage').addClass('fadeInUpBig');
$(window).scroll(function(d,h) {
slides.each(function(i) {
a = $(this).position().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) {
$(this).children('.section').removeClass('hiding').addClass('showing');
$(this).find('.polaroid').addClass('fadeInRightBig');
$(this).find('.left').addClass('fadeIn')
$(this).siblings('.slide').children('.section').removeClass('showing').addClass('hiding');
}
var grabID = $(this).attr('id');
console.log(grabID);
});
});
페이지의 간단한 css3 애니메이션에 animate.css를 사용하고 있습니다. scrolldeck.js를 사용하여 몇 가지 문제를 겪었으며 위 또는이 코드의 변형을 사용하여이 문제를 만들려고합니다.
다른 사용자가 grabID를 기록 할 때 개별 슬라이드가 아닌 5 개의 슬라이드를 모두 반환하는 이유를 알기가 쉽지 않은 경우에도 마찬가지입니다.
도움 주셔서 감사합니다.