Параллакс скроллинг Java Script
- 18 октября, 2022
- 5:02 пп
- Нет комментариев
Наиболее удобно работать именно с Stellar.js — перепробовал много других, все не то!
Начать работы со Stellar.js довольно просто. Сперва скачайте плагин и подключите его к вашей странице.
Скачать плагин тут:
Наиболее удобно работать именно с Stellar.js — перепробовал много других, все не то!
Начать работы со Stellar.js довольно просто. Сперва скачайте плагин и подключите его к вашей странице.
Скачать плагин тут: Stellar.js
Поехали!
HTML:
<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>
я бы выбрал 5й вариант)
<div class="content" id="content1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae erat vel purus pharetra viverra vel ac risus. Vivamus aliquet nunc pulvinar magna dignissim semper. Mauris eget tellus feugiat, suscipit ex non, suscipit nibh. Sed eu consectetur dui. Sed arcu neque, blandit at neque ac, auctor malesuada velit. Cras interdum, urna id mattis iaculis, quam magna porta neque, sit amet mollis lectus nibh at lacus. Morbi iaculis cursus iaculis. Proin nulla ex, consectetur ut finibus non, pellentesque et ipsum. Proin commodo arcu at nunc commodo, quis consequat ligula sollicitudin. Sed interdum neque nec elit dapibus, non pellentesque turpis maximus. Duis tristique erat vitae dui ultrices efficitur. Morbi tempus malesuada arcu ut aliquam. Aliquam ullamcorper ornare ipsum ut malesuada. Sed feugiat placerat sapien at dictum.</p>
</div>
<div class="content" id="content2">
<p>Nam malesuada lorem non dui porta, sed tempus nulla porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac lacus pulvinar, laoreet turpis ut, consequat est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae ligula non est mollis faucibus sit amet sed ipsum. Sed rutrum, quam id faucibus lobortis, tellus nulla fermentum velit, in porta diam lorem sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin laoreet mauris ut mauris maximus, eget interdum neque mollis. Praesent eget sem pulvinar, volutpat ex condimentum, elementum arcu. Vivamus efficitur est ipsum, a tempor purus gravida id. Duis fermentum, leo vel gravida imperdiet, ligula magna cursus ante, vel lacinia erat sem nec ante. Proin id purus eget neque finibus rhoncus. Quisque ut velit nisl. Ut non faucibus sapien, et laoreet risus.</p>
</div>
<div class="content" id="content3">
<p>Sed a porta lorem, id vulputate mauris. Sed non erat sed velit vestibulum suscipit nec non augue. Cras vitae dolor ac lorem dapibus molestie. Proin dapibus feugiat sollicitudin. Etiam imperdiet tortor at lorem auctor rutrum nec dictum justo. Cras molestie in elit sed semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et sodales nulla. Vestibulum quis aliquam elit. Nullam placerat orci accumsan elit laoreet, sed sollicitudin sapien dignissim. Pellentesque molestie ut lacus eget vehicula. Sed felis odio, feugiat in euismod ac, commodo eget turpis. Sed non ultrices ante.</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae erat vel purus pharetra viverra vel ac risus. Vivamus aliquet nunc pulvinar magna dignissim semper. Mauris eget tellus feugiat, suscipit ex non, suscipit nibh. Sed eu consectetur dui. Sed arcu neque, blandit at neque ac, auctor malesuada velit. Cras interdum, urna id mattis iaculis, quam magna porta neque, sit amet mollis lectus nibh at lacus. Morbi iaculis cursus iaculis. Proin nulla ex, consectetur ut finibus non, pellentesque et ipsum. Proin commodo arcu at nunc commodo, quis consequat ligula sollicitudin. Sed interdum neque nec elit dapibus, non pellentesque turpis maximus. Duis tristique erat vitae dui ultrices efficitur. Morbi tempus malesuada arcu ut aliquam. Aliquam ullamcorper ornare ipsum ut malesuada. Sed feugiat placerat sapien at dictum.</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
<p>Nam malesuada lorem non dui porta, sed tempus nulla porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac lacus pulvinar, laoreet turpis ut, consequat est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae ligula non est mollis faucibus sit amet sed ipsum. Sed rutrum, quam id faucibus lobortis, tellus nulla fermentum velit, in porta diam lorem sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin laoreet mauris ut mauris maximus, eget interdum neque mollis. Praesent eget sem pulvinar, volutpat ex condimentum, elementum arcu. Vivamus efficitur est ipsum, a tempor purus gravida id. Duis fermentum, leo vel gravida imperdiet, ligula magna cursus ante, vel lacinia erat sem nec ante. Proin id purus eget neque finibus rhoncus. Quisque ut velit nisl. Ut non faucibus sapien, et laoreet risus.</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
<p>Sed a porta lorem, id vulputate mauris. Sed non erat sed velit vestibulum suscipit nec non augue. Cras vitae dolor ac lorem dapibus molestie. Proin dapibus feugiat sollicitudin. Etiam imperdiet tortor at lorem auctor rutrum nec dictum justo. Cras molestie in elit sed semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et sodales nulla. Vestibulum quis aliquam elit. Nullam placerat orci accumsan elit laoreet, sed sollicitudin sapien dignissim. Pellentesque molestie ut lacus eget vehicula. Sed felis odio, feugiat in euismod ac, commodo eget turpis. Sed non ultrices ante.</p>
</div>
Java Script:
$.stellar({
horizontalScrolling: false,
responsive: true
}
);
CSS:
body {
font-size: 20px;
color: white;
text-shadow: 0 1px 0 black, 0 0 5px black;}
p {
padding: 0 0.5em;
margin: 0;}
.content {
background-attachment: fixed;
height: 400px;}
#content1 {
background-image: url("фото фона");}
#content2 {
background-image: url("фото фона");}
#content3 {
background-image: url("фото фона");}
#content4 {
background-image: url("фото фона");}
#content5 {
background-image: url("фото фона");}
#content6 {
background-image: url("фото фона");}
Похожие записи
21.11.2024
Комментариев нет
14.06.2024
Комментариев нет
17.05.2024
Комментариев нет
