I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same code to another CodePen: here, it failed to work as expected. As I am not very familiar with jQuery, I would greatly appreciate any assistance.
Below is the JS file intended to detect if an element is in the viewport and then apply an animation to it:
//rewriting using prototype
//no jquery
$(function() {
var $blocks = $('.animBlock.notViewed');
var $window = $(window);
$window.on('scroll', function(e){
$blocks.each(function(i,elem){
if($(this).hasClass('viewed'))
return;
isScrolledIntoView($(this));
});
});
});
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemOffset = 0;
if(elem.data('offset') != undefined) {
elemOffset = elem.data('offset');
}
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if(elemOffset != 0) { // custom offset is updated based on scrolling direction
if(docViewTop - elemTop >= 0) {
// scrolling up from bottom
elemTop = $(elem).offset().top + elemOffset;
} else {
// scrolling down from top
elemBottom = elemTop + $(elem).height() - elemOffset
}
}
if((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
// once an element is visible exchange the classes
$(elem).removeClass('notViewed').addClass('viewed');
var animElemsLeft = $('.animBlock.notViewed').length;
if(animElemsLeft == 0){
// with no animated elements left debind the scroll event
$(window).off('scroll');
}
}
}