Skip to main content

Unfolding 3D Thumbnails Effect

Lets create something extra in field of css and javascript.What about to unfold the image and see all the images in the normal jquery slider in 3D Thumbnail effects. It sounds really interesting. Lets have a look on it.Its effects are really of exelent quality.Jquery and css take this simple tutorial to a new level. Jquery function is performed when you click the thumbnail button.
We just need html code,css, jquery and attractive images and a little bit creativity.

Download

Html Code:


<section class="main">
    
    <div id="th-wrap" class="th-wrap">
     <img src="images/1.jpg"/> 
     <div class="th-inner">
      <ul>
       <li><a target="_blank" href="#"><img src="images/thumbs/1.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/2.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/3.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/4.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/5.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/6.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/7.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/8.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/9.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/10.jpg" /></a></li>
       <li class="th-thumb-current"><a target="_blank" href="#"><img src="images/thumbs/11.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/12.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/13.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/14.jpg" /></a></li>
       <li><a target="_blank" href="#"><img src="images/thumbs/15.jpg" /></a></li>
      </ul>
     </div>
    </div>

    <span id="th-view" class="th-toggle">Toggle Thumbs</span>
    
    <!-- Dummy slider elements -->
    <nav class="th-nav">
     <span class="th-prev">Previous</span>
     <span class="th-next">Next</span>
     <div class="th-navdots"></div> 
    </nav>
    
    <div class="th-click"></div>
    
   </section>

Image:


Css Code:

For an awesome effect you have to create a structure where all this result is shown. This is the css code for this special purpose.
From the above structure we also have to build structure for thumbnails.It is as follows.
The divisions with the class th-part will be the parts that will animate. Each one of the parts will have a height of half of the whole wrapper. 
.th-wrap .th-part {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}
This is the css when we click the button to toggel the view of 3D thumbnails. 
.th-wrap.th-active .th-part:nth-child(2),
.th-wrap.th-active .th-part:nth-child(3){
    transform: translateY(-150px) translateZ(0px) rotateX(0deg);
}
 
.th-wrap.th-active .th-part:nth-child(1),
.th-wrap.th-active .th-part:nth-child(4){
    transform: translateY(-150px);
}

Hope you will like this post.


source codrops
Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...
2 comments
Read more

OSI Model (Tutorial-6)

What is the OSI model ? Open Systems Interconnection model is fundamental to all communications between network devices.  Developed in 1974 by ISO after the American Department of Defence began using the TCP/IP suite of protocols.  Finally adopted in 1977. It is now the theoretical model for how communication takes place between network devices. What are the seven layers ? Layers OSI Model Layer 7  Layer 6  Layer 5  Layer 4  Layer 3  Layer 2  Layer 1
Post a Comment
Read more

CISCO System & Certifications

CISCO Systems Corporation: CISCO Systems is a large corporation that produces computer networking products and services. The Linksys brand of consumer networking products is also an owned subsidiary of CISCO Systems.
1 comment
Read more