Появление элементов при прокрутке страницы: Появление элемента на странице при прокрутке – Появление исчезновение элемента при прокрутке страницы JQuery

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

Интересные способы анимации на лендинге:

Суть эффекта: при прокрутке страницы появляются блоки с оригинальным эффектом. Аналогичная анимация происходит и при прокрутке в обратном направлении.

Не спеша прокручивайте страницу вниз и смотрите на появляющиеся блоки:

Посмотреть примерСкачать

Полный мини-курс по созданию лендинга с нуля: «Лендинг за 60 минут».

Скриншот появления третьего блока:

Видео с разбором исходного кода

Как установить и настроить анимацию при прокрутке я рассказал в данном видео:

Все вопросы по анимации Вы можете задать ниже в комментариях либо в Skype, для нужно — ЗАПИСАТЬСЯ!

Успехов!

С Уважением, Юрий Немец

Анимационные эффекты при прокрутке страницы

По мере прокрутки страницы плагин ScrollMe может масштабировать, поворачивать, трансформировать и изменять прозрачность элементов на странице. Он легко настраивается и не требует дополнительных строк javascript.

Установка:

Подключаем библиотеку jQuery и плагин ScrollMe:

HTML код выглядет следующим образом:

<div> <div data-when=»enter» data-from=»0.5″ data-to=»0″ data-opacity=»0″ data-translatex=»-200″ data-rotatez=»90″ > Информационный блок </div> </div>

Класс scrollme определяет контейнер для анимированных элементов. Прогресс анимации основан на прокрутке этого элемента.

Класс animateme определяет анимированный элемент.

Если это необходимо, оба эти класса могут быть применены к одному и тому же элементу.

Настройки:

Параметры добавляются как атрибуты элементов scrollme

• data-when

  Определяет границы прокрутки, когда начинаются и заканчиваются анимация.

  enter — начиная с момента, когда верхняя часть контейнера входит в окно просмотра и до момента, когда он выходит.

  exit — начиная с момента, когда нижняя часть контейнера входит в окно просмотра и до момента, когда оно выйдет.

  span — начиная с момента, когда верхняя часть контейнера входит в окно просмотра и до момента, когда выйдет его нижняя часть.

• data-from и data-to

  Задает позицию внутри границ прокрутки, с которых начинается и заканчивается анимация.

  Анимированным свойствам присваивается значение по умолчанию до позиции data-from, а затем переход к значению, определенному в параметрах, по мере продвижения прокрутки к позиции data-to.

  Значения: 0 — 1

• data-easing

  Устанавливает функцию плавности, применяемую к анимации.

  easeout — начинается быстро, к концу замедляется (используется по умолчанию)

  easein — медленно начинается, к концу ускоряется

  easeinout — начинается и заканчивается медленно

  linear — одинаковая скорость от начала и до конца.

• data-opacity

  Устанавливает прозрачность анимированного элемента, когда прокрутка приближается к позиции data-to.

  Значения: 0 — 1

• data-scale, data-scalex, data-scaley и data-scalez

  Определяет масштаб анимированного элемента (необязательно вдоль оси X, Y и Z), когда прокрутка приближается к позиции data-to.

  Значения: коэффициент масштабирования

• data-rotatex, data-rotatey и data-rotatez

  Определяет угол поворота анимированного элемента вдоль оси X, Y и Z, когда прокрутка приближается к позиции data-to.

  Значения: угол поворота в градусах

• data-translatex, data-translatey и data-translatez

  Определяет расстояние для перевода анимированного элемента вдоль оси X, Y и Z, когда прокрутка приближается к позиции data-to.

  Значения: расстояние в пикселях

Примеры:

Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: http://scrollme.nckprsn.com

WOW.js — Альтернативный вариант для добавления анимационных эффектов при прокрутке страницы

Действие при появлении элемента на экране — jQuery | Кабинет Веб-мастера

С каждым днем сайты становятся все сложнее, а дизайнеры придумывают все новые способы привлечь внимание посетителей — и это правильно, ведь удивить становится все труднее. Именно поэтому в последнее время на многих сайтах присутствует анимация и различные эффекты. Но нас сегодня интересует немного другая тема: как определить, виден ли сейчас элемент на экране или нет? И если виден, то сделать какое-нибудь действие. Например перекрасить его в другой цвет. Сайт может быть длинным и если вы назначите анимацию при загрузке страницы, вероятность того, что пользователь ее увидит — очень мала — нужно запускать ее в тот момент, когда элемент появился на странице. Давайте научимся это делать.

Для начала создадим небольшую разметку, с помощью которой мы будем проводить свои эксперименты:

<div>
	<div>Привет! Я блок!</div>
</div>

Одна обертка и один блок. Добавим немного стилей:

.page-site {
	position:relative;
	height:5000px;
}
.block {
	width:200px;
	height:200px;
	background:red;
	text-align:center;
	color:#fff;
	font-family:Arial;
	font-size:18px;
	line-height:200px;
	position:absolute;
	top:50%;
	margin-top:-100px;
	left:50%;
	margin-left:-100px;
}
.block.green {
	background:green;
}

Как видите, мы задали высоту обертке и поставили блок по центру — при загрузке страницы его не видно. И заранее описали класс green при котором заливка блока станет зеленой.

Давайте попробуем перекрасить блок, как только он целиком попадет в область видимости экрана.

Для этого напишем следующий скрипт:

