octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>

<a id="view-code" href="http://codepen.io/virgilpana/pen/ByEqew" target="_blank">VIEW CODE</a>

<div id="window">
	<div id="header">
    	<div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>       
           
    <div class="thumbs">    
	    <div class="thumb">
        <p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
        	<p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
	        <p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
        	<p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
    	    <p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
	            <p>
              <span></span>
               <span></span>
            </p>
        </div>
        <div class="thumb">
            <p>
              <span></span>
            <span></span>
            </p>
        </div>
             
    </div>
    
    <div id="bootstrap-carousel">
        <div class="slides">                                            
           
            <div class="slide">                         
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>
                </g>
                </svg>                 
                <p>
                	<strong></strong>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>                    	                 	
            </div>
            
            <div class="slide">  
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>
                </g>
                </svg> 
                
                <p>
                	<strong></strong>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
                     	
            </div>
            <div class="slide">                         
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>
                </g>
                </svg>                 
                <p>
                	<strong></strong>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>                    	                 	
            </div>
            
            <div class="slide">  
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>
                </g>
                </svg> 
                
                <p>
                	<strong></strong>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
                     	
            </div>
            
            <div class="slide">  
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="193.5px" height="179.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">

                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>                    
                </svg>
                
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="193.5px" height="179.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">

                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>                    
                </svg>
                
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="193.5px" height="179.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">

                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>                    
                </svg> 
           
            </div>
            
            <div class="slide">                         
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>
                </g>
                </svg>                 
                <p>
                	<strong></strong>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>                    	                 	
            </div>
            
             
            
            <div class="slide">  
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z M20.6,72H9.8c-0.6,0-1.1-0.5-1.1-1.1V58.3l16.4-16L36,53.6L20.6,71.9
                        C20.6,71.9,20.6,72,20.6,72z M84.2,70.9c0,0.6-0.5,1.1-1.1,1.1H25.2l33-39.4l26,28.8V70.9z M84.2,56L59.5,28.7
                        c-0.3-0.4-0.8-0.6-1.3-0.6c0,0,0,0,0,0c-0.5,0-1,0.2-1.3,0.6L38.3,50.8L26.5,38.5c-0.3-0.3-0.8-0.5-1.3-0.6c-0.5,0-0.9,0.2-1.3,0.5
                        L8.8,53.3V9.8c0-0.6,0.5-1.1,1.1-1.1h73.3c0.6,0,1.1,0.5,1.1,1.1V56z M39.3,17c-4.8,0-8.8,3.9-8.8,8.8c0,4.8,3.9,8.8,8.8,8.8
                        s8.8-3.9,8.8-8.8C48.1,20.9,44.2,17,39.3,17z M39.3,31c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2c2.9,0,5.2,2.3,5.2,5.2
                        S42.2,31,39.3,31z"/>
                </g>
                </svg> 
                
                <p>
                	<strong></strong>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
                     	
            </div>
            
        </div>
	</div>    
    
    <div id="espose">
        <p></p>
        <p></p>
        <p></p>
        <p></p>	
	</div>
    
<div id="loader">
  <div class="circle c1"></div>
  <div class="circle c2"></div>
  <div class="circle c3"></div>
  <div class="circle c4"></div>  
</div>
 
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/easing.js"></script>
            
          
!

CSS

            
              body{
	background:#384d67; 	
	text-align:center;
	font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#82b4eb;      
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:620px;
  left:50%;margin-left:-30px;
  z-index:200;
}
#view-code:hover{color:#fff}
#window{
	margin:45px auto 0;
	border-radius:6px;
	background:#234871;
	width:678px;
	height:549px;	
	overflow:hidden;
	position:relative;
}
#header{
	background:#82b4eb;
	height:33px;
	padding-left:18px;
}
#header .circle{
	background:#689cd4;
	border-radius:50%;
	float:left;
	width:12px;
	height:12px;
	margin-right:6px;
	margin-top:11px;
}

.thumbs{display:none;}
.thumb, .thumb p{  
  width: 226px;
  height: 172px;
  float: left;
  margin:0;  
  background: #e3e5e9;
}
#cloneWrap{
  width: 270px;
  height: 210px;
  position:absolute;
  top:0;
  left:0;
  border:none;
}
#cloneWrap p{position:static; width:100%; height:100%}
.floatingThumb{
  width: 226px;
  height: 172px;
}
.thumb:hover{cursor:pointer;}
.thumb p{
	position:relative;
	top:0;
	left:0;
	-webkit-transition: all 80ms ease-out;
		   -moz-transition: all 80ms ease-out;
		    -ms-transition: all 80ms ease-out;
		     -o-transition: all 80ms ease-out;
		        transition: all 80ms ease-out;
}
.thumb p.expand{
	background:#fff;
	width:270px;
	height:210px;	
	z-index:300;
	-webkit-transition: all 80ms ease-out;
		   -moz-transition: all 80ms ease-out;
		    -ms-transition: all 80ms ease-out;
		     -o-transition: all 80ms ease-out;
		        transition: all 80ms ease-out;
}

