Автор

11 10.2014
Эффект «живого фона» для сайта с помощью CSS

Эффект «живого фона» для сайта с помощью CSS


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

Для начала нам необходимо создать довольно-таки простую разметку, в которой у нас будет один контейнер, в котором будут заключены три слоя, в нашем случае у нас будет три слоя изображений, которые мы подключим в стилях:

<div class="image-wrap small">
<div class="background"></div>
<div class="bulb1"></div>
<div class="bulb2"></div>
<div class="bulb3"></div>
</div>

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

 

Шаг 2. CSS

Самым важным элементом это будут стилизация, нам необходимо, для начала, задать общие параметры контейнера, затем мы подключаем изображения с присвоенными им правилами позиционирования:

.image-wrap {
position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
}
.image-wrap.small .background{
background:url(/img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:650px;
position:relative;
}
.image-wrap.small .bulb1{
background:url(/img/bulb-1.png) no-repeat center center;
background-size:contain;
position:absolute;
width:272px;
height:412px;
left:42%;
top:0%;
z-index: 3;
animation: pendulum1 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}
.image-wrap.small .bulb2{
background:url(/img/bulb-2.1.png) no-repeat center center;
background-size:contain;
position:absolute;
z-index: 1;
width:144px;
height:418px;
left:36%;
top:21%;
z-index: 2;
animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}
.image-wrap.small .bulb3{
background:url(/img/bulb-3.png) no-repeat center center;
background-size:contain;
position:absolute;
width:72px;
height:309px;
left:32%;
top:266px;
z-index: 1;
animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}
.image-wrap.small .bulb1:hover{
}
.image-wrap.small .bulb2:hover{
}
.image-wrap.small .bulb3:hover{
}
@-webkit-keyframes
pendulum {
0%, 100% { transform: rotate(2deg); }
25%, 75% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
pendulum1 {
0%, 100% { transform: rotate(.6deg); }
25%, 75% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.2deg); }
}
@keyframes pendulum {
0%, 100% { transform: rotate(2deg); }
25%, 75% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
pendulum1 {
0%, 100% { transform: rotate(.6deg); }
25%, 75% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.2deg); }
}

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

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

04 10.2018
Эффект «живого фона» для сайта с помощью CSS

Мы выбрали лучшие 5 инфографических создателей, доступных в Интернете, для анализа их возможностей и планов.


26 04.2013
Эффект «живого фона» для сайта с помощью CSS

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


28 05.2017
Эффект «живого фона» для сайта с помощью CSS

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


19 03.2013
Эффект «живого фона» для сайта с помощью CSS

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close