테스트 사이트 - 개발 중인 베타 버전입니다

바로 적용이 안되는 문제 채택완료

디자인오늘 7년 전 조회 2,598

$(function(){

    

    

var rafId = null;

var delay = 200;

var lTime = 0;</p>

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

}</p>

<p>$(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);

});*/

    

      });</p>

<p> </p>

<p>

 

해당 소스를 넣어서 

효과를 얻었는데..

왜 바로 화면이 로딩되자마자 안되고

스크롤을 조금이라도 내려야 반응합니다.

코드펜에서는 괜찮은데 제 사이트가 이상한건가요...?

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
7년 전

코드팬에서는 괜찮았다면

그 자바스크립 위에 어떤 자바스크립트와 충돌하기 때문일겁니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

잉끼s
7년 전

requestAnimationFrame() 함수에서 딜레이를 주는 것 같은데 이 부분을 찾아보세요,

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

크롬으로 콘솔에서 오류가 있는지 확인해보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

디자인오늘
7년 전
<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슬라이더에 번호로 표기하기 위해서 저런 코드를 썻는데 저기서 문제가 있네요..
코드한번 봐주실 수 있을까요 ㅜ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인