Объемная витрина продукции для сайта на CSS
Создавая сайт целевой направленности, к примеру продажа книг, шаблонов или прочих материалов, вам необходимо выделить важную продукцию. Ну, к примеру, акционная продукция или хит продаж, и разместить это в шапке сайта. В данном уроке мы рассмотрим процесс создания замечательной, объемной витрины с продукцией для сайта с помощью jQuery. Основная идея состоит в том, что изображения парят в воздуха, раскачиваются со стороны в сторону и создают иллюзию зависания в воздухе. Давайте посмотрим, что у нас с этого получилось.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Витрина будет отображать не только продукцию но и слоган, который также будет парить вместе и с изображениями. Слоган будет располагаться в середине между изображений продукта. Эти изображения будут повернуты в вокруг оси у с углом поворота -35 градусов для левого изображения и 35 градусов для правого.
Шаг 1. HTML
Слоган и изображения будут помещены в середину элемента div с классом wrapper-item, для изображений будут соответствующие классы left и right ( относительно их положений на странице ). Все эти элементы будут заключены в контейнер.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
С разметкой мы разобрались, переходим к следующему шагу.
Шаг 2. CSS
Нам необходимо установить общие параметры для контейнера и угол поворота для изображений, это будет 35 и -35 градусов соответственно.
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 |
#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); } |
Каждое изображение в витрине будет поддаваться бесконечному циклу анимации. Чтобы сделать ее ( анимацию ) более привлекательной мы добавим задержки для каждого изображения.
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 |
.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 секунды на старте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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); } } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 25.02.2013 в 19:19, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |