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

25.11.2014

Промышленно-торговый холдинг "Сигма"
В основу производства положена уникальная российская технология фирмы "Систром", позволяющия изготавливать различные облицовочные, тротуарные изделия, элементы декора, камины и памятники.
Адрес и телефон

Всем привет.

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

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

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

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

script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/jquery-1.9.1.js"

script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/scripts.js"

script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/jquery-ui.js"

script src="http://www.78blog.ru/cgi-bin/click.cgi?go=js/jquery.leanModal.min.js"

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

.hidden_area {opacity: 0;}

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

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

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

сразу после body ставим
а нужный элемент охватываем классом area
код
.

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

сам элемент охватываем классом anim < div class="anim">код

а div-ные блоки охватываем классами effect и wrap scroll-animate.

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

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

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

пн	вт	ср	чт	пт	сб	вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

Самые интересные записи

РЎР°РјС‹Рµ РёРЅС‚РµСЂРµСЃРЅС‹Рµ Р·Р°РїРёСЃРё