Анимированная шапка для лендинга

Анимированная шапка

Продолжая статьи на тему интерактива на продающей странице, сегодня я хочу показать как создать анимированную шапку на лендинге. Эффект смотрится очень скромно и красиво.

Эффект Вы можете увидеть при прокрутке страницы вверх или вниз. Когда Вы прокручиваете страницу вниз - фоновое изображения становится размытым и текст в шапке "спускается" немного вниз. Также анимация происходит в обратном направлении, если Вы прокручиваете страницу в обратном направлении.

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

		Это интересно Это интересно 0 0	Как всё будет выглядеть в блоге: Анимированная шапка для лендинга Продолжая статьи на тему интерактива на продающей странице, сегодня я хочу показать как создать анимированную шапку на лендинге Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/gruppa-dlya-nachinayuschih-bloggerov/8778559/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Анимированная шапка для лендинга </a> <div class="insert-intro" style="font-family:trebuchet MS;"> Продолжая статьи на тему интерактива на продающей странице, сегодня я хочу показать как создать анимированную шапку на лендинге </div> </div> Анимированная шапка для лендинга <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/gruppa-dlya-nachinayuschih-bloggerov/8778559/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Анимированная шапка для лендинга</a> <div style="font-family:trebuchet MS;"> Продолжая статьи на тему интерактива на продающей странице, сегодня я хочу показать как создать анимированную шапку на лендинге </div> </div>

Юрий Немец

22.07.2015

В избранное Пожаловаться Просмотров: 239

Следить

Комментарии ⁰

Группа для начинающих блоггеров 9139

Важные темы:

Последние откомментированные темы:

Анимированная шапка для лендинга

Комментарии временно отключены

Открытая группа
1480 участников