Based on Dribbble design: https://dribbble.com/shots/1992641--UX-Grid-size-switch
A Pen by Virgil Pana on CodePen.
<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/wBOBYo" 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 id="grid-selector"> | |
<div id="viewCarousel"></div> | |
<div id="viewGrid" class="active"> | |
<p></p> | |
<p></p> | |
<p></p> | |
<p></p> | |
</div> | |
</div> | |
<div id="headline"> | |
<p></p> | |
<p class="short"></p> | |
</div> | |
<div class="thumbs"> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
<div id="carousel"> | |
<div class="innerCarousel"> | |
<div> | |
</div> | |
<div> | |
<p class="current"> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
<div> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
<div> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
<div> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
<div> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
<div> | |
<p> | |
<span></span> | |
<span class="short"></span> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
$(document).ready(function(){ | |
$('#viewCarousel').click(function(){ | |
if($(this).hasClass('active')) return; | |
$(this).addClass("active"); | |
$("#viewGrid").removeClass("active"); | |
setCarousel(); | |
$('.thumbs p').eq(0).clone().addClass("floating-thumb").appendTo("#window") | |
$('.thumbs').fadeOut(300); | |
setTimeout(function(){ | |
$('.floating-thumb').addClass('animate'); | |
$("#carousel").delay(200).fadeIn(200, function(){$('.floating-thumb').remove();}); | |
}, 150); | |
}); | |
$('#viewGrid').click(function(){ | |
if($(this).hasClass('active')) return; | |
$(this).addClass("active"); | |
$("#viewCarousel").removeClass("active"); | |
$("#carousel").fadeOut(200, function(){resetCarousel();}); | |
$("<p class='floating-thumb animate'><span></span><span class='short'></span></p>").appendTo("#window"); | |
$('.thumbs').show(); | |
var parentpos = $('#window').offset(); | |
var childpos = $('.thumbs p').eq(currentSlide-1).offset(); | |
$('.thumbs').hide(); | |
$('.floating-thumb').removeClass('animate').css({'top':(childpos.top - parentpos.top) - 16+ "px", 'left': (childpos.left - parentpos.left)+"px", "transition": "300ms cubic-bezier(0,.93,.33,.99)", 'width': '155px', 'height':"60px", "padding-top":"121px"}); | |
$('.thumbs').delay(300).fadeIn(200, function(){$('.floating-thumb').remove()}); | |
}); | |
/* ---- Image Gallery Carousel ---- */ | |
var carousel = $('#carousel .innerCarousel'); | |
var carouselSlideWidth = 337; | |
var currentSlide = 1; | |
var isAnimating = false; | |
var carouselSlides = $('.innerCarousel div'); | |
setCarousel(); | |
function resetCarousel(){ | |
$(carouselSlides).find('p').removeClass('current').eq(0).addClass('current'); | |
$("#carousel .innerCarousel").css('left','-168px'); | |
currentSlide = 1; | |
} | |
function setCarousel(){ | |
// building the width of the casousel | |
var carouselWidth = 0; | |
$('#carousel div').each(function(){ | |
carouselWidth += carouselSlideWidth; | |
}); | |
$(carousel)[0].style = ""; | |
$(carousel).css('width', carouselWidth); | |
// Load Next Image | |
$(carouselSlides).eq(currentSlide).prev().find('p').unbind( "click" ).click(function(){ | |
if($(this).hasClass('current')){return;} | |
var currentLeft = Math.abs(parseInt($(carousel).css("left"))); | |
var newLeft = currentLeft - carouselSlideWidth; | |
if(isAnimating === true){return;} | |
$(carousel).css({'left': "-" + newLeft + "px", | |
"transition": "500ms cubic-bezier(0,.93,.33,.99)" | |
}); | |
isAnimating = true; | |
$(this).addClass("current"); | |
$(carouselSlides).eq(currentSlide).find('p')[0].className =""; | |
setTimeout(function(){ | |
isAnimating = false; | |
currentSlide--; | |
setCarousel(); | |
}, 500); | |
}); | |
$(carouselSlides).eq(currentSlide).next().find('p').unbind( "click" ).click(function(){ | |
if($(this).hasClass('current')){return;} | |
var currentLeft = Math.abs(parseInt($(carousel).css("left"))); | |
var newLeft = currentLeft + carouselSlideWidth; | |
if(isAnimating === true){return;} | |
$(this).addClass("current"); | |
$(carouselSlides).eq(currentSlide).find('p')[0].className =""; | |
$(carousel).css({'left': "-" + newLeft + "px", | |
"transition": "500ms cubic-bezier(0,.93,.33,.99)" | |
}); | |
isAnimating = true; | |
setTimeout(function(){ | |
isAnimating = false; | |
currentSlide++; | |
setCarousel(); | |
}, 500); | |
}); | |
} | |
}); |
body{ | |
background:#5298fc; | |
text-align:center; | |
font-family: "Open Sans", sans-serif; | |
} | |
#view-code{ | |
color:#fff; | |
opacity:0.7; | |
font-size:14px; | |
text-transform:uppercase; | |
font-weight:700; | |
text-decoration:none; | |
position:absolute;top:700px; left:50%;margin-left:-35px; | |
} | |
#view-code:hover{opacity:1;} | |
#window{ | |
margin:30px auto 0; | |
border-radius:6px; | |
background:#fff; | |
width:675px; | |
height:620px; | |
overflow:hidden; | |
position:relative; | |
} | |
#header{ | |
background:#e3e5e9; | |
height:33px; | |
padding-left:18px; | |
} | |
#header .circle{ | |
background:#9fa2a8; | |
border-radius:50%; | |
float:left; | |
width:12px; | |
height:12px; | |
margin-right:6px; | |
margin-top:11px; | |
} | |
.thumbs{ padding:10px 50px 30px 70px; } | |
.thumbs p, .thumbs p.floating-thumb{ | |
background: #e3e5e9; | |
width: 155px; | |
height: 60px; | |
margin: 30px 30px 0 0; | |
border-radius: 4px; | |
float: left; | |
padding-top: 121px; | |
} | |
.floating-thumb{ | |
background: #e3e5e9; | |
width: 155px; | |
height: 60px; | |
border-radius: 4px; | |
float: left; | |
padding-top: 121px; | |
position:absolute; | |
top: 156px; | |
left: 70px; | |
} | |
.floating-thumb.animate{ | |
width:303px; | |
height:80px; | |
margin-top:20px; | |
padding-top: 326px; | |
top: 146px; | |
left: 186px; | |
-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99); | |
-moz-transition: all 400ms cubic-bezier(0,.93,.33,.99); | |
-ms-transition: all 400ms cubic-bezier(0,.93,.33,.99); | |
-o-transition: all 400ms cubic-bezier(0,.93,.33,.99); | |
transition: all 400mscubic-bezier(0,.93,.33,.99); | |
} | |
.thumbs p span, p.floating-thumb span{ | |
display:block; | |
height:10px; | |
margin:10px 20px; | |
background:#d2d4d9; | |
border-radius:2px; | |
} | |
.thumbs p span.short, p.floating-thumb span.short{width:50px;} | |
.thumbs p:hover{ | |
background:#dfe0e5; | |
cursor:pointer; | |
-webkit-transition: all 100ms ease-out; | |
-moz-transition: all 100ms ease-out; | |
-ms-transition: all 100ms ease-out; | |
-o-transition: all 100ms ease-out; | |
transition: all 100ms ease-out; | |
} | |
#headline{padding:39px 50px 0px 70px;} | |
#headline p{ | |
width:380px; | |
margin:10px 0; | |
height:15px; | |
background:#9fa2a8; | |
border-radius:3px; | |
} | |
#headline p.short{width:220px;} | |
#grid-selector{ | |
width:100px; | |
position:absolute; | |
top: 92px; | |
right: 79px; | |
} | |
#viewCarousel{ | |
background:#e3e5e9; | |
width:20px; | |
height:20px; | |
float:right; | |
border-radius:1px; | |
} | |
#viewCarousel:hover{ | |
cursor:pointer; | |
} | |
#viewCarousel:hover, #viewGrid:hover p{ | |
cursor:pointer; | |
background:#cacdd1; | |
} | |
#viewCarousel.active, #viewGrid.active p{ | |
color:#5298fc; | |
} | |
#viewGrid{ | |
width:22px; | |
height:20px; | |
float:right; | |
margin-top:-1px; | |
margin-right:5px; | |
} | |
#viewGrid p{ | |
background: #e3e5e9; | |
width: 9px; | |
height: 9px; | |
float: right; | |
border-radius: 1px; | |
margin: 1px; | |
} | |
#viewGrid.active p, #viewCarousel.active{ | |
background:#9fa2a8; | |
} | |
#carousel{ | |
overflow:hidden; | |
position:relative; | |
height:488px; | |
margin-top: 25px; | |
display:none; | |
position:absolute; | |
top:121px; | |
left:0; | |
width:675px; | |
} | |
#carousel .innerCarousel{ | |
position:absolute; | |
top:0; | |
left:-168px; | |
} | |
#carousel .innerCarousel div{ | |
width: 337px; | |
height:448px; | |
text-align:center; | |
float:left; | |
} | |
#carousel .innerCarousel div p{ | |
background: #e3e5e9; | |
width: 220px; | |
height: 73px; | |
margin: 30px auto 0 auto; | |
border-radius: 4px; | |
padding-top: 300px; | |
margin-top: 38px; | |
-webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
-moz-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
-ms-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
-o-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
} | |
#carousel .innerCarousel div p:hover{cursor:pointer;} | |
#carousel .innerCarousel div p.current:hover{cursor:normal;} | |
#carousel .innerCarousel div p.current{ | |
width:303px; | |
height:80px; | |
margin-top:20px; | |
padding-top: 326px; | |
-webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
-moz-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
-ms-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
-o-transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
transition: all 300ms cubic-bezier(0,.93,.33,.99); | |
} | |
#carousel .innerCarousel span, | |
p.floating-thumb.animate span{ | |
height:10px; | |
display:block; | |
margin:10px 30px; | |
height:12px; | |
background:#d2d4d9; | |
border-radius:3px; | |
} | |
#carousel .innerCarousel span.short, | |
p.floating-thumb.animate span.short{width:170px;} | |
.title{ | |
position:absolute; | |
top:152px; | |
left:0; | |
width:100%; | |
height:60px; | |
overflow:hidden; | |
-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms; | |
-moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms; | |
-ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms; | |
-o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms; | |
transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms; | |
} |
Based on Dribbble design: https://dribbble.com/shots/1992641--UX-Grid-size-switch
A Pen by Virgil Pana on CodePen.