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

Question

[Nikita Titov]

Крутишь сайт вниз и текст появляется плавно.
Подскажите пожалуйста как сделать или может есть готовый js?

Answer 1

[lnked]

Вот плагин

;(function ( $, window, document ) {
	"use strict";

	var viewport = 0,
    	wheight = $(window).height(),
    	scrollTop;

    $.fn.viewport = function ( options ) {
        options = $.extend( {}, $.fn.viewport.options, options );

        $.fn.viewport.options.items = this;

        if (!$.fn.viewport.options.elements.length)
		{
			$.fn.viewport.calculate();
		}

		if ($.fn.viewport.options.elements.length)
		{
			$.fn.viewport.animate();
	    }

	    $(window).scroll(function(){
			$.fn.viewport.animate();
		});

	    $(window).resize(function(){
			$.fn.viewport.calculate();
		});
    };

    $.fn.viewport.options = {
        items: {},
        elements: {}
    };

	$.fn.viewport.calculate = function() {
		$.fn.viewport.options.elements = $.fn.viewport.options.items.map(function(){
			if ($(this).length) {
				return $(this);
			}
        });
	}

    $.fn.viewport.animate = function() {
		scrollTop = $(window).scrollTop();

		$.fn.viewport.options.elements.map(function(){
			viewport = scrollTop + wheight;

	        if ($(this).offset().top <= viewport && !$(this).hasClass('active'))
	        {
	        	$(this).addClass('active');
	        }
	    });
	}

})( jQuery, window, document );

Запуск плагина
$('.fade-in').viewport();

Пример разметки

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

Css

.fade-in {
	opacity: 0;
	transform: scale(0) rotate(-40deg);
	transition: opacity 0.7s, transform 0.5s;
}

.fade-in.active {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

Answer 2

[Андрей Федоров]

Не много не понял какого эффекта вы хотите добиться, но посмотрите (html + css)
Пример

Comments

[Nikita Titov]

Это не то, но всё равно спасибо, отличная штука.

Answer 3

[Денис Акулов]

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