О плагине Stellar для сайта говорилось и рассказывалось многое. Но, всё-таки интересным бы было вкратце пробежаться и резюмировать возможности JQuery и Stellar получив краткий справочник по нему. Хотите что бы ваш старый или существующий сайт был слоёный как пирог и слои передвигались плавно и медленно — на разных скоростях относительно прокрутки контента: stellar — это то что вам нужно. Название библиотеки пишется так: jquery.stellar.min.js, да и пользоваться ею очень просто, ну если вы конечно web-мастер или web-программист. Достаточно вписать в шапку вашего шаблона html, подгрузив stellar: <script type=»text/javascript» src=»/scripts/jquery.stellar.min.js»></script> Далее всё остальное делаем ручками, совсем немножко и просто. Делаем стандартный <body background=»backrng.jpj»> и делаем <div id=»wrapper» style=»z-index:777;position:absolute;top:0px;left:20%;»> (или прописать z-index в CSS-ке) — DIV id=»wrapper» (как это сейчас модно стало обзывать) собственно сам контейнер для содержимого сайта. Проверяем — ага, пока просто прокручивается как и положено сайту. Значит идём верным путём, товарищи 🙂
Stellar уже подгружен в хеадер нашего шаблона, приступаем к небольшому кодингу сайта.
Добавляем ДО <body (в header тегах) или в существующий javascript (в header тегах) или создаём свой:
<script type=»text/javascript»>
$(function(){
$(‘.selectBlock’).sSelect();$.stellar({
// Выбор направления прокруток
horizontalScrolling: false,
verticalScrolling: true,// Отступы от краёв экрана
horizontalOffset: 0,
verticalOffset: 0,// Обновлять содержимое, после масштабирования экрана
responsive: true,// Типы эффектов.
// Выберите ‘scroll’, ‘position’, ‘margin’ or ‘transform’,
// или единственный ‘scrollProperty’ плугина.
scrollProperty: ‘scroll’,// Выберите приоритет перемещения для элементов.
// Выберите сначала ‘position’ или ‘transform’,
// или как по умолчанию ‘positionProperty’ в плугине.
positionProperty: ‘position’,// Включите или выключите эффеты для слоёв бэкграунда
parallaxBackgrounds: true,
parallaxElements: true,// Скрыть перемещение слоёв при трансформации объектов(а)
hideDistantElements: false,// Кастомайзинг для некоторых элементов плагина
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
})
});$(‘#my_layer_1‘).stellar(); // инициализация Stellar слоя 1
$(‘#my_layer_2‘).stellar(); // инициализация Stellar слоя 2</script>
После <body создаём <div c z-index:444 и 333 и своими id = для «стеллара» вот как это будит выглядеть:
<body background=»/images/фон_моей_картинки.jpg»><!— слой 0 с неподвижной картинкой —>
<div id=»my_layer_1» data-slide=»my_layer_1″ data-stellar-vertical-offset=»0″ data-stellar-offset-parent=»true» data-stellar-ratio=»1.7″ style=»z-index:333….»><img src=»/images/layer1.png» border=»0″ width=»100%»></div><!— слой 1 с картинкой —>
<div id=»my_layer_2» data-slide=»my_layer_2″ data-stellar-vertical-offset=»1″ data-stellar-offset-parent=»true» data-stellar-ratio=»2.8″><img src=»/images/layer2.png» border=»0″ width=»100%» style=»z-index:444….»></div><!— слой 2 с картинкой —>
<div id=»wrapper» style=»z-index:555….»><!— слой 3 с контентом сайта —> Стандартный Контент сайта (сам сайт в диве)
Собственно data-stellar-ratio=»1.7″ — это скорость прокрутки слоёв, относительно общей прокрутки. Есть разные эффекты: трансформ, горизонтальная и или вертикальная прокрутка, сборка, смешивание… Получаем вот такой интересный и красивый сайтик: https://gorodvod.ru/
Почему я использовал файлы типа *.png 24 — дело в том, что а) они поддерживают прозрачность альфа-канал б) поддерживают обтравку по контуру в) имеют 65565 т.е. full rgb (24bit) — цветов г) поддерживаются во всех типах новых браузерах (кроме старых IE) Для слоёв — то что надо! GIF — не подходит, думаю сами поймёте почему нет.
Так, что как говорится — пользуйтесь на здоровье, мне самому конечно пришлось пару дней разобраться что к чему, но Stellar нужен, поверьте, слои можно сделать прозрачными или полупрозрачными эмитирующими эффект слоёности на разных скоростях, так называемый в народе PARALAX-эффект. Конечно тут в ДИВах теги data-slide для HTML5 — ну а чем плохо? Под все новые браузеры работает же — значит то что надо. Хвала разработчикам библиотеки Stellar на JQuery. Стильно и современно, и красиво. Хороший сайт!
Красивый и стильный сайт получился! Молодца 😆