Главная » Рецепты CSS » Фон, который меняется при прокрутке (CSS)

Фон, который меняется при прокрутке (CSS)

2016-12-06 / Вр:00:12 / просмотров: 7203

Всем привет!
Сразу скажу, что фокус-покус не мой, я сделал только некоторые изменения. Эффект мне очень понравился, вот и решил поделиться кодом с вами.
Чтобы понять эффект, рекомендую посмотреть демонстрацию.
Прокрутите колёсико мышки

[смотреть демонстрацию]

Как это работает?
Секрет эффекта заключается в прозрачной png картинке:

При прокрутке колесика мышки, цвет второй картинки закрашивает основную картинку.
Второй картинка:

Итак, добавьте между тегами <body></body> вот такой код:

<div id="wrapper">
<div id="fancywrapper">
<div class="mainWrap"></div>
</div>
</div>

Можно и так:

<div id="wrapper">
<div id="fancywrapper">
<div class="mainWrap">прокручивай вниз страницу</div>
</div>
</div>

В CSS файле добавьте вот этот код:

body { background: #404143;}

#wrapper {
/* картинка-градиент, который отвечает за плавность смены изображений и закрашивает главную картинку*/
background-image: url(/wp-content/uploads/2016/12/bodytilebottom-tall.jpg);
min-height: 100%;
background-position: bottom left;
background-repeat: repeat-x;
}
#fancywrapper {
/* главная картинка */
position: relative;
margin: 0px auto;
background-image: url(/wp-content/uploads/2016/12/robo-zombies.png);
background-position: center bottom;
background-repeat: repeat-x;
background-attachment: fixed;
}
.mainWrap {
/* блок для контента */
width: 800px;
height: 1700px;
margin: 0 auto;
background: #fff;
position: relative;
}