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

Віталий

10 років ago

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

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

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

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

<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%;
	}

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

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

Exit mobile version