Домой / Рецепты CSS / Бесконечная прокрутка фона сайта
Бесконечная прокрутка фона сайта

Бесконечная прокрутка фона сайта

Бесконечная прокрутка изображения на фоне сайта, которое бесконечно повторяется прокручиваясь вверх. Эффект бесконечной прокрутки фона для сайта создан с помощью 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;
}
Бесконечная прокрутка изображения на фоне сайта, которое бесконечно повторяется прокручиваясь вверх. Эффект бесконечной прокрутки фона для сайта создан с помощью CSS. Изменить изображение фона можно указав ссылку в свойстве background класса overlay на другое изображение. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML 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&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.56 ( 4 голосов )
100

9 комментариев

  1. Аватар

    Все клево!!! Только в IE не прокручивает… В Chrome подергивается при прокручивании…
    Может конечно у меня какие глюки, но не должно.

    • Аватар

      Если подергивается в хроме — рекомендую изменить размер фонового изображения (в примере 1920х3601). После полной прогрузки фонового изображения не дергает.
      А за ИЕ да… Увы, но в ИЕ не работает.

  2. Аватар

    Рабочий вариант, в том числе и для 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; }
    }

  3. Аватар
    Александр

    А можно поподробнее как установить прокрутку… Копировать и вставить обе ссылки?

Оставить комментарий

Ваш email не будет опубликован.

*