Динамичная витрина товаров на CSS3

12-10-22 root Css CSS, jQuery 2

В этом уроке мы сделаем красивую и динамичную витрину для показа продуктов посетителям сайта.

Витрина товаров — это страница, на которой посетители знакомятся с предложениями сайта, на ней показываются картинки и описание. Она призвана привлекать внимание посетителей и чем она красивей, тем больше вероятность заинтересовать посетителя. Сделать нашу витрину такой поможет небольшая javaScript библиотека impress.js и CSS3.

HTML

Начнем с html разметки нашей страницы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>

        <!-- Google Webfonts and stylesheet -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

		<div id="impress">

			<!-- Здесь будут слайды -->

		</div>

		<a id="arrowLeft"><</a>
		<a id="arrowRight">></a>

        <!-- JavaScript includes -->
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="assets/js/impress.js"></script>
		<script src="assets/js/script.js"></script>

    </body>
</html>

Каждый слайд нашей витрины будет состоять из трёх частей: текста, заголовка и картинки. Расположение этих элементов для каждого слайда будет различным.

impress.js

Библиотека поддерживает следующие аттрибуты: data-x, data-y, data-z — перемещение в трехмерном пространстве; data-rotate, data-rotate-x, data-rotate-y — вращение вокруг определенной оси; data-scale — масштабирование.

Разметка наших слайдов будет такой:

<div id="intro" data-x="0" data-y="0">
	<h2>Introducing Galaxy Nexus</h2>
	<p>Android 4.0<br /> Super Amoled 720p Screen<br />
	<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>

<div id="simplicity" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
	<h2>Simplicity in Android 4.0</h2>
	<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
	<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<div id="connect" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
	<h2>Connect & Share</h2>
	<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
	<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>

<div id="upload" data-x="-200" data-y="1500" data-rotate="180">
	<h2>Instant Upload</h2>
	<p>Your photos upload themselves with Instant Upload, which makes ..</p>
	<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>

<div id="music" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
	<h2>Jam on with Google Music</h2>
	<p>Google Music makes discovery, purchase, and listening effortless and..</p>
	<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>

CSS

/*----------------------------
	Styling the presentation
-----------------------------*/

#impress:not(.impress-not-supported) .step{
	opacity:0.4;
}

#impress .step{
	width:700px;
	height: 600px;
	position:relative;
	margin:0 auto;

	-moz-transition:1s opacity;
	-webkit-transition:1s opacity;
	transition:1s opacity;
}

#impress .step.active{
	opacity:1;
}

#impress h2{
	font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
	color:#444648;
	position:absolute;
	z-index:10;
}

#impress p{
	font: normal 18px/1.3 'Open Sans', sans-serif;
	color:#27333f;
	position:absolute;
	z-index:10;
}

#impress img{
	position:absolute;
	z-index:1;
}

Обратите внимание, что элемент, содержащий нашу витрину сочетает в себе id #impress и класс .impress-not-supported. Класс удаляется, если браузер поддерживает функции библиотеки.

Теперь нам необходимо задать стили CSS для всех слайдов, ниже приведен стиль первого, остальные — в исходниках.

/*----------------------------
	Slide 1 - Intro
-----------------------------*/

#impress #intro{
	width: 500px;
}

#intro h2{
	text-align: center;
    width: 100%;
}

#intro p{
	font-size: 22px;
    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#intro img{
	top: 120px;
}

jQuery

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

$(function(){

	var imp = impress();

	$('#arrowLeft').click(function(e){
		imp.prev();
		e.preventDefault();
	});

	$('#arrowRight').click(function(e){
		imp.next();
		e.preventDefault();
	});

});

Все готово!

Смотрите также

2 Комментария

chupok says:

18.03.2013 в 11:22 пп

Отличный скрипт! Шикарная витрина! Огромное спасибо разработчикам!
Вот только одна проблема — вечная — IE. Жаль, что здесь это дело не пашет. Даже в девятке. Хотя, ежель какие хаки прописать в стилях… Сам в принципе CSS отлично знаю, по-тихому на 3-ий уровень перехожу, в JQuery поверхностные знания. Попробую, что-нибудь сделать.
Но может у кого есть готовые решения?

Ответить
Александр says:

19.02.2015 в 12:21 дп

Здравствуйте! объясните пожалуйста по порядку как добавить эту витрину на сайт. спасибо.

Ответить

ezcode