바로 적용이 안되는 문제
본문
$(function(){
var rafId = null;
var delay = 200;
var lTime = 0;
function scroll() {
var scrollTop = $(window).scrollTop();
var height = $(window).height()
var visibleTop = scrollTop + height;
$('.reveal').each(function() {
var $t = $(this);
if ($t.hasClass('reveal_visible')) { return; }
var top = $t.offset().top;
if (top <= visibleTop) {
if (top + $t.height() < scrollTop) {
$t.removeClass('reveal_pending').addClass('reveal_visible');
} else {
$t.addClass('reveal_pending');
if (!rafId) requestAnimationFrame(reveal);
}
}
});
}
function reveal() {
rafId = null;
var now = performance.now();
if (now - lTime > delay) {
lTime = now;
var $ts = $('.reveal_pending');
$($ts.get(0)).removeClass('reveal_pending').addClass('reveal_visible');
}
if ($('.reveal_pending').length >= 1) rafId = requestAnimationFrame(reveal);
}
$(scroll);
$(window).scroll(scroll);/*
$(window).click(function() {
$('.reveal').removeClass('reveal_visible').removeClass('reveal_pending');
lTime = performance.now() + 500;
var top = $(window).scrollTop();
$(window).scrollTop(top === 0 ? 1 : top-1);
});*/
});
해당 소스를 넣어서
효과를 얻었는데..
왜 바로 화면이 로딩되자마자 안되고
스크롤을 조금이라도 내려야 반응합니다.
코드펜에서는 괜찮은데 제 사이트가 이상한건가요...?
답변 3
코드팬에서는 괜찮았다면
그 자바스크립 위에 어떤 자바스크립트와 충돌하기 때문일겁니다.
크롬으로 콘솔에서 오류가 있는지 확인해보세요
<code>
var slider = $('.board-slider ul').bxSlider({
// mode: 'fade',
auto: true,
useCSS: false,
adaptivewidth: true,
preventDefaultSwipeX: true,
controls: false ,
stopAutoOnClick: true,
autoDelay: '6000',
pause: 6000,
pager: false,
onSlideAfter: function(){
var current = slider.getCurrentSlide();
var slideQty = slider.getSlideCount();
$('span.numerhere').html(current+1);
$('span.totalnumer').html(slideQty);
},
});
var slideeQQ = slider.getSlideCount();
$('span.ltest').html(slideeQQ);
</code>
bx슬라이더에 번호로 표기하기 위해서 저런 코드를 썻는데 저기서 문제가 있네요..
코드한번 봐주실 수 있을까요 ㅜ
requestAnimationFrame() 함수에서 딜레이를 주는 것 같은데 이 부분을 찾아보세요,
