RSS-подписка

RSS-лента

Новые статьи

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


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Скролл-эффекты CSS3 и JQuery при прокрутке страницы

Скролл-эффекты CSS3 и JQuery при прокрутке страницы Популярная штука для landing page.

Очень хорошее объяснение скролл-эффектов, библиотека scrolly - http://html5.by/blog/scroll-effects/ 
Видео доступным языком - https://www.youtube.com/watch?v=2McxMXqHHjg

 

Ещё объяснение. Появление элементов сайта с CSS3 эффектами

 

Ещё. Красивая анимация появления объектов на 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)     Подпишитесь на RSS комментариев к этой статье.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.