$(document).ready(function() {
	var windowHeight = $(window).height();
 
	$(document).on('scroll', function() {
		$('.block').each(function() {
			var self = $(this),
			height = self.offset().top + self.height();
			if ($(document).scrollTop() + windowHeight >= height) {
				self.addClass('green')
			}
		});
	});
});

Я немного забежал вперед и предусмотрел наличие на странице сразу множества элементов, поэтому использовал each. Что делает скрипт: при скролле страницы он пробегает все элементы и проверяет, что расстояние до них + их высота меньше расстояния, которое пользователь пролистал + высота окна. Как только условие нарушается, срабатывает скрипт — в нашем случае он добавляет класс green.

Если вам нужно многократное повторение действия (отмена действия если элемент скроется и повтор — если опять появится), достаточно просто дописать условие else.

Если блок по высоте больше высоты экрана

Если блок очень высокий, то он целиком не поместится в экран, а значит что скрипт выполнится поздно. Для такого случая давайте немного модифицируем скрипт. Будем выполнять действие, когда до верха страницы будет оставаться 100px.

Немного обновим стили:

.page-site {
	position:relative;
	height:5000px;
}
.block {
	width:200px;
	height:1200px;
	background:red;
	text-align:center;
	color:#fff;
	font-family:Arial;
	font-size:18px;
	line-height:200px;
	position:absolute;
	top:50%;
	margin-top:-600px;
	left:50%;
	margin-left:-100px;
}
.block.green {
	background:green;
}

И теперь сам модифицированный скрипт:

$(document).ready(function() {
	var windowHeight = $(window).height();
 
	$(document).on('scroll', function() {
		$('.block').each(function() {
			var self = $(this),
			height;
			if (self.height() >= windowHeight) {
				height = self.offset().top + windowHeight - 100;
			} else {
				height = self.offset().top + self.height();
			}
			if ($(document).scrollTop() + windowHeight >= height) {
				self.addClass('green')
			}
		});
	});
});

В скрипте мы выполняем проверку — если элемент больше чем высота экрана, то скрипт сработает, когда до верха останется 100px, в противном случае сработает по «старой» схеме.

Действие по центру экрана

А что если действовать нужно в тот момент, когда элемент находится ровно по центру экрана? И для такого случая найдется свой скрипт:

$(document).ready(function() {
	var windowHeight = $(window).height();
 
	$(document).on('scroll', function() {
		$('.block').each(function() {
			var self = $(this),
			height = self.offset().top + self.height()/2 - windowHeight/2;
			if ($(document).scrollTop() >= height) {
				self.addClass('green');
			}
		});
	});
});

Вот и все. Всем удачи!

Плагины для создания анимации при скроллинге (прокрутке) страницы

В этой статье мы рассмотрим различные плагины, которые помогают анимировать элементы при прокрутке страницы. Мы начнем с самых простых плагинов Wow.js и scrollReveal.js, которые не требуют знания javascript, и закончим плагинами SuperScrollorama и ScrollMagic, в которых без знания javascript уже не обойтись.
Плагины, которые мы рассмотрим:

• Wow.js
• scrollReveal.js
• Skrollr.js
• ScrollMagic

Пример анимации WOW.js:

See the Pen wow.js+animate.css | first steps by Alexey (@CreativeSeo33) on CodePen.

Wow.js добавляет любую css анимацию (например, animate.css) к HTML элементам.
Например, элемент будет невидимым, пока пользователь не прокрутит страницу до него.
Использовать плагин очень просто, вам не понадобятся знания javascript.
Пример кода:

<div>Content to Reveal Here</div>

Элемент div появится с анимацией bounceInUp, когда пользователь прокрутит до него.
Также вы можете задать параметры duration , delay , offset и iteration.

Пример анимации scrollReveal.js:

See the Pen Scroll Reveal by Alexey (@CreativeSeo33) on CodePen.

scrollReveal.js более сложный плагин и позволяет контролировать больше параметров.
Вы можете не только выбрать направление, в котором элемент появится, но также вы можете объединять эффекты с помощью ключевых слов from, and, then, with.
wait или after определяют задержку между анимациями.

Пример кода:

<!— Появление элемента с дефолтными параметрами —> <div data-scroll-reveal> Hello world! </div> <!— Появление элемента с заданными параметрами —> <div data-scroll-reveal=»enter left and move 50px over 1.33s»> Foo </div>

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

Пример анимации Skrollr.js:

See the Pen Merry Christmallax — Skrollr.js animation by Alexey (@CreativeSeo33) on CodePen.

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

Пример анимации SuperScrollorama:

See the Pen Text animation path[Cree Indian Prophecy] by Alexey (@CreativeSeo33) on CodePen.

SuperScrollorama один из самых сложных плагинов, требующий знаний javascript. Если у вас хорошие знания javascript, то эта библиотека для вас.
С помощью этой библиотеки можно создавать сложные анимации:

• вложенные последовательности анимаций;
• перемотка назад, перемотка вперед, повтор;
• callbacks;
• и многое другое.

Пример анимации ScrollMagic:

See the Pen Simple ScrollMagic Tutorial by Alexey (@CreativeSeo33) on CodePen.

ScrollMagic один из самых последних плагинов анимации скроллинга и является переписанным предшественником SuperScrollorama.
Он также разработан Greensock и позволяет создавать сложные последовательности анимаций.
Преимущества:

• оптимизированная производительность;
• гибкость;
• большая совместимость;
• хорошо подходит для адаптивного дизайна;

Более подробно про анимацию с помощью ScrollMagic: