Проскролливаем элементы с разной скоростью
Заглянув на сайт Газпрома, увидел плавный и красивый скролл. Суть в том, что основная часть страницы проскролливается медленнее, чем блок с тизерами. Давайте реализуем его вместе.
Первым делом, создадим html файл, пусть это будет index.html.
Подключаем в нём jQuery и файлы js.js и css.css, листинг которых приведён чуть ниже.
Листинг index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
//Подключаем по CDN библиотеку JQuery.
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
//подключаем наш js файл
<script type="text/javascript" src="js.js"></script>
//подключаем css файл
<link rel="stylesheet" href="css.css">
<title>Scrool New</title>
</head>
<body>
<div class="banners">
<div class="banner" style="background: #e0e0e0"></div>
<div class="banner" style="background: #4682B4"></div>
<div class="banner" style="background: #DCDCDC"></div>
<div class="banner" style="background: #e0e0e0"></div>
<div class="banner" style="background: #4682B4"></div>
<div class="banner" style="background: #DCDCDC"></div>
</div>
<div class="blocks">
<div class="block"></div>
</div>
</body>
</html>
Листинг css.css
Далее создадим простенький css файл(css.css).
html{
margin:0;
padding:0;
}
//блок с баннерами
div.banners{
width: 100%;
height: 100%;
//фиксируем его
position: fixed;
//transform: Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
//translateY - трансформация по вертикали
transform: translateY(0px);
top:0;
left: 0;
}
.red{
background: #A52A2A;
}
.blue{
background: #4682B4;
}
.white{
background: white;
}
.black{
background: black;
}
div.banner{
width:100vw;
height: 100vh;
}
div.blocks{
position: relative;
margin-left: 50vw;
width:40vw;
}
div.block{
background: #fff;
border: 1px solid #000;
height:200px;
}
Листинг js.js
И создадим js(js.js) файл, в котором и будет обработчик такого скролла.
//ждём когда документ прогрузится
$(document).ready(
function(){
//вешаем на документ "обработчик" скролла
$(this).scroll(
function(){
//указываем, новый css параметр transform в зависимости от изменения скролла от верха. Делим на 6, чтобы была заметна разница в прокрутке между баннерами и блоками.
$('div.banners').css('transform','translateY(-'+ $(document).scrollTop()/6 +'px)')
}
)
}
)
Что мы делаем этим кодом? Мы "фиксируем" блок с баннерами (banners), при скролле мы получаем значение scrollTop и смещаем этот блок, в обратную от скролла сторону. Для этого мы scrollTop делим на 6 и устанавливаем значение translateY со знаком минус.
На 6 делим чтобы был более заметен скролл баннеров и блоков. Вы это значение можете поменять и посмотреть как изменится проскролливание.
Код
Примеры работы
Результат работы можно увидеть на сайте
Скролл при делении 2
Скролл при делении 6
Материал подготовлен автором @zheev