ScrollTrigger - лёгкая анимация при прокрутке
827материалов
228тем на форуме
3003комментария
6152пользователя

ScrollTrigger - лёгкая анимация при прокрутке


Описание:

Всем привет, сегодня у нас речь пойдет о скролл. Скролл-эффекты – это тренд, возникший в веб-дизайне несколько лет назад и все еще набирающий обороты. ScrollTrigger - плагин, основанный на jQuery и css, позволяющий создать раскладку для страницы с несколькими секциями при минимальном использовании разметки. В варианте который нам предоставил один из пользователей pages.github.com можно создать не ограниченное количество секций, в которые можно вставить как текст, так и картинки. Код страницы и прилагающие к нему файлы (css и js) очень легки и понятны, так что, если что, сможете отредактировать дизайн секций.

Установка:

Для начала скачиваете архив с нашего сайта и папку scrolltrigger загружаете в свой файловый менеджер.

Теперь создаете страницу динамическую (через редактор страниц) или статическую (в файловым менеджере с расширением html) страницу и вставляете в нее данный код:
Код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ScrollTrigger - лёгкая анимация при прокрутке</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/scrolltrigger/scrolltrigger.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:200,300,500,700" rel="stylesheet">
</head>
<body>
<div class="block">
<h1 data-scroll="toggle(.scaleUpIn, .scaleUpOut) addHeight">WebMaster-uCoz.RU</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">Все для Web-мастера в системе uCoz.</h2>
                   
<svg viewBox="0 0 60 60">
<path d="M52.254 18.327c0.816-0.804 2.127-0.804 2.937 0s0.813 2.103 0 2.907l-23.724 23.49c-0.81 0.804-2.121 0.804-2.937 0l-23.724-23.49c-0.81-0.804-0.81-2.103 0-2.907 0.813-0.804 2.127-0.804 2.937 0l22.257 21.423 22.254-21.423z"></path>
</svg>

</div>
<div class="block">
<h1 data-scroll="toggle(.fromTopIn, .fromTopOut) addHeight">YRAAA.RU</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">Как создать сайт на uCoz, раскрутить его и заработать – ответы вы найдете на нашем портале.</h2>
</div>

<div class="block">
<h1 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">ZORNET.RU</h1>
<h2 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">Сайт по теме как создать сайт uCoz с различными интересными решением по его продвижению в сети, все ответы на ресурсе.</h2>
</div>

<div class="block">
<h1 data-scroll="toggle(.scaleDownIn, .scaleDownOut) addHeight">INTERNETEMPIRE.RU</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">У нас на сайте Вы можете найти и скачать бесплатно, такие материалы для uCoz как: Шаблоны(кино, блог, спорт, игровые, интернет-магазин, софт, музыкальные, для форума и т.д.), Скрипты(меню, слайдеры, формы, окна, профиль, каталоги и т.д.), Информеры. Так же на нашем сайте есть такие разделы - готовые PSD исходники(аватары, баннеры, шапки, логотипы, макеты и т.д.) и раздел CSS Элементы(меню, навигация, кнопки, иконки, таблицы, формы). Еще на нашем форуме, в разделе uCoz, Вам могут помочь разобраться со скриптами и с шаблонами.</h2>
</div>

<div class="block">
<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">WEBO4KA.RU</h1>
<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">
webo4ka.ru - это сайт для веб-мастеров посвященный популярному конструктору под названием uCoz, у нас на сайте вы можете скачать красивые шаблоны для uCoz, эксклюзивные скрипты для uCoz, темы, шаблоны для uCoz, подобрать меню для uCoz, выбрать шапки для uCoz и многое другое для конструктора юкоз.</h2>
</div>

<div class="block">
<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">UGARTS.PRO</h1>
<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">Проект uGarts был основан в 2012 году. Идея uGarts заключается в разработке профессиональных шаблонов и написании скриптов для uCoz-сайтов, а также проект публикует качественные решения для сайтов, собранные с других проектов на ту же тематику.</h2>
</div>

<div class="block">
<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight once">USCRIPT.PRO</h1>
<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight once">У нашей компании за плечами десятилетний опыт работы в интернете и мы знаем свое дело! Все скрипты из нашего каталога разработаны профессионалами и гарантированно будут работать на вашем сайте. Выберите систему управления, которую используете на своем сайте и найдите решение на свой вкус.</h2>
</div>

<div class="block">
<h1>UTEMPLATE.PRO</h1>
<h2>Выберите для своего сайта шаблон, созданный с учетом особенностей системы и гарантированно работоспособный. Мы предлагаем только проверенные шаблоны премиум-класса. Не знаете как установить шаблон на свой сайт? Доверьте это нам!</h2>
</div>

<script>
window.counter = function() {
var span = this.querySelector('span');
var current = parseInt(span.textContent);
span.textContent = current + 1;
};
document.addEventListener('DOMContentLoaded', function(){
ScrollTrigger.init();
});
</script>
<script src="/scrolltrigger/scrolltrigger.js"></script>
</body>
</html>

P.S при создании динамической страница не забудьте добавить код $POWERED_BY$, а то система не даст сохранить шаблон.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 18.09.2016 в 06:00
Материал просмотрен: 2176 раз
Категория материала: Шаблоны для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


SERVODROID-ADM
Блин, либо у меня руки кривые либо я совсем тупой... Хотел сделать у себя на сайте эту функцию чтобы блоки подгружались плавно по мере прокрутки сайта вниз, у меня какраз там такая необходимость... но при установке CSS - все оформление летит ( (сайт servodroid. ru)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта