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

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

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

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

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

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

Шаг 1. HTML

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

</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);

}

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

.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 секунды на старте.