В сегодняшнем уроке мы собираемся использовать JavaScript для создания простого, гибкого эффекта параллакса, когда логотип, по-видимому, меняет цвета с фоном, на котором он находится, когда пользователь прокручивает.
Мы будем создавать элемент «по умолчанию», который соответствует его расположению ( position: fixed ), и набор «подвижных» элементов, положение которых зависит от этого элемента «default». Мы будем использовать JavaScript, чтобы это происходило каждый раз, когда пользователь прокручивает.
Примечание: чтобы охватить все основы, я предоставил объяснение в видео и в письменной форме.
Смотреть видео
Подписаться на Tuts + веб-дизайн на Youtube
Прочитайте Учебное пособие
Базовая разметка
Мы начнем с создания пары элементов. Давайте сделаем один из их фонов темным, а другой — светлым, чтобы в них было контрастное изображение. Давайте также сделаем наше первое изображение изображением «по умолчанию», назначив ему класс по default , в то время как другие изображения получат класс moveable .
|
1
2
3
4
5
6
7
|
<div class=»container dark»>
<img src=»img/acme-light.svg» class=»default»>
</div>
<div class=»container light»>
<img src=»img/acme-dark.svg» class=»moveable»>
</div>
|
Базовые стили
Теперь давайте удостоверимся, что наши изображения не будут прокручиваться за пределы своих контейнеров, установив overflow: hidden . Мы также продолжим и скажем, что эти контейнеры имеют относительное положение, поэтому абсолютно позиционированные элементы будут выравниваться с этими контейнерами, а не напрямую с фиксированным элементом, когда мы пишем наш JavaScript.
Для удобства прокрутки давайте установим min-height этих контейнеров около 400px . И чтобы держать наши логотипы подальше от краев, давайте дадим им padding от 1em .
|
1
2
3
4
5
6
|
.container {
overflow: hidden;
position: relative;
min-height: 400px;
padding: 1em;
}
|
Каждому контейнеру нужен контрастный цвет, поэтому:
|
1
2
3
4
5
6
7
|
.dark {
background: #333;
}
.light {
background: #fff;
}
|
И наконец, как и было обещано, давайте установим наш CSS по умолчанию и перемещаемый, чтобы один застрял на странице, когда пользователь прокручивает, а другой движется вместе с ней, не сталкиваясь с другими элементами:
|
1
2
3
4
5
6
7
|
.default {
position: fixed;
}
.moveable {
position: absolute;
}
|
Это должно заботиться о разметке и стилизации. Если вы просматриваете страницу, вы должны увидеть, как логотип по умолчанию прокручивается вниз и прячется за другими контейнерами, тогда как все перемещаемые логотипы должны отображаться как обычные элементы в верхнем левом углу соответствующих контейнеров.
Представляем JavaScript
Теперь самое интересное — заставить его работать с JavaScript.
Сначала мы загрузим jQuery и наш собственный скрипт внизу нашего index.html :
|
1
2
3
4
|
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js»></script>
<script src=»js/slipScroll.js»></script>
</body>
</html>
|
Создайте и откройте файл с именем js/slipScroll.js .
В этом файле первое, что мы сделаем, это создадим функцию setLogo и setLogo ее в событие прокрутки jQuery, чтобы каждый раз, когда пользователь прокручивал пиксель, это событие вызывалось. Мы также хотим убедиться, что мы запускаем это событие, когда пользователь впервые попадает на страницу (перед тем, как прокрутить):
|
1
2
3
4
5
6
7
8
9
|
var setLogo = function() {
};
$(document).scroll(function() {
setLogo();
});
setLogo();
|
Работаем
Теперь о магии. Предположим, что каждый экземпляр .moveable на странице должен изменить свою top позицию CSS так, чтобы изображение по умолчанию .moveable сверху страницы, за .moveable что контейнер этого элемента .moveable находится сверху страницы.
|
01
02
03
04
05
06
07
08
09
10
|
var setLogo = function() {
$(‘.moveable’).each(function() {
$(this).css(‘top’,
$(‘.default’).offset().top —
$(this).closest(‘.container’).offset().top
);
});
};
|
Обнови свою страницу, и вуаля! Вы только что создали эффект прокрутки псевдопараллакса с нуля всего за несколько строк кода.
Вывод
Я призываю вас возиться с этим решением. Попробуйте поиграть с самой функцией JavaScript, чтобы увидеть, какие странные смещения вы получаете, добавляя или удаляя несколько пикселей. Попробуйте использовать другие элементы (кто-нибудь навигацию?) Вместо изображений для прокручиваемого контента.
Я надеюсь, что вы многому научились и не стесняйтесь оставлять комментарии ниже, если у вас есть вопросы