A Pen by Stan Williams on CodePen.
Created
July 16, 2018 09:20
-
-
Save stanwmusic/d8942df4c0fffcebdbd71d445ecd4db7 to your computer and use it in GitHub Desktop.
Shuffle js bootstrap portfolio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row text-center"> | |
<div class="col-md-12 text-center pb20"> | |
<h2>Take a Look at | |
<br> | |
<strong>Some of Our Work</strong> | |
</h2> | |
<p class="lead">Wide range of | |
<span class="color">successful</span> digital and print projects.</p> | |
</div> | |
<div class="col-md-12"> | |
<div class="col"> | |
<div class="btn-group vossen-portfolio-filters" data-toggle="buttons"> | |
<label class="btn btn-primary active"> | |
<input type="radio" name="shuffle-filter" value="all" checked="checked" />All</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="shuffle-filter" value="nature" />Nature</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="shuffle-filter" value="fruit" />Fruit</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="shuffle-filter" value="architecture" />Architecture</label> | |
</div> | |
</div> | |
</div> | |
<div class="my-shuffle"> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["nature"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Wunderkind</h4> | |
<p>Branding</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=882e851a008e83b7a80d05bdc96aa817" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["nature"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>iWatch App</h4> | |
<p>Digital</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/photo-1484402628941-0bb40fc029e7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=6237e62a10fa079d99b088b0db0144ac" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-12 image-item" data-groups="["nature"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Wunder Hero</h4> | |
<p>Branding</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=86dc2dcb74588b338dfbb15d959c5037" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-md-8 col-sm-6 image-item" data-groups="["architecture"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Thom Business Cards</h4> | |
<p>Branding & Digital</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=7ab1744fe016fb39feb2972244246359" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["nature","architecture"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Label Mockup</h4> | |
<p>Print Category</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/photo-1416184008836-5486f3e2cf58?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=601&h=676&fit=crop&s=5f1f1ffba05979d4248cc16d8eb82f0a" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["nature"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Letter Mockup</h4> | |
<p>Print Category</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=57a00aabcfaa1b04fd268ea3ad4a4cbb" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["nature"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Boxed Cards</h4> | |
<p>Print Work</p> | |
</div> | |
<div class="item-image"> | |
<img alt="#" src="https://images.unsplash.com/photo-1473175494278-d83ed8459089?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1208&h=338&fit=crop&s=fd1cf1e8eddf88ef87015314f85ce3fb" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["nature"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Thanks Letter</h4> | |
<p>Branding</p> | |
</div> | |
<div class="item-image"> | |
<img alt="product" src="https://images.unsplash.com/photo-1434144893279-2a9fc14e9337?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=d2f930bbb91de7e19e6436f5b03897b0" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<!-- Portfolio Item --> | |
<div class="col-lg-4 col-md-4 col-sm-6 image-item" data-groups="["fruit"]"> | |
<div class="portfolio-item"> | |
<div class="item-caption"> | |
<h4>Flying Mac</h4> | |
<p>Branding</p> | |
</div> | |
<div class="item-image"> | |
<img alt="product" src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=eda14f45e94e9024f854b1e06708c629" | |
obj.alt="obj.alt" /> | |
</div> | |
</div> | |
</div> | |
<div class="col-lg-4 col-md-4 col-sm-4 my-sizer-element"></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Shuffle = window.Shuffle; | |
var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), { | |
itemSelector: '.image-item', | |
sizer: '.my-sizer-element', | |
buffer: 1, | |
}); | |
window.jQuery('input[name="shuffle-filter"]').on('change', function (evt) { | |
var input = evt.currentTarget; | |
if (input.checked) { | |
myShuffle.filter(input.value); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.1.1/shuffle.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* default styles so shuffle doesn't have to set them (it will if they're missing) */ | |
.my-shuffle { | |
position: relative; | |
overflow: hidden; | |
width: 100%; | |
} | |
/* Make vertical gutters the same as the horizontal ones */ | |
/* .image-item { | |
margin-bottom: 30px; | |
} */ | |
/* Ensure images take up the same space when they load */ | |
/* https://vestride.github.io/Shuffle/images */ | |
.aspect { | |
position: relative; | |
width: 100%; | |
height: 0; | |
padding-bottom: 100%; | |
overflow: hidden; | |
} | |
.aspect__inner { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
.aspect--16x9 { | |
padding-bottom: 56.25%; | |
} | |
.aspect--9x80 { | |
padding-bottom: calc(112.5% + 30px); | |
} | |
.aspect--32x9 { | |
padding-bottom: calc(28.125% - 8px); | |
} | |
.image-item img { | |
display: block; | |
width: 100%; | |
max-width: none; | |
height: 100%; | |
object-fit: cover; | |
} | |
[data-toggle=buttons]>.btn input[type=checkbox], [data-toggle=buttons]>.btn input[type=radio], [data-toggle=buttons]>.btn-group>.btn input[type=checkbox], [data-toggle=buttons]>.btn-group>.btn input[type=radio] { | |
position: absolute; | |
clip: rect(0,0,0,0); | |
pointer-events: none; | |
} | |
/*//////////////////////////////////////// | |
// Portfolio | |
///////////////////////////////////////*/ | |
.portfolio { | |
position: relative; | |
width: 100%; | |
float: left; | |
padding: 0; | |
} | |
@media all and (max-width: 767px) { | |
.portfolio { | |
padding: 0 9px; | |
} | |
} | |
.vossen-portfolio-filters { | |
padding: 0; | |
margin-bottom: 20px; | |
} | |
.vossen-portfolio-filters .btn { | |
display: inline-block; | |
cursor: pointer; | |
text-transform: capitalize; | |
font-family: "Montserrat", sans-serif; | |
font-weight: 400; | |
font-size: 11px; | |
letter-spacing: 1px; | |
line-height: 3; | |
text-transform: uppercase; | |
color: #888; | |
background-color: #f5f5f5; | |
padding: 7px 30px; | |
margin: 0 1.1px; | |
border-radius: 4px; | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
box-shadow: none; | |
} | |
.vossen-portfolio-filters .btn:first-child { | |
border-radius: 100px 0 0 100px; | |
padding-left: 34px; | |
} | |
.vossen-portfolio-filters .btn:last-child { | |
border-radius: 0 100px 100px 0; | |
padding-right: 34px; | |
} | |
@media all and (max-width:992px) { | |
.vossen-portfolio-filters .btn { | |
margin: 3px 1.1px; | |
} | |
.vossen-portfolio-filters .btn:first-child, | |
.vossen-portfolio-filters .btn:last-child { | |
border-radius: 4px; | |
} | |
} | |
.vossen-portfolio-filters .btn.active { | |
cursor: default; | |
color: #fff; | |
opacity: 1; | |
background-color: #07aaa5; | |
} | |
/* Portfolio Reveal */ | |
.my-shuffle > div { | |
padding: 0 10px; | |
opacity: 0; | |
transition: opacity .5s, padding-top .5s; | |
-moz-transition: opacity .5s, padding-top .5s; | |
-webkit-transition: opacity .5s, padding-top .5s; | |
} | |
.my-shuffle > div.reveal { | |
opacity: 1; | |
} | |
.my-shuffle .portfolio-item { | |
transition: transform .4s; | |
-moz-transition: transform .4s; | |
-webkit-transition: transform .4s; | |
transform: translateY(20%); | |
-moz-transform: translateY(20%); | |
-webkit-transform: translateY(20%); | |
} | |
.my-shuffle .reveal .portfolio-item { | |
transform: translateY(0); | |
-moz-transform: translateY(0); | |
-webkit-transform: translateY(0); | |
} | |
.portfolio-item { | |
position: relative; | |
z-index: 1; | |
overflow: hidden; | |
/* margin-bottom: 19px; */ | |
border-radius: 2px; | |
} | |
.container-fluid .portfolio-item { | |
border-radius: 0; | |
} | |
.item-caption { | |
position: absolute; | |
width: 100%; | |
height: auto; | |
z-index: 2; | |
color: #fff; | |
top: 50%; | |
-webkit-transition: opacity 0.5s ease, transform 0.3s ease; | |
-moz-transition: opacity 0.5s ease, transform 0.3s ease; | |
transition: opacity 0.5s ease, transform 0.3s ease; | |
opacity: 0; | |
} | |
.portfolio-item:hover .item-caption { | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
transform: translateY(-50%); | |
-webkit-transition-delay: .25s; | |
-moz-transition-delay: .25s; | |
transition-delay: .25s; | |
opacity: 1; | |
} | |
.item-caption { | |
-webkit-transform: perspective(600px); | |
-moz-transform: perspective(600px); | |
transform: perspective(600px); | |
} | |
@media all and (max-width: 990px) { | |
.item-caption, | |
.portfolio-item:hover .item-caption { | |
position: absolute; | |
width: 100%; | |
height: auto; | |
top: auto; | |
bottom: 20px; | |
-webkit-transition: opacity 0.5s ease, transform 0.3s ease; | |
-moz-transition: opacity 0.5s ease, transform 0.3s ease; | |
transition: opacity 0.5s ease, transform 0.3s ease; | |
-webkit-transform: translateY(0); | |
-moz-transform: translateY(0); | |
transform: translateY(0); | |
opacity: 1; | |
} | |
} | |
.item-caption h4 { | |
font-family: "Montserrat", sans-serif; | |
font-size: 16px; | |
font-weight: 700; | |
margin: 13px auto 8px auto; | |
color: #fff; | |
} | |
.item-caption p { | |
font-size: 14px; | |
font-weight: 400; | |
line-height: 1; | |
margin: 8px auto; | |
color: #ccc; | |
} | |
.item-image { | |
-webkit-transition: transform 0.4s; | |
-moz-transition: transform 0.4s; | |
transition: transform 0.4s; | |
-webkit-transform: perspective(600px); | |
-moz-transform: perspective(600px); | |
transform: perspective(600px); | |
} | |
.portfolio-item:hover .item-image { | |
-webkit-transform: scale(1.08) rotate(0.1deg); | |
-moz-transform: scale(1.08) rotate(0.1deg); | |
transform: scale(1.08) rotate(0.1deg); | |
} | |
.portfolio-item .item-image:after { | |
content: ''; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
z-index: 2; | |
background-color: #191a1c; | |
opacity: 0; | |
transition: opacity 0.6s; | |
-moz-transition: opacity 0.6s; | |
-webkit-transition: opacity 0.6s; | |
} | |
.portfolio-item:hover .item-image:after { | |
opacity: .8; | |
} | |
@media all and (max-width: 990px) { | |
.portfolio-item .item-image:after, | |
.portfolio-item:hover .item-image:after { | |
background: linear-gradient(rgba(0, 0, 0, 0) 0%, #191a1c 100%); | |
opacity: 1; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo:
https://codepen.io/Stanssongs/full/bjEJBb/