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 <a href="http://developersarena.com/category/apple/" rel="category tag">Apple</a>, <a href="http://developersarena.com/category/elgg/" rel="category tag">Elgg</a>, <a href="http://developersarena.com/category/freelancing/" rel="category tag">Freelancing</a>, <a href="http://developersarena.com/category/web/" rel="category tag">Web</a>, <a href="http://developersarena.com/category/world/" rel="category tag">World</a>.</p>
<p class="filed tags alt-font tight">Tagged with <a href="http://developersarena.com/tag/current/" rel="tag">current</a>, <a href="http://developersarena.com/tag/instant-upload/" rel="tag">instant-upload</a>, <a href="http://developersarena.com/tag/javascript/" rel="tag">JavaScript</a>, <a href="http://developersarena.com/tag/library/" rel="tag">library</a>, <a href="http://developersarena.com/tag/nexus/" rel="tag">nexus</a>, <a href="http://developersarena.com/tag/photos/" rel="tag">photos</a>, <a href="http://developersarena.com/tag/place/" rel="tag">place</a>, <a href="http://developersarena.com/tag/product/" rel="tag">product</a>, <a href="http://developersarena.com/tag/stage/" rel="tag">stage</a>.</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/inspiration/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/podcasts/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 cat-item-220"><a href="http://developersarena.com/category/android/" >Android</a> (751)
</li>
<li class="cat-item cat-item-35"><a href="http://developersarena.com/category/apple/" >Apple</a> (1,516)
</li>
<li class="cat-item cat-item-36"><a href="http://developersarena.com/category/business/" >Business</a> (1,894)
</li>
<li class="cat-item cat-item-115"><a href="http://developersarena.com/category/editorial/" >Editorial Pick</a> (377)
</li>
<li class="cat-item cat-item-30"><a href="http://developersarena.com/category/elgg/" >Elgg</a> (289)
</li>
<li class="cat-item cat-item-146"><a href="http://developersarena.com/category/freelancing/" >Freelancing</a> (635)
</li>
<li class="cat-item cat-item-11"><a href="http://developersarena.com/category/general/" >General</a> (5,835)
</li>
<li class="cat-item cat-item-22"><a href="http://developersarena.com/category/inspiration/" >Inspiration</a> (328)
</li>
<li class="cat-item cat-item-793"><a href="http://developersarena.com/category/javascript/" >JavaScript</a> (297)
</li>
<li class="cat-item cat-item-5"><a href="http://developersarena.com/category/podcasts/" >Podcasts</a> (298)
</li>
<li class="cat-item cat-item-42"><a href="http://developersarena.com/category/popular/" >Popular</a> (304)
</li>
<li class="cat-item cat-item-38"><a href="http://developersarena.com/category/social-media/" >Social Media</a> (938)
</li>
<li class="cat-item cat-item-265"><a href="http://developersarena.com/category/startups/" >Startups</a> (3,078)
</li>
<li class="cat-item cat-item-39"><a href="http://developersarena.com/category/technology/" >Technology</a> (5,809)
</li>
<li class="cat-item cat-item-1"><a href="http://developersarena.com/category/web/" >Web</a> (28,726)
</li>
<li class="cat-item cat-item-37"><a href="http://developersarena.com/category/web-design/" >Web Design</a> (714)
</li>
<li class="cat-item cat-item-367"><a href="http://developersarena.com/category/world/" >World</a> (836)
</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"><a href='http://developersarena.com/tag/amazon/' class='tag-link-206' title='673 topics' style='font-size: 9.4141414141414pt;'>Amazon</a>
<a href='http://developersarena.com/tag/apple-2/' class='tag-link-819' title='4,725 topics' style='font-size: 21.292929292929pt;'>apple</a>
<a href='http://developersarena.com/tag/apps/' class='tag-link-118' title='648 topics' style='font-size: 9.1313131313131pt;'>apps</a>
<a href='http://developersarena.com/tag/business-2/' class='tag-link-922' title='3,310 topics' style='font-size: 19.171717171717pt;'>business</a>
<a href='http://developersarena.com/tag/company/' class='tag-link-818' title='2,923 topics' style='font-size: 18.464646464646pt;'>company</a>
<a href='http://developersarena.com/tag/count/' class='tag-link-897' title='730 topics' style='font-size: 9.8383838383838pt;'>count</a>
<a href='http://developersarena.com/tag/entertainment/' class='tag-link-1270' title='945 topics' style='font-size: 11.535353535354pt;'>entertainment</a>
<a href='http://developersarena.com/tag/europe/' class='tag-link-939' title='646 topics' style='font-size: 9.1313131313131pt;'>europe</a>
<a href='http://developersarena.com/tag/facebook/' class='tag-link-82' title='2,062 topics' style='font-size: 16.20202020202pt;'>Facebook</a>
<a href='http://developersarena.com/tag/flickr/' class='tag-link-1088' title='829 topics' style='font-size: 10.686868686869pt;'>flickr</a>
<a href='http://developersarena.com/tag/francisco/' class='tag-link-1039' title='625 topics' style='font-size: 8.989898989899pt;'>francisco</a>
<a href='http://developersarena.com/tag/gadgets/' class='tag-link-1497' title='994 topics' style='font-size: 11.818181818182pt;'>gadgets</a>
<a href='http://developersarena.com/tag/image/' class='tag-link-4069' title='750 topics' style='font-size: 10.121212121212pt;'>image</a>
<a href='http://developersarena.com/tag/images/' class='tag-link-1387' title='893 topics' style='font-size: 11.111111111111pt;'>images</a>
<a href='http://developersarena.com/tag/internet/' class='tag-link-834' title='1,244 topics' style='font-size: 13.232323232323pt;'>internet</a>
<a href='http://developersarena.com/tag/iphone/' class='tag-link-197' title='1,083 topics' style='font-size: 12.383838383838pt;'>iPhone</a>
<a href='http://developersarena.com/tag/javascript/' class='tag-link-28936' title='3,557 topics' style='font-size: 19.59595959596pt;'>JavaScript</a>
<a href='http://developersarena.com/tag/king/' class='tag-link-830' title='5,250 topics' style='font-size: 22pt;'>king</a>
<a href='http://developersarena.com/tag/major/' class='tag-link-853' title='999 topics' style='font-size: 11.818181818182pt;'>major</a>
<a href='http://developersarena.com/tag/media/' class='tag-link-1272' title='918 topics' style='font-size: 11.252525252525pt;'>media</a>
<a href='http://developersarena.com/tag/microsoft/' class='tag-link-194' title='964 topics' style='font-size: 11.535353535354pt;'>Microsoft</a>
<a href='http://developersarena.com/tag/mobile/' class='tag-link-76' title='2,543 topics' style='font-size: 17.616161616162pt;'>Mobile</a>
<a href='http://developersarena.com/tag/music/' class='tag-link-274' title='564 topics' style='font-size: 8.2828282828283pt;'>Music</a>
<a href='http://developersarena.com/tag/news/' class='tag-link-84' title='1,162 topics' style='font-size: 12.808080808081pt;'>News</a>
<a href='http://developersarena.com/tag/people/' class='tag-link-959' title='814 topics' style='font-size: 10.545454545455pt;'>people</a>
<a href='http://developersarena.com/tag/popular-2/' class='tag-link-821' title='3,733 topics' style='font-size: 19.878787878788pt;'>popular</a>
<a href='http://developersarena.com/tag/president/' class='tag-link-920' title='677 topics' style='font-size: 9.4141414141414pt;'>president</a>
<a href='http://developersarena.com/tag/product/' class='tag-link-820' title='534 topics' style='font-size: 8pt;'>product</a>
<a href='http://developersarena.com/tag/share/' class='tag-link-3302' title='1,408 topics' style='font-size: 13.939393939394pt;'>share</a>
<a href='http://developersarena.com/tag/social/' class='tag-link-917' title='1,330 topics' style='font-size: 13.515151515152pt;'>social</a>
<a href='http://developersarena.com/tag/social-media-2/' class='tag-link-836' title='2,278 topics' style='font-size: 16.909090909091pt;'>social media</a>
<a href='http://developersarena.com/tag/software/' class='tag-link-157' title='686 topics' style='font-size: 9.5555555555556pt;'>software</a>
<a href='http://developersarena.com/tag/startups/' class='tag-link-28935' title='3,817 topics' style='font-size: 20.020202020202pt;'>Startups</a>
<a href='http://developersarena.com/tag/story/' class='tag-link-1258' title='995 topics' style='font-size: 11.818181818182pt;'>story</a>
<a href='http://developersarena.com/tag/tech/' class='tag-link-2144' title='608 topics' style='font-size: 8.7070707070707pt;'>tech</a>
<a href='http://developersarena.com/tag/technology-2/' class='tag-link-822' title='4,098 topics' style='font-size: 20.444444444444pt;'>technology</a>
<a href='http://developersarena.com/tag/twitter/' class='tag-link-111' title='978 topics' style='font-size: 11.676767676768pt;'>Twitter</a>
<a href='http://developersarena.com/tag/video/' class='tag-link-632' title='1,190 topics' style='font-size: 12.949494949495pt;'>video</a>
<a href='http://developersarena.com/tag/videos/' class='tag-link-766' title='619 topics' style='font-size: 8.8484848484848pt;'>videos</a>
<a href='http://developersarena.com/tag/watercooler/' class='tag-link-10602' title='576 topics' style='font-size: 8.4242424242424pt;'>watercooler</a>
<a href='http://developersarena.com/tag/web-2/' class='tag-link-825' title='3,546 topics' style='font-size: 19.59595959596pt;'>web</a>
<a href='http://developersarena.com/tag/web-design-2/' class='tag-link-827' title='1,703 topics' style='font-size: 15.070707070707pt;'>web design</a>
<a href='http://developersarena.com/tag/windows/' class='tag-link-848' title='566 topics' style='font-size: 8.2828282828283pt;'>windows</a>
<a href='http://developersarena.com/tag/world-2/' class='tag-link-877' title='3,686 topics' style='font-size: 19.878787878788pt;'>world</a>
<a href='http://developersarena.com/tag/year/' class='tag-link-899' title='793 topics' style='font-size: 10.40404040404pt;'>year</a></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>