Дата и время публикации : 21 Июля 16 в 15:43 | Раздел : Шаблоны для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 21 Июля 16, Четверг, 15:43 |
| Размер файла | 2.6 Kb |
| Адапт. дизайн | |
| Обновления | Не производились |
| Просмотрен | 1018 |
| Загружен | 8 |
Всем привет, сегодня у нас речь пойдет о скролл. Скролл-эффекты – это тренд, возникший в веб-дизайне несколько лет назад и все еще набирающий обороты. ScrollTrigger - плагин, основанный на jQuery и css, позволяющий создать раскладку для страницы с несколькими секциями при минимальном использовании разметки.
В варианте этом можно создать не ограниченное количество секций, в которые можно вставить как текст, так и картинки. Код страницы и прилагающие к нему файлы (css и js) очень легки и понятны, так что, если что, сможете отредактировать дизайн секций.
Установка:
1. Для начала скачиваете архив с нашего сайта и папку scrolltrigger загружаете в свой файловый менеджер.
2. Теперь создаете страницу динамическую (через редактор страниц) или статическую (в файловым менеджере с расширением 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>
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияАнимация появления страницы нужна чтобы создать хороший эффект загрузки для вашего сайта. Для использования анимации нам не пригодиться JavaScript....
