Ноябрь 4, 2019 Запись была обновлена
Фиксированный меняющийся фон для сайта
Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В CSS есть такое свойство background-attachment: fixed, которое позволяет зафиксировать фоновое изображение. То есть при прокрутке страницы оно не будет прокручиваться со страницей. Но в CSS нет свойства, которое позволило бы сделать смену изображений при прокрутке, поэтому мы воспользуемся Javascript.
Фиксированный фон для сайта
Возможно вы не поняли о чем я пишу, поэтому посмотрите демо и вы сами увидите этот красивый эффект:
Смотреть примерСкачать
Как же сделать меняющийся фон для сайта?
HTML
Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="cbp-fbscroller" class="cbp-fbscroller"> <nav> <a href="#fbsection1" class="cbp-fbcurrent">Блок с первым изображением</a> <a href="#fbsection2">Блок со вторым изображением</a> <a href="#fbsection3">Блок с третьим изображением</a> <a href="#fbsection4">Блок с четвертым изображением</a> <a href="#fbsection5">Блок с пятым изображением</a> </nav> <section id="fbsection1"></section> <section id="fbsection2"></section> <section id="fbsection3"></section> <section id="fbsection4"></section> <section id="fbsection5"></section> </div> |
В теге <nav> мы определили навигацию по блокам с разными изображениями. На этом с HTML разметкой закончили. Переходим к стилям.
CSS
Что касается стилей, то их здесь не очень много.
Делаем высоту блока на всю максимально возможную. То есть на высоту окна браузера пользователя.
1 2 3 4 5 6 | html, body, .container, .cbp-fbscroller, .cbp-fbscroller section { height: 100%; } |
Дальше разбираемся с навигацией, которая отображается справа в виде кружочков (если находимся на активном блоке, то кружок закрашен).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .cbp-fbscroller > nav { position: fixed; /* меню всегда на одном месте */ z-index: 9999; /* ничто не должно перекрывать меню */ right: 100px; /* оно находится от правого края на 100 пикселей */ top: 50%; /* и по вертикали по середине страницы */ width: 26px; /* ширина меню */ -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* ниже идут стили для каждого элемента (ссылки) в меню */ .cbp-fbscroller > nav a { display: block; position: relative; z-index: 9999; color: transparent; width: 26px; height: 26px; outline: none; margin: 25px 0; border-radius: 50%; border: 4px solid #fff; } .no-touch .cbp-fbscroller > nav a:hover { background: rgba(255,255,255,0.6); } .cbp-fbscroller > nav a.cbp-fbcurrent { background: #fff; } |
Некоторые свойства я прокомментировал, думаю понятно какое свойство за что отвечает. Если не совсем — пишите в комментариях! 🙂
В итоге у нас получится следующее меню:
Далее необходимо написать стили чтобы изображения не повторялись и были зафиксированы. Делаем это с помощью следующих свойств:
1 2 3 4 5 6 7 8 9 10 | .cbp-fbscroller section { position: relative; background-position: top center; background-repeat: no-repeat; background-size: cover; } .no-touch .cbp-fbscroller section { background-attachment: fixed; } |
Осталось для соответствующих блоков задать необходимые изображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #fbsection1 { background-image: url(../images/1.jpg); } #fbsection2 { background-image: url(../images/2.jpg); } #fbsection3 { background-image: url(../images/3.jpg); } #fbsection4 { background-image: url(../images/4.jpg); } #fbsection5 { background-image: url(../images/5.jpg); } |
Остался Javascript!
Javascript
В конце документа необходимо вставить следующие jQuery библиотеки:
1 2 3 4 5 6 7 8 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.easing.min.js"></script> <script src="js/cbpFixedScrollLayout.min.js"></script> <script> $(function() { cbpFixedScrollLayout.init(); }); </script> |
Вывод
На этом всё. Красивый эффект, да и не составит труда, я думаю, вставить его себе на сайт! Желаю вам успехов, если появятся проблемы с установкой — пишите в комментариях 🙂 .
P.S.: Я изменил дизайн сайта. На мой взгляд он более современный и удобный.
Успехов!
С Уважением, Юрий Немец
Источник: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Привет Друг!)
я 0 в сайтостроении)
И вопросы соответствующие)
Можно при помощи тех же скриптов и библиотек сделать полную смену картинки на фоне после каждого щелчка скрола?
Ну и не существенный вопрос…
У тебя в примере при выборе фона соответвующий кружок не становится заполненным, как будто выбран всегда первый фон, как поправить?
Здравствуйте, Евгений! На JS можно сделать всё что только пожелаете, это лишь вопрос времени.
P.S.: спасибо что показали на недочет, исправил! 🙂
скажите пожалуйста, как сделать так, чтоб эти фоны автоматом менялись. какойто ротатор нужен? дайте плиз код.очень нужно.
зараннее спасибо!
Спасибо за пример!
После тестирования выяснилось, что данный пример не работает на мобильный устройствах.
Подскажите пожалуйста, как можно реализовать данный функционал и на мобильных устройствах?
Заранее спасибо!
жаль, что это не работает на мобильных устройствах