Эффекты плавного появления элементов 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">код
Должно получиться что-то вроде такого вложения:
Довольно просто. Как это выглядит на практике можете оценить здесь. Покрутите страницу вверх-вниз. Хотите попробовать сами? Подсказки с кодом можете взять здесь.
Между прочим подобное в Adobe Muse делается не менее легко, и без кодирования.)
