Line 170: | Line 170: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="pagecontainer"> | ||
+ | <section class="small"> | ||
+ | <div class="box reveal"><img src="https://static.igem.org/mediawiki/2018/b/b8/T--CCU_Taiwan--CCUABbB2.jpg" width="100%" hieght="100%"></div> | ||
+ | <div class="box reveal"></div> | ||
+ | <div class="box reveal"></div> | ||
+ | <div class="box reveal"></div> | ||
+ | </section> | ||
</div> | </div> | ||
Line 205: | Line 214: | ||
popup.classList.toggle("show"); | popup.classList.toggle("show"); | ||
} | } | ||
+ | |||
+ | var rafId = null; | ||
+ | var delay = 400; | ||
+ | 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); | ||
+ | }); | ||
+ | |||
+ | |||
Revision as of 22:29, 17 October 2018