Webice.Ru - социальная сеть для блоггеров

«    Ноябрь 2020    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
Webice.Ru - социальная сеть для блоггеров » Разработка » Креативный скролл основаный на CSS анимации
 

 Креативный скролл основаный на CSS анимации


Сейчас в моде cайты со скроллом на основе CSS анимации, которые реагируют на то, как далеко пользователь прокрутил страницу.
Скролл на основе CSS Animation
В первую очередь, нам нужен jQuery плагин под названием Skrollr. Как только плагин на месте, мы переходим к использованию HTML5 дата атрибутов для встраивания данных в зависимости от количества пикселей, которые пользователь прокрутил вниз страницы. Для анимации мы просто переходим к CSS свойствам, так что на 0 px у нас может быть top: -30%, и на 2000px мы установим top: 50%. Такое действие передвинет объект от верхней точки в центр страницы на расстоянии в 2000 пикселей.



Также webice рекомендует:
    Полностью анимированное меню на Javascript
    С помощью небольшого плагина мы создадим анимированное меню, которое будет занимать весь экран и будет находится вверху страницы (то есть не будет занимать место на самой странице, а лишь в 45 пикселе ...

    Работа с цветом фона в JavaScript фреймворке анимации GX
    Вторая часть серии статей, посвященная javascript фреймворку анимации GX, рассказывает о том, как динамически менять одновременно свойства размеров и цвета фона блока div. Статья будет полезна ...

    Эффекты прокрутки страницы
    Представляю Вашему вниманию экспериментальные эффекты прокрутки страницы (scroll effects), которые очень легко применить к любой странице сайта.В этой статье я собрал воедино несколько простых скролл- ...

Читать далее
+1
Просмотров: 591 Обсудили: 0
Метки: CSS
Информация
Гости не могут оставлять комментарии в данной новости, зарегистрируйтесь или авторизуйтесь на сайте.
 
Логин:
Пароль:

Добро пожаловать!

Вы вошли как гость, рекомендуем Вам авторизироваться либо пройти процесс регистрации. Если Вы забыли пароль, то Вы можете его восстановить.
Полезные инструменты