Постепенное появление блоков при скроллинге

Даем элементу класс - appear-element.

HTML

<div class="container-004__items-itm appear-element">
	КОНТЕНТ
</div>

В CSS прописываем классы appear-element и visible.

CSS

.appear-element {
	opacity: 0;
	transition: 1s;}
.visible {
	opacity: 1!important;
	transition: 1s;}

Первый вариант JS кода

JQuery

$(window).scroll( function(){
    $('.appear-element').each( function(i){
        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window > bottom_of_object ){
            $(this).addClass('visible');}
		if( bottom_of_window < bottom_of_object ){
            $(this).removeClass('visible');}
    }); 
});

Второй вариант JS кода

JQuery

function scrollTracking(){
	$('.appear-element').each( function(i){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $(this).offset().top;
	var eh = $(this).outerHeight();
 
	if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
		$(this).addClass('visible');
	} else {
		$(this).removeClass('visible');
	}
	}); 
}
 
$(window).scroll(function(){
	scrollTracking();
});
	
$(document).ready(function(){ 
	scrollTracking();
});

Третий вариант JS кода

JQuery

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.appear-element').each(function() {
var self = $(this),
height = self.offset().top + self.height();

if ($(document).scrollTop() + windowHeight >= height) {
self.addClass('visible');
}

if ($(document).scrollTop() + windowHeight < height + 30) {
self.removeClass('visible');
}

if ($(document).scrollTop() + 130 >= height) {
self.removeClass('visible');
}

});
});
});

Внимание! Ко всем вариантам может понадобится код, который будет отвечать за появление блоков попавших в видимость экрана при загрузке страницы.

Код

$(document).ready(function(){ 
	scrollTracking();
});

function scrollTracking(){
	$('.appear-element').each( function(i){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $(this).offset().top;
	var eh = $(this).outerHeight();
 
	if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
		$(this).addClass('visible');
	} else {
		$(this).removeClass('visible');
	}
	}); 
}