Автор

24 06.2017
Эффекты прокрутки страницы

Эффекты прокрутки страницы


Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.

 

ДЕМО
ИСХОДНИКИ

 

Мы собрали некоторые причудливые эффекты, которые происходят, когда пользователь просматривает разделы веб-страницы. Некоторые из эффектов довольно экстремальные, но они могут оказаться очень полезными, если ваша цель - создать впечатляющий пользовательский интерфейс.

Все анимации были созданы с помощью Velocity.js.

Обратите внимание

Эти эффекты не видны на небольших устройствах, где пользователь может просто прокручивать список разделов. Мы тестировали эффекты на мобильных устройствах, а производительность была плохой, поэтому мы решили ограничить их более крупными и мощными устройствами.

 

Как это работает

Чтобы применить анимацию или включить / отключить захват прокрутки, просто используйте типы data-animation и data-hijacking, применяемые к <body>. Значения, поддерживаемые data-animation, не имеют / scaleDown / rotate / gallery / catch / opacity / fixed / parallax. Хотя data-hijacking может быть включен или выключен.

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="off" data-animation="none">

 

Создание структуры

Структура HTML представляет собой список элементов <section>, а также навигацию. Мы помещаем только заголовок внутри каждого раздела. При выбранной анимации Fixed или Parallax мы также устанавливаем фоновое изображение. Не стесняйтесь добавлять свой контент внутри каждого раздела> div.

<section class="cd-section visible">
<div>
<h2>Page Scroll Effects</h2>
</div>
</section>

<section class="cd-section">
<div>
<h2>Section 2</h2>
</div>
</section>

<section class="cd-section">
<!-- ... -->
</section>

<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav> <!-- .cd-vertical-nav -->

 

Добавление стиля

Все преобразования были созданы в jQuery с использованием Velocity.js, поэтому объяснять CSS нет ни какого смысла. Мы просто устанавливаем высоту, равную 100vh для каждого <section>, чтобы полностью покрывать область просмотра, плюс мы устанавливаем цвета фона и изображения, используя: селектора :nth-of-type() и типы данных.

.cd-section {
  height: 100vh;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}

 

Обработка событий

Мы использовали два разных подхода в зависимости от того, выключен или отключен захват данных.

Когда data-hijacking = off, каждый раздел анимируется в соответствии с его положением относительно окна просмотра. Например, для анимации scaleDown мы изменяем значения opacity, scale, translateY и boxShadowBlur раздела> div-элементов:

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
	windowHeight = $(window).height();
 
if( offset >= -windowHeight && offset <= 0 ) {
	// section entering the viewport
	translateY = (-offset)*100/windowHeight;
    scale = 1;
	opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
	//section leaving the viewport 
    scale = (1 - ( offset * 0.3/windowHeight));
	opacity = ( 1 - ( offset/windowHeight) );
	translateY = 0;
	boxShadowBlur = 40*(offset/windowHeight);
}

Когда data-hijacking = on, мы определяем пользовательские эффекты для каждой анимации, используя функцию регистрации Velocity UI Pack. Например, для эффекта масштабирования (анимация scaleDown) мы использовали:

$.Velocity
    .RegisterEffect("scaleDown", {
    	defaultDuration: 800,
        calls: [ 
            [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
        ]
    });

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

27 10.2017
Эффекты прокрутки страницы

Скругленный навигационный триггер, который растягивается при нажатии / нажатии, чтобы открыть навигационные элементы.


10 06.2013
Эффекты прокрутки страницы

Порой для при манипуляции каких-нибудь действий на сайте требуется вывод сообщений различного рода, например о возникшей ошибке, или удачном выполнении определенного действия пользователем. Данные информационные сообщения отыгрывают весомую роль в деятельности посетителя, так как несут информационную роль когда пользователь выполняет важную информацию. В данном уроке мы рассмотрим как создать сообщения для пользователя с использованием CSS3 и jQuery. Идея заключается в том, что при выполнении определенного действия..


16 05.2013
Эффекты прокрутки страницы

Хорошая навигация на сайте является неотъемлемой его частью. Вы можете создать любое меню сайта, но кроме этого оно должно быть гармонично сочетаться с другими элементами на сайте, к этим критериям можно отнести и цветовую схему меню. Мы уделяем множество уроков данной тематике, ведь это один из главных элементов на странице ресурса. В данном уроке мы рассмотрим простое, анимированное меню для сайта с вертикальным расположением созданное с помощью исключительно css.


06 06.2014
Эффекты прокрутки страницы

В данном уроке мы рассмотрим как можно проложить маршрут на карте Google? при этом у Вас будет самостоятельно указать пункты назначения в специальном  окне навигации, кроме этого после прокладывания пути Вы увидите расстояние в километрах. Для реализации такой манипуляции с картами нам понадобится небольшой кусок стилей, в котором мы укажем параметры для блока ввода информации и линия, которая будет обозначать маршрут. За расчет маршрута у нас будет отвечать функции js, с помощью которой также мы и узнаем дистанцию.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close