X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-06
  • 3576 переглядів

  • Дизайн та розробка сайту

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

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

Эфект фон

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



Пример

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

<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
Проголосовало: 2, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078