A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor’s interest towards your product, but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash.
impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!
The HTML
We start of with a simple HTML5 document that will be the backbone of today’s example.
index.html
Impressive CSS3 Product Showcase
#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;
</pre>
<p>As you can see in the rules above, and in the HTML fragment in the beginning of this tutorial, the #impress container is assigned a <strong>.impress-not-supported</strong> class. The class is removed only if the current browser supports the functionality required for the library to run successfully.</p>
<p>Now we need to style the individual slides. I will only include the classes for the first slide here, you can find the rest in <em>assets/css/styles.css</em>.</p>
<pre class="brush: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;
</pre>
<p>All that is left is for a quick JS snippet to initiate impress.js, and listen for clicks on the arrows.</p>
<h3>jQuery</h3>
<p>To initialize the impress library we need to call the method of the same name. This will also return a new object, with methods for showing the previous / next slides.</p>
<h4>script.js</h4>
<pre class="brush:js">$(function()
var imp = impress();
$('#arrowLeft').click(function(e)
imp.prev();
e.preventDefault();
);
$('#arrowRight').click(function(e)
imp.next();
e.preventDefault();
);
});</pre>
<p><em>With this our impress-ive product showcase is complete!</em></p>
<h3>Done!</h3>
<p>You can use this example for product and landing pages, feature showcases and with some randomization you could even turn it into an image gallery.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=RXhXzZ-ckrM:1xJRL2C1njQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=RXhXzZ-ckrM:1xJRL2C1njQ:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=RXhXzZ-ckrM:1xJRL2C1njQ:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=RXhXzZ-ckrM:1xJRL2C1njQ:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=RXhXzZ-ckrM:1xJRL2C1njQ:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=RXhXzZ-ckrM:1xJRL2C1njQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=RXhXzZ-ckrM:1xJRL2C1njQ:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=RXhXzZ-ckrM:1xJRL2C1njQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=RXhXzZ-ckrM:1xJRL2C1njQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=RXhXzZ-ckrM:1xJRL2C1njQ:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=qj6IDK7rITs" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/Tutorialzine/~4/RXhXzZ-ckrM" height="1" width="1" />|
<div><a href="http://tutorialzine.com/2012/02/css3-product-showcase/"><img src="http://cdn.tutorialzine.com/img/featured/1865.jpg" /></a></div>
<p> Impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation?}</p>
<p>Read more : <a target="_blank" href="http://feedproxy.google.com/~r/Tutorialzine/~3/RXhXzZ-ckrM/" title="Making an Impressive Product Showcase with CSS3">Making an Impressive Product Showcase with CSS3</a></p>
<div class="clear"></div>
</div><!-- .entry-content-->
<p class="filed categories alt-font tight">Posted in Uncategorized.</p>
<p class="comments-link"><a href="http://developersarena.com/web/2012/02/making-an-impressive-product-showcase-with-css3/#respond" rev="post-8970" >No comments</a></p>
<p class="by-line">
<span class="author vcard full-author">
<span class="by alt-font">By</span> <a class="url fn" href="http://developersarena.com/author/Martin Angelov/" title="View all posts by Martin Angelov">Martin Angelov</a> </span>
<span class="date full-date"><span class="ndash alt-font">–</span> <abbr class="published" title="2012-02-29T19:00">February 29, 2012</abbr></span>
</p><!--/by-line-->
<div id="post-comments-8970-target"></div>
<div class="clear"></div>
</div><!-- .post --> <div id="comments">
<div class="rule-major"><hr /></div>
<h2 class="h1 comments-title">0 Responses</h2>
<p>Stay in touch with the conversation, subscribe to the <a class="feed" rel="alternate" href="http://developersarena.com/web/2012/02/making-an-impressive-product-showcase-with-css3/feed/"><acronym title="Really Simple Syndication">RSS</acronym> feed for comments on this post</a>.</p>
<div id="respond-p8970">
<form action="http://developersarena.com/wp-comments-post.php" method="post" class="comment-form">
<p class="comment-form-comment tight">
<label class="h3" for="comment-p8970">Leave a Reply <em id="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link-p8970" href="/web/2012/02/making-an-impressive-product-showcase-with-css3/#respond-p8970" style="display:none;">Cancel</a></em></label>
<br class="lofi" />
<span class="comment-form-comment-area">
<textarea id="comment-p8970" name="comment" rows="8" cols="40"></textarea><br />
<em class="some-html-is-ok"><abbr title="You can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> ">Some HTML is OK</abbr></em>
</span>
</p>
<p class="comment-form-user-info tight">
<input type="text" id="author-p8970" name="author" value="" size="22" />
<label for="author-p8970">Name <em>(required)</em></label>
</p><!--/name-->
<p class="comment-form-user-info tight">
<input type="text" id="email-p8970" name="email" value="" size="22" />
<label for="email-p8970">Email <em>(required, but never shared)</em></label>
</p><!--/email-->
<p class="comment-form-user-info tight">
<input type="text" id="url-p8970" name="url" value="" size="22" />
<label title="Your website address" for="url-p8970">Web</label>
</p><!--/url-->
<p class="tight">
<input name="submit" type="submit" value="Post comment" />
<span class="comment-form-trackback">or, reply to this post via <a rel="trackback" href="http://developersarena.com/web/2012/02/making-an-impressive-product-showcase-with-css3/trackback/">trackback</a>.</span>
</p>
<input type='hidden' name='comment_post_ID' value='8970' id='comment_post_ID_p8970' />
<input type='hidden' name='comment_parent' id='comment_parent_p8970' value='0' />
</form>
</div>
</div><!--#comments-->
<div class="pagination-single">
<span class="previous">« <a href="http://developersarena.com/web/2012/02/enhance-your-website-with-the-fullscreen-api/" rel="prev">Enhance Your Website with the FullScreen API</a></span>
<span class="next"><a href="http://developersarena.com/web/2012/03/win-a-copy-of-digiseller-our-new-script/" rel="next">Win a Copy of DigiSeller, Our New Script!</a> »</span>
</div>
</div><!--#content-->
<hr class="lofi" />
<div id="sidebar">
<div id="carrington-subscribe" class="widget">
<h2 class="widget-title">Subscribe</h2>
<a class="feed alignright" title="RSS 2.0 feed for posts" rel="alternate" href="http://developersarena.com/feed/">
<img src="http://developersarena.com/wp-content/themes/carrington-blog/img/rss-button.gif" alt="Developers Arena latest posts" title="Developers Arena latest posts" />
</a>
</div><!--.widget-->
<div id="carrington-about" class="widget">
<div class="about">
<h2 class="widget-title">About Developers Arena</h2>
Developersarena.com is a place where we share our knowledge, thoughts. DA handles topics such as web technologies, mobile applications, technology, tips etc.<a class="more" href="http://developersarena.com/about/">more →</a> </div>
</div><!--.widget-->
<div id="primary-sidebar">
<div id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widget-title">Recent Posts</h2> <ul>
<li>
<a href="http://developersarena.com/web/2019/09/danville-metropolis-council-works-with-casino-12/">Danville Metropolis Council Works with Casino Legalization Effort</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/sign-up-for-the-actual-sat-knowing-you-re-in-a-5/">Sign up for the actual SAT knowing you’re in a position to register for taking the test.</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/coming-to-america-our-best-pupil-podcasts-around-3/">Coming To America: Our Best Pupil Podcasts Around Immigration</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/fine-martial-arts-styles-portfolio-suggestions-11/">Fine Martial arts styles Portfolio Suggestions Applicants may perhaps submit their very own portfolio 1 of 2 ways</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/when-must-my-scholar-take-the-posed/">When Must My Scholar Take the POSED?</a>
</li>
</ul>
<div class="clear"></div></div><div id="search-3" class="widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://developersarena.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form><div class="clear"></div></div> </div><!--#primary-sidebar-->
<div id="secondary-sidebar">
<div id="categories-3" class="widget widget_categories"><h2 class="widget-title">Categories</h2> <ul>
<li class="cat-item-none">No categories</li> </ul>
<div class="clear"></div></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">Tags</h2><div class="tagcloud"></div>
<div class="clear"></div></div><div id="recent-comments-3" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"></ul><div class="clear"></div></div> </div><!--#secondary-sidebar-->
<div class="clear"></div>
</div><!--#sidebar--> <div class="clear"></div>
</div><!-- .wrapper -->
</div><!-- #main -->
<hr class="lofi" />
<div id="footer" class="section">
<div class="wrapper">
<p id="generator-link">Proudly powered by <a href="http://wordpress.org/" rel="generator">WordPress</a> and <a href="http://carringtontheme.com" title="Carrington theme for WordPress">Carrington</a>.</p>
<p id="developer-link"><a href="http://crowdfavorite.com" title="Custom WordPress development, design and backup services." rel="developer designer">Carrington Theme by Crowd Favorite</a></p>
</div><!--.wrapper-->
</div><!--#footer -->
</div><!--#page-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19328731-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>