Эффекты плавного появления элементов web-сайта.

Всем привет.

Вы наверное заметили красивую тенденцию на продающих web-сайтах одностраничниках, когда многие текстовые блоки плавно появляются при скроллинге web-страницы по вертикали. И это очень привлекает наше внимание. Оказывается это легко сделать с помощью того же jQuery. Я ничего не придумал, просто глянул урок от Сергея Немцева. 

А что там? Да все просто.

В своей странице вставляем вызов скриптов перед закрывающим тегом body.

Важно - проверяем не подключен ли у нас уже jquery! В этом случае первую строку можно опустить:

script src="js/jquery-1.9.1.js"

script src="js/scripts.js"

script src="js/jquery-ui.js"

script src="js/jquery.leanModal.min.js"

Добавляем два стиля в style.css:

.hidden_area {opacity: 0;}

и

.anim {transition: all 0.6s ease; opacity: 0.01;}

А теперь работаем непосредственно по тексту нашей web-страницы.

Для добавления эффекта плавного появления элемента:

1. сразу после  body ставим <div id="amount"></div>
2. а нужный элемент охватываем классом area <div class="area">код</div>.

Для добавления эффекта выскакивания элемента:

1. сам элемент охватываем классом anim < div class="anim">код</div>
2. а div-ные блоки охватываем классами effect и wrap scroll-animate.

Должно получиться что-то вроде такого вложения:

<div class="effect">

<div class="wrap scroll-animate">

<div class="anim"></div>

</div></div>

Довольно просто. Как это выглядит на практике можете оценить здесь. Покрутите страницу вверх-вниз. Хотите попробовать сами? Подсказки с кодом можете взять здесь.

Между прочим подобное в Adobe Muse делается не менее легко, и без кодирования.)