Автор

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

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


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

 

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

 

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

Все анимации были созданы с помощью 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]
        ]
    });

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Сегодняшний пример - это простой шаблон. На больших устройствах контент разделяется на два основных контейнера.


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

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


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

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


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

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


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close