slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 5188
Теги: css, jQuery, animation, анимация

В этой статье мы рассмотрим общий шаблон для создания сайта с анимацией при прокрутке, а так же сделаем один простенький пример.

Для реализации такого эффекта будем использовать библиотеку jQuery, но принцип остается один и тот же.

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

Общий шаблон для скрипта будет такой:

$(document).ready(function() { // Ждём загрузки страницы
	$(window).scroll(function() {
		if ($(this).scrollTop() > 1000) {
			// вызываем какую-то функцию, которая содержит анимацию
		}
	});
});

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

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

Рассмотрим небольшой пример. У нас будет три блока высотой в полный экран и при прокрутке к следующему на нем будет изменяться цвет фона.

Разметка:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />    
<link rel="stylesheet" href="/../css/template.css" type="text/css" />
<title>Страница</title>
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript" src="/js/effects.js"></script>
</head>
<body>
	<div class="first">
	</div>
	<div class="second">
	</div>
	<div class="three">
	</div>
</body>
</html>

Стили:

/* Общие стили */
body {
	margin:0;
}
/* Общие стили закончилась */

div.first {
	background:#333;
	transition:2s;
	width:100%;
	height:1000px;
}

div.second {
	background:#999;
	transition:2s;
	width:100%;
	height:1000px;
}

div.three {
	background:#eee;
	transition:2s;
	width:100%;
	height:1000px;
}

Сам js-код:

$(document).ready(function() { // Ждём загрузки страницы
	$(window).scroll(function() {
		if ($(this).scrollTop() > 0) {
			effectFirst();
		}
		if ($(this).scrollTop() > 800) {
			effectSecond();
		}
		if ($(this).scrollTop() > 1800) {
			effectThree();
		}
	});
});


function effectFirst() {
	$(".first").css("background","#CC3300");
}

function effectSecond() {
	$(".second").css("background","#339933");
}

function effectThree() {
	$(".three").css("background","#FFFF00");
}

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

Результат вы можете увидеть на демо-странице:

demo

Так же вы можете скачать работающий пример:

download

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    6.40
  • intuit89
    6.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

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

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2300
!important в CSS

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

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Домен — это неотъемлемая часть бизнеса, которая также влияет на поисковую систему. Признаки доменно...
Перейти в тему
ZOMRO аватар
На что ориентироваться при выборе хостинга? Функционал и количество ресурсов. Выбираем те параметр...
Перейти в тему
ZOMRO аватар
Красивое имя для сайта или регистрация доменных имен. Заказав у нас услугу хостинга или VDS/VPS, Вы ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.