Бесконечная прокрутка изображения на фоне сайта, которое бесконечно повторяется прокручиваясь вверх. Эффект бесконечной прокрутки фона для сайта создан с помощью CSS.
Изменить изображение фона можно указав ссылку в свойстве background класса overlay на другое изображение.
Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.
Демо СкачатьHTML
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'> <div class="overlay"> <h1>Бесконечная прокрутка фона сайта</h1> <p>Вернуться на сайт с уроком</p> <div class="btn-wrap"> <a href="https://wp-lessons.com/beskonechnaya-prokrutka-fona-sayta/">Wordpress-club.com</a> </div> </div>
CSS
.overlay{ position:fixed; background: url(http://marshall-design.com/codepen/paper.jpg) repeat-y center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-animation:100s scroll infinite linear; -moz-animation:100s scroll infinite linear; -o-animation:100s scroll infinite linear; -ms-animation:100s scroll infinite linear; animation:100s scroll infinite linear; top:0; left:0; width:100%; height:100%; } h1{ text-align:center; color:#FFF !important; margin-top:10%; font:60px Lobster; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); } p{ color:#FFF; text-align:center; font:15px Lobster; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); } @-webkit-keyframes scroll{ 100%{ background-position:0px -3000px; } } @-moz-keyframes scroll{ 100%{ background-position:0px -3000px; } } @-o-keyframes scroll{ 100%{ background-position:0px -3000px; } } @-ms-keyframes scroll{ 100%{ background-position:0px -3000px; } } @keyframes scroll{ 100%{ background-position:0px -3000px; } } .btn-wrap{ margin:0 auto; width:190px; padding-top:50px; } a{ background:#e74c3c; color:#FFF; position:relative; padding:15px; font-weight:900 !important; text-transform:uppercase; border-radius:5px; font:11px lato; opacity:0.8; letter-spacing:1px; text-decoration:none; box-shadow:#c0392b 0px 7px 2px,#000 0px 8px 5px; } a:hover{ opacitY:1; } a:active{ top:4px; box-shadow:#c0392b 0px 3px 2px,#000 0px 3px 5px; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Все клево!!! Только в IE не прокручивает… В Chrome подергивается при прокручивании…
Может конечно у меня какие глюки, но не должно.
Если подергивается в хроме — рекомендую изменить размер фонового изображения (в примере 1920х3601). После полной прогрузки фонового изображения не дергает.
А за ИЕ да… Увы, но в ИЕ не работает.
Рабочий вариант, в том числе и для IE. Может пригодится 😉
.overlay{
background-image: url(‘/img/bg-chaos.jpg’);
background-repeat: repeat-y;
background-position: left bottom;
-webkit-animation: slide 60s linear infinite;
animation: slide 60s linear infinite;
transform: translate(0);
}
@keyframes slide {
from { background-position: left 0; }
to { background-position: left -1790px; }
}
@-webkit-keyframes slide {
from { background-position: left 0; }
to { background-position: left -1790px; }
}
@-moz-keyframes slide {
from { background-position: 83% 0; }
to { background-position: 83% -1790px; }
}
Background лучше указать следующий:
background: url(«/img/bg-chaos.jpg») repeat-y center center / cover transparent;
Так мы картинку растягиваем во всю ширину экрана (браузера).
Пригодиться 🙂
А можно поподробнее как установить прокрутку… Копировать и вставить обе ссылки?
Пример очень простой, нужно всего лишь добавить CSS стили к классу overlay (создав этот блок заранее) или к тому же body.
Посмотреть на установленную прокрутку Вы можете скачав демо пример.
Спасибо! А у вас нет, случайно, видеоуроков по работе со своим сайтом на ютюбе?
Пожалуйста 🙂
На ютубе уроков нет, не хватает на созданию видеоуроков времени.