Все для веб-дизайнера
Эффект «живого фона» для сайта с помощью CSS
Наверняка вы встречали такой занимательный эффект как живые фотографии, когда фокус приведен только на один подвижный объект, такой эффект нельзя пройти стороной. Мы бы, сегодня, хотели рассказать и поделиться способом реализации такой функции для Вашего сайта, обратите внимание, что мы будем использовать только правила стилей, у нас не будут использованы различные функции скриптов, это позволит сделать такой эффект более гибкий и легким для отображения. Также мы заранее подготовили изображения.
Такой фон станет отличным дополнением для персональной страницы на котором будет отображена целевая информация или для станицы-заглушки. И так, давайте приступим.
Шаг 1. HTML
Для начала нам необходимо создать довольно-таки простую разметку, в которой у нас будет один контейнер, в котором будут заключены три слоя, в нашем случае у нас будет три слоя изображений, которые мы подключим в стилях:
|
1 2 3 4 5 6 |
<div class="image-wrap small"> <div class="background"></div> <div class="bulb1"></div> <div class="bulb2"></div> <div class="bulb3"></div> </div> |
Не забывайте, что нам нужно правильно подключить файлы со стилями, по этому указывайте правильные пути к Вашим исходным материалам на сервере.
Шаг 2. CSS
Самым важным элементом это будут стилизация, нам необходимо, для начала, задать общие параметры контейнера, затем мы подключаем изображения с присвоенными им правилами позиционирования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
.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); } } |
Как вы заметили мы подключили четыре изображения, три из которых это будут лампочки, которым мы задаем эффект трансформации по осям, а четвертое — фон, который будет создать эффект перспективы изображений.
Вот и все. Готово!
Интересно:
| Опубликовал admin 22.09.2014 в 12:11, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...