Объемная витрина продукции для сайта на CSS

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

Слоган и изображения будут помещены в середину элемента div с классом wrapper-item, для изображений будут соответствующие классы left и right ( относительно их положений на странице ). Все эти элементы будут заключены в контейнер.

<div id="container">
 <div class="wrapper-item">
 <div class="left">
 <img src="images/item/blogfolio.jpg" alt="Blogfolio">
 <img src="images/item/folo.jpg" alt="Folo">
 </div>
 <span class="text">Удивительные темы! <br/> Скачайте бесплатно! </span>
 <div class="right">
 <img src="images/item/grido.jpg" alt="Grido">
 <img src="images/item/itheme2.jpg" alt="Itheme2">
 </div>
 </div>
 <!-- to n wrapper-item -->
</div>

</div>

<span class="text">Удивительные темы! <br/> Скачайте бесплатно! </span>

</div>

</div>

С разметкой мы разобрались, переходим к следующему шагу.

3D витрина продукции для сайта с помощью CSS3 RUDEBOX

Шаг 2. CSS

Нам необходимо установить общие параметры для контейнера и угол поворота для изображений, это будет 35 и -35 градусов соответственно.

#container {
 margin: 0 auto;
 overflow: hidden;
 width: 1100px;
 max-width: 1100px;
 perspective: 2000px;
}

 .wrapper-item {
 position: relative;
 margin: 0 auto;
 width: 1000px;
 height: 400px;
 margin-bottom: 3em;
 transform-style: preserve-3d;
 }

 .left img,
 .rightright img {
 position: absolute;
 border-radius: 4px;
 box-shadow: 0px 10px 25px rgba(0,0,0,.3);
 }

 .left img {
 transform: rotate3d(0,1,0,-35deg);
 }

 .rightright img {
 transform: rotate3d(0,1,0,35deg);
 }

#container {

margin: 0 auto;

overflow: hidden;

width: 1100px;

max-width: 1100px;

perspective: 2000px;

}

.wrapper-item {

position: relative;

margin: 0 auto;

width: 1000px;

height: 400px;

margin-bottom: 3em;

transform-style: preserve-3d;

}

.left img,

.rightright img {

position: absolute;

border-radius: 4px;

box-shadow: 0px 10px 25px rgba(0,0,0,.3);

}

.left img {

transform: rotate3d(0,1,0,-35deg);

}

.rightright img {

transform: rotate3d(0,1,0,35deg);

}

Каждое изображение в витрине будет поддаваться бесконечному циклу анимации. Чтобы сделать ее ( анимацию ) более привлекательной мы добавим задержки для каждого изображения.

.left img:nth-child(1) {
 left: 4em;
 top: 8em;
 animation: bouncing-left 2s ease-in-out infinite alternate both;
}

.left img:nth-child(2) {
 left: -2em;
 top: 12em;
 animation: bouncing-left 2s ease-in-out infinite alternate both;
 animation-delay: .5s;
}

.rightright img:nth-child(1) {
 rightright: 4em;
 top: 8em;
 animation: bouncing-rightright 2s ease-in-out infinite alternate both;
}

.rightright img:nth-child(2) {
 rightright: -2em;
 top: 12em;
 animation: bouncing-rightright 2s ease-in-out infinite alternate both;
 animation-delay: .5s;
}

@keyframes bouncing-left {
 0% { transform: translateY(-10px) rotate3d(0,1,0,-35deg); }
 100% { transform: translateY(10px) rotate3d(0,1,0,-35deg); }
}

@keyframes bouncing-rightright {
 0% { transform: translateY(-10px) rotate3d(0,1,0,35deg); }
 100% { transform: translateY(10px) rotate3d(0,1,0,35deg); }
}

.left img:nth-child(1) {

left: 4em;

top: 8em;

animation: bouncing-left 2s ease-in-out infinite alternate both;

}

.left img:nth-child(2) {

left: -2em;

top: 12em;

animation: bouncing-left 2s ease-in-out infinite alternate both;

animation-delay: .5s;

}

.rightright img:nth-child(1) {

rightright: 4em;

top: 8em;

animation: bouncing-rightright 2s ease-in-out infinite alternate both;

}

.rightright img:nth-child(2) {

rightright: -2em;

top: 12em;

animation: bouncing-rightright 2s ease-in-out infinite alternate both;

animation-delay: .5s;

}

@keyframes bouncing-left {

0% { transform: translateY(-10px) rotate3d(0,1,0,-35deg); }

100% { transform: translateY(10px) rotate3d(0,1,0,-35deg); }

}

@keyframes bouncing-rightright {

0% { transform: translateY(-10px) rotate3d(0,1,0,35deg); }

100% { transform: translateY(10px) rotate3d(0,1,0,35deg); }

}

Нам необходимо добавить эффект вращения для элемента wrapper-item, вращение будет начинаться с 0 градусов до 35 градусов затем обратно с -35 градусов и до 0 градусов. Эта анимация будет повторятся только 3 раза, с задержкой в 3 секунды на старте.

.wrapper-item {
 position: relative;
 margin: 0 auto;
 width: 1000px;
 height: 400px;
 margin-bottom: 3em;
 transform-style: preserve-3d;
 transition: .5s ease-in-out;
 animation: rotating 10s ease-in-out 3 alternate both;
 animation-delay: 3s;
}

@keyframes rotating {
 0% { transform: rotate3d(0,1,0,0deg); }
 30% { transform: rotate3d(0,1,0,35deg); }
 60% { transform: rotate3d(0,1,0,-35deg); }
 100% { transform: rotate3d(0,1,0,0deg); }
}

.wrapper-item {

position: relative;

margin: 0 auto;

width: 1000px;

height: 400px;

margin-bottom: 3em;

transform-style: preserve-3d;

transition: .5s ease-in-out;

animation: rotating 10s ease-in-out 3 alternate both;

animation-delay: 3s;

}

@keyframes rotating {

0% { transform: rotate3d(0,1,0,0deg); }

30% { transform: rotate3d(0,1,0,35deg); }

60% { transform: rotate3d(0,1,0,-35deg); }

100% { transform: rotate3d(0,1,0,0deg); }

}

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Интересно:

Print article

Опубликовал admin 25.02.2013 в 19:19, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

333

Ваш браузер не поддерживает CSS3 3D Tрансформации
Именно это я и скажу клиенту когда сделаю ему сайт на CSS 3 и HTML5 — извините но ваш сайт будет работать в 1 или 2х браузерах.
- smotritel
  
  В умелых руках это можно все профиксить, уж такое желание впарить клиенту, и все будет работать)

Объемная витрина продукции для сайта на CSS

Шаг 1. HTML

Шаг 2. CSS

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

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Объемная витрина продукции для сайта на CSS

Шаг 1. HTML

Шаг 2. CSS

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

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи