Скролл-эффекты CSS3 и JQuery при прокрутке страницы
Популярная штука для landing page.
Очень хорошее объяснение скролл-эффектов, библиотека scrolly - http://html5.by/blog/scroll-effects/
Видео доступным языком - https://www.youtube.com/watch?v=2McxMXqHHjg
Ещё объяснение. Появление элементов сайта с CSS3 эффектами
http://webcomplex.com.ua/css/poyavlenie-elementov-sajta-s-css3-effektami.html
Библиотечка полезная - http://daneden.github.io/animate.css/
Библиотечка полезная - http://daneden.github.io/animate.css/
Ещё. Красивая анимация появления объектов на CSS3. Бесплатно
http://blog.n1dev.ru/html-i-css/krasivaya-animaciya-poyavleniya-obektov-na-css3-besplatno/
Примерчик 1. При прокрутке страницы вниз на 200px появлялся новый элемент с идентификатором hid.
<style type="text/css">
body{
min-height: 1500px;
}
#blfix{
display:none;
position:fixed;
top:0;
background-color: red;
width: 100%;
padding: 20px;
}
</style>
<div id="content">Пример теста</div>
<div id="blfix">Наш блок</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
var element = f('#blfix');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
});
});
</script>
Примерчик 2. Горизонтальный скролл с эффектом параллакс.
jQuery плагин «jInvertScroll» — для реализации горизонтальной прокрутки страницы на вашем сайте с эффектом параллакс.
Источник: loco.ru
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
Другие статьи по этой теме:
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Выравнивание изображения по центру в Bootstrap (11.12.2016)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Как сделать какую-либо область на сайте кликабельной ссылкой? (11.08.2015)
- Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками (11.07.2015)
- Разделитель тысяч в эффекте наматываемого счётчика jquery countTo (05.04.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015) ← вы тут
- Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation) (20.08.2015)
- Несколько функций в body onload (08.03.2013)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery (08.12.2012)
- Team Sense: Многопользовательский календарь, заменяем радиокнопки на чекбоксы в выборе преподавателей. Массивы в Javascript. (06.12.2012)
- Team Sense: В календарь-расписание уроков добавлено разделение по преподавателям, которым присвоены свои цвета. (04.12.2012)
- CodeIgniter не передаёт $this->uri->segment(3) в функцию контроллера (передача переменной PHP->JavaScript->PHP) (28.11.2012)
- Случаи возникновения ошибки в IE: "Предполагается наличие идентификатора, строки или числа" (Expected identifier, string...) (23.11.2012)
Комментарии (0)
Подпишитесь на 
RSS комментариев к этой статье.
RSS комментариев к этой статье.