.thumb p.eq0, .slide.eq0{background:#4773a3}
.thumb p.expand.eq0{top:0;left:0;}
.thumb p.eq1, .slide.eq1{background:#fff}
.thumb p.expand.eq1{top:0;left:-20px;}
.thumb p.eq2, .slide.eq2{background:#cde9e3}
.thumb p.expand.eq2{top:0;left:-40px;}
.thumb p.eq3, .slide.eq3{background:#2f5885}
.thumb p.expand.eq3{top:-20px;left:0;}
.thumb p.eq4, .slide.eq4{background:#f0f7ff}
.thumb p.expand.eq4{top:-20px;left:-20px;}
.thumb p.eq5, .slide.eq5{background:#f28f8a}
.thumb p.expand.eq5{top:-20px;left:-40px;}
.thumb p.eq6, .slide.eq6{background:#6b9acd}
.thumb p.expand.eq6{top:-38px;left:0;}
.thumb p.eq7, .slide.eq7{background:#4773a3}
.thumb p.expand.eq7{top:-38px;left:-20px;}
.thumb p.eq8, .slide.eq8{background:#6b9acd}
.thumb p.expand.eq8{top:-38px;left:-40px;}



.thumb span{
  width:160px;
  position:absolute;
  bottom:45px;
  left:30px;
  border-radius:2px;
  height:7px;
  background:#fff;
  display:block;
}
.thumb span:nth-of-type(2){bottom:30px; width:150px;}
#bootstrap-carousel{
  display:none;
  width: 778px;
  height: 516px;
  position: absolute;
  top: 33px;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  
}
.slide.firstSlide{
    width: 576px;
  height: 411px;
  margin: 105px 0 0 50px;
 background:#4773a3; 
  opacity:0;
}
.slide.firstSlide.animate{
  width: 678px;
  height: 516px;
  margin:0; 
  opacity:1;
  -webkit-transition: all 200ms ease-out;
		   -moz-transition: all 200ms ease-out;
		    -ms-transition: all 200ms ease-out;
		     -o-transition: all 200ms ease-out;
		        transition: all 200ms ease-out;
}
.slide{
	width: 678px;
    height: 516px;
}
.slide strong, .slide span{
	height:18px;
	background:#6b9acd;
	border-radius:3px;
	display:block;	
	margin-bottom:30px;
}
.slide span{height:12px;margin-bottom:15px;}
.slide span:nth-of-type(3){width:150px;}
.slide p{float:left; width:280px;margin:190px 0 0 60px;opacity:0;}
.slide path{ fill:#6b9acd;}
.slide svg{opacity:0;}

.slide.eq0 svg{margin:110px 0 0 0; opacity:1;}
.slide.eq0 p{margin:194px 0 0 56px; opacity:1;}


.thumb p.eq0 span{background:#6b9acd;}
.thumb p.eq1 span{background:#d4e2f0;}
.thumb p.eq2 span{background:#7aaec3;}
.thumb p.eq3 span{background:#27496d;}
.thumb p.eq4 span{background:#7aa3d2;}
.thumb p.eq5 span{background:#fff;}
.thumb p.eq6 span{background:#8fb6e3;}

.slide.eq1 path, .slide.eq1 strong, .slide.eq1 span{fill:#d4e2f0; background:#d4e2f0;}
.slide.eq1 p{float:left; width:280px;margin:150px 0 0 60px; opacity:0;}
.slide.eq1 svg{margin:180px 0 0 0; opacity:0;}

.slide.eq2 p{float:right; width:280px;margin:190px 20px 0 0 ; }
.slide.eq2 path, .slide.eq2 strong, .slide.eq2 span{fill:#7aaec3; background:#7aaec3;}
.slide.eq2 svg{float: left; margin-left: 40px;}

.slide.eq3 p{float:left; width:280px;margin:110px 0 0 60px; }
.slide.eq3 path, .slide.eq3 strong, .slide.eq3 span{fill:#27496d; background:#27496d;}

.slide.eq4 path{fill:#7aa3d2;}
.slide.eq4 svg{margin:45px 0 0 13px;float:left;}
.slide.eq4 svg:nth-of-type(1){margin-left:35px;}
.slide.eq4 svg:nth-of-type(2){margin-top:319px;}

.slide.eq5 p{float:left; width:280px;margin:190px 0 0 60px; }
.slide.eq5 path, .slide.eq5 strong, .slide.eq5 span{fill:#fff; background:#fff;}

.slide.eq6 p{float:left; width:280px;margin:190px 0 0 60px; }
.slide.eq6 path, .slide.eq6 strong, .slide.eq6 span{fill:#cde9e3; background:#cde9e3;}

.slide.eq6 p{float:left; width:480px;margin:-100px 0 0 60px; }
.slide.eq6 path, .slide.eq6 strong, .slide.eq6 span{fill:#8fb6e3; background:#8fb6e3;}

#espose{
	position:absolute;
	bottom:20px;
	right:20px;
	width:26px;
	height:26px;	
	cursor:pointer;
	z-index:500;
  display:none;
}
#espose p{
  border: 2px solid #8fb6e3;
	width: 6px;
	height: 6px;
	margin: 0 3px 3px 0;
	float:left;
}

#loader{
  position:absolute;
  width:45px;
  height:30px;
  top:280px;
  left:50%;
  margin-left:-25px;
  display:none;
}
#loader .circle{
  background:#82b4eb;
  border-radius: 50%;  
  width: 12px;
  height: 12px;
  margin-right: 6px;
  position:absolute;
  left:0;
  top:0;
}
#loader .c1{
  top:6px;
  left:6px;
  width:0;
  height:0;
}
#loader.animate .c1{
  top:0;
  left:0;
  width:12px;
  height:12px;
}

#loader.animate .c2{left:15px;}
#loader .circle.c3{left:15px;}
#loader.animate .c3{left:30px;}
#loader .c4{left:30px;}
#loader.animate .c4{
  left:29px;
  top:6px;
  width:0;
  height:0;
}
#loader.animate .circle{
-webkit-transition: all 400ms ease-out;
	   -moz-transition: all 400ms ease-out;
		-ms-transition: all 400ms ease-out;
		 -o-transition: all 400ms ease-out;
			transition: all 400ms ease-out;
}
            
          
!

JS

            
              $(document).ready(function(){

	jQuery.easing.def = "easeOutQuad";	  
  
	var fullSlides = $('div.slide');
  var carouselScrollTop = 0;
  var scrollBy =516; 
  var isScrolling = 0;
  $(fullSlides).eq(0).clone().appendTo("#window").addClass('firstSlide');
  
   var loader = setInterval(function(){
      $('#loader').fadeIn().addClass('animate');
      setTimeout(function(){$('#loader').removeClass('animate');}, 400);     
  }, 500);
  
  setTimeout(function(){$("#loader").fadeOut();}, 2200);
  
  setTimeout(function(){     
    clearInterval(loader);
    $("#espose").fadeIn();
    $('.firstSlide').addClass('animate');
    setTimeout(function(){
    $("div.firstSlide").eq(0).find('p').animate({'margin-top':'194px', 'margin-left':'56px', 'opacity':'1'});
        $("div.firstSlide").eq(0).find('svg').animate({'margin-top':'110px', 'opacity':'1'});		
     }, 300);
    setTimeout(function(){
     $("#bootstrap-carousel").show();
     $("div.firstSlide").hide();
    }, 700);
  }, 2500);
       
	var carouselHeight = 0;
	$(fullSlides).each(function(){
		carouselHeight += scrollBy;
	});      
	$('div.slides').css('height', carouselHeight+"px");	
	$("#bootstrap-carousel").scroll(function() {				
		
    
    if($(this)[0].scrollTop > carouselScrollTop && isScrolling == 0){
      isScrolling = 1;  
      carouselScrollTop += scrollBy;        
        $(this).scrollTo(carouselScrollTop,500);
      setTimeout(function(){
          isScrolling = 0;          
        }, 500);
    }else if($(this)[0].scrollTop < carouselScrollTop && isScrolling == 0){
      isScrolling = 1;  
      carouselScrollTop -= scrollBy;        
        $(this).scrollTo(carouselScrollTop, 500);
      setTimeout(function(){
          isScrolling = 0;          
        }, 500);
    }
    
    
		if($(this)[0].scrollTop >= 355 && $(this)[0].scrollTop < 900){						
			$(fullSlides).eq(1).find('p').animate({'margin-top':'190px', 'opacity':'1'});
			$(fullSlides).eq(1).find('svg').animate({'margin-top':'110px', 'opacity':'1'});			
		}
		
		if($(this)[0].scrollTop >= 900 && $(this)[0].scrollTop < 1400){												
			$(fullSlides).eq(2).find('svg').animate({'margin-top':'110px', 'opacity':'1'});
			$(fullSlides).eq(2).find('p').animate({'margin-right':'60px', 'opacity':'1'});
      
		}				
		
		if($(this)[0].scrollTop >= 1400 && $(this)[0].scrollTop < 1900){											
			$(fullSlides).eq(3).find('svg').animate({'margin-top':'110px', 'opacity':'1'});			
			setTimeout(function(){$(fullSlides).eq(3).find('p').animate({'margin-top':'190px', 'opacity':'1'});}, 100);
		}
		
		if($(this)[0].scrollTop >= 1900 && $(this)[0].scrollTop < 2400){												
			$(fullSlides).eq(4).find('svg').animate({'margin-top':'152px', 'opacity':'1'});			
		}
		
		if($(this)[0].scrollTop >= 2400 && $(this)[0].scrollTop < 2900){						
			$(fullSlides).eq(5).find('p').animate({'margin-top':'190px', 'opacity':'1'});
			$(fullSlides).eq(5).find('svg').animate({'margin-top':'110px', 'opacity':'1'});
		}
		
		if($(this)[0].scrollTop >= 3050 && $(this)[0].scrollTop < 3612){															
			$(fullSlides).eq(6).find('p').animate({'margin-left':'102px', 'opacity':'1'});
		}
		
		if($(this)[0].scrollTop >= 100 && $(this)[0].scrollTop <= 500){															
			$("#espose p").css('border-color', '#82b4eb');	
		}else if($(this)[0].scrollTop >= 500 && $(this)[0].scrollTop <= 900){															
			$("#espose p").css('border-color', '#7aaec3');	
		}else if($(this)[0].scrollTop >= 1600 && $(this)[0].scrollTop <= 2100){															
			$("#espose p").css('border-color', '#82b4eb');	
		}
		else if($(this)[0].scrollTop >= 2100 && $(this)[0].scrollTop <= 2600){															
			$("#espose p").css('border-color', '#fff');	
		}
		
		
	});

  
	
	$('.thumb p').each(function(index, el){
		$(this).addClass("eq"+index);
		$(fullSlides).eq(index).addClass("eq"+index);
		
		$(this).click(function(){
      
      carouselScrollTop = scrollBy * index;   
      $(this).find('span').hide();
      setTimeout(function(){$('.thumb span').show();}, 400);
			$("#window").append("<div id='cloneWrap' class='thumb'></div>");
			var childOffset = $(this).offset();
			var parentOffset = $(this).parent().parent().offset();
			var childTop = childOffset.top - parentOffset.top;
			var childLeft = childOffset.left - parentOffset.left;
			var clone = $(this).clone();
			var top = childTop+33+"px";		
			var left = childLeft+"px";			
			
			$(clone)
			.addClass("floatingThumb eq"+index)			
			.appendTo("#cloneWrap");
			
			$("#cloneWrap")
			.css({'top': top, 'left': left})
			.animate({'width': '678px', 
			          'height': '516px', 
					  'top': '33px', 
					  'left': '0'}, 250,
					function(){		
						
						var scrolltop = 0;
						if(index == 0){ sctolltop = 0;}
						else if(index == 1){ sctolltop = 516;}
						else if(index == 2){ sctolltop = 1032;}
						else if(index == 3){ sctolltop = 1548;}
						else if(index == 4){ sctolltop = 2064;}
						else if(index == 5){ sctolltop = 2580;}
						else if(index == 6){ sctolltop = 3096;}												
						isScrolling = 1;
						$('#bootstrap-carousel').show().scrollTo(sctolltop,{duration:0});
						$('#cloneWrap').fadeOut(200, function(){$('#cloneWrap').remove()});	
						$('.thumbs').hide();	
						setTimeout(function(){isScrolling = 0;}, 100);
					});						
			
		});						
		
		
	}).hover(function(){
			$(this).addClass('expand');
		},function(){
			$(this).removeClass('expand');
	});
	
	
	$('#espose').click(function(){
		$('#bootstrap-carousel').fadeOut();
		$('.thumbs').fadeIn();	
	});
		
	
});

$.fn.scrollTo = function( target, options, callback ){
  if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
  var settings = $.extend({
    scrollTarget  : target,
    offsetTop     : 50,
    duration      : 500,
    easing        : 'swing'
  }, options);
  return this.each(function(){
    var scrollPane = $(this);
    var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
    var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
    scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){
      if (typeof callback == 'function') { callback.call(this); }
    });
  });
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console