BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

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

Итак, добавьте между тегами <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(http://bloggood.ru/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(http://bloggood.ru/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;
}

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

3 Ответов на комментарий - Фон, который меняется при прокрутке (CSS)

  1. Александр

    Здравствуйте Степан ! Спасибо, очень интересный фокус – понравился. Думаю теперь куда его применить можно. :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Александр!
    Можно таким способом сделать на сайте пасхальное яйцо )))

    Ответить

    Александр отвечает:

    Да. Или деда мороза :idea:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 768
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4213