Главная
Web-дизайн
Интересный фокус с фиксированным фоном

Интересный фокус с фиксированным фоном

Эфект фон

Доброго времени суток. 🙂

В этой статье хочу показать простенький способ с фиксированным фоном. Его суть заключается в том, что фон всех блоков сплошного цвета, но один из блоков имеет прозрачный фон и в нем отображается общий фон тела сайта.

Когда Вы будете совершать прокрутку страницы, в прозрачном блоке, будет динамический фон, который будет меняться при движении.



Пример

Для того чтобы осуществить у себя на сайте такой эффект, нужно сделать несколько шагов. Примерная структура должна быть такой:

<html>
<head>
</head>
<body>
<div class="block1">
// Содерожимое блока 1
</div>
<div class="block2">
// Содерожимое блока 2
</div>
<div class="block3">
// Содерожимое блока 3
</div>
</body>
</html>

Зададим прозрачность блоку под номером 2, как и в примере. Для этого просто нужно не указывать ему фон, в то время как блоку 1 и 3 присвоим сплошную заливку цветом и ширину в 100%. Также, для начала нужно body присвоить фиксированный фон, который мы растянем на всю ширину экрана.

В общем стили будут иметь примерно такой вот вид.

body{
    min-height: 100%;
	margin:0;
	padding:0;
	background: url(bg.jpg) no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
.block1,.block3{
	background:#f1f1f1;
	width:100%;
	}

Такой эффект можно встретить на многих сайтах. Так же можно оформить фон шапки сайта. Например при прокрутке, он будет стоять на месте. Это не обычно и имеет прикольный вид.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий