Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 5, 2015 14:52
Show Gist options
  • Save anonymous/3f59b16ac6ff53c24e97 to your computer and use it in GitHub Desktop.
Save anonymous/3f59b16ac6ff53c24e97 to your computer and use it in GitHub Desktop.
Download ZIP
wBOBYo
Raw
index.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/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>
Raw
script.js
$(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);
});
}
});
Raw
style.css
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment