А АTuesday, 25 November 2014

Эффекты плавного появления элементов 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 делается не менее легко, и без кодирования.)


1 comment:

Anonymous said...

Главный глюк - скрипт не успевает подгрузиться до прокрутки страницы(.

Post a Comment

А что вы думаете по этому поводу?

Версия на печать

Популярное

Медиа облако