Как сделать плавное появление блоков на сайте?

Question

[test-cats]

Как реализовать плавное появление контента на сайте при прокрутке вниз? Как на портале https://tproger.ru/

Подскажите как такое реализуется на сайте желательно без использования jquery.

Всем спасибо за ответы

Comments

[FeST1VaL]

Берете и делаете.
1. Всем вешаете одинаковый класс, им даете opacity: 0;
2. Далее определяете где скролл, если скролл прошел точку появления блока, то начинаем медленно показывать блок меняя на opacity: 1;

Answer 1

[Маркус Кейн]

lazy loading, это так называется, в сети куча примеров по запросу гугла

Comments

[test-cats]

суть вопроса была в том как наложить подобную анимацию. Я если сделаю ленивую загрузку, то блок или картинка так плавно появляться не будут

[Антон]

test-cats, У большинства lazy плагинов есть выбор эффекта и его длительность

$(".lazy").Lazy({
			 beforeLoad: function(element) {
				  $(element).addClass('loader');
			 },
			 afterLoad: function(element) {
				 $(element).removeClass('loader');
			 },
			 threshold: 1000,
          effect: "fadeIn",
          effectTime: 2000,			 
		});

Не нравится стандарт - есть события, при наступлении тех или иных событий напишите свою css анимацию

[alex-1917]

test-cats, будут.