Автор

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

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

Иногда вы просто хотите, чтобы на вашем сайте была оригинальная навигация и я предлагаю вашему вниманию интересное решение адаптивного 3D меню для сайта.


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

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


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

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close