Когда Вы будете совершать прокрутку страницы, в прозрачном блоке, будет динамический фон, который будет меняться при движении.
Для того чтобы осуществить у себя на сайте такой эффект, нужно сделать несколько шагов. Примерная структура должна быть такой:
<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%;
}
Такой эффект можно встретить на многих сайтах. Так же можно оформить фон шапки сайта. Например при прокрутке, он будет стоять на месте. Это не обычно и имеет прикольный вид.
На этом все, спасибо за внимание. 🙂
