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

Comments

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Windows 7 transformation pack for xp

As the windows 7 launched after that there are lot of screenshot available on the internet, There developer designed the transformation packs for xp to make it better lo0king like windows 7. There are some transformation packs for your xp. Download Vienna 2.5 – Windows 7 Transformation Pack (Mirror) Downloa d HFN Windows 7 Transformation Pack Download Windows 7 Transformation pack – NSFormation (Mirror) Download Vienna Transformation Pack v1