<svg id="icons" class="hide">
<symbol id="arrow" viewBox="0 0 451.846 451.847"><path fill="#FFF" d="M345.44 248.292l-194.286 194.28c-12.36 12.366-32.397 12.366-44.75 0-12.354-12.353-12.354-32.39 0-44.743l171.914-171.91-171.91-171.905c-12.353-12.36-12.353-32.394 0-44.748 12.355-12.36 32.392-12.36 44.75 0L345.446 203.55c6.177 6.18 9.262 14.27 9.262 22.367 0 8.098-3.09 16.195-9.267 22.372z"/></symbol>
</svg>
<div class="slider-content">
<div class="header-wrapper">
<div class="header">
<div class="menu-wrapper">
<div class="menu-hamburger"></div>
</div>
<div class="logo-wrapper">
<div class="logo"><span>boldy</span>bae</div>
</div>
<div class="shop-wrapper"></div>
</div>
</div>
<div class="slider-wrapper">
<div class="slider-container">
<div class="control-nav">
<ul></ul>
</div>
<div class="nav-wrapper">
<div class="next">
<div class="next-color">
<span>Next color</span>
<span class="color">ORANGE</span>
</div>
<div class="next-button">
<svg>
<use xlink:href="#arrow"></use>
</svg>
</div>
</div>
</div>
<div class="slide active" data-order="1" data-color="#ff384b" data-name="red">
<div class="slide-content ">
<div class="clip-svg">
<img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae1.jpg" alt="" />
<div class="title-wrapper">
<h1>- Cuz i'm still looking</h1>
<h2>looking for trouble</h2>
</div>
</div>
</div>
</div>
<div class="slide " data-order="2" data-color="#f59600" data-name="orange">
<div class="slide-content ">
<div class="clip-svg">
<img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae2.jpg" alt="" />
<div class="title-wrapper bigger">
<h1>- Your hesitation speaks to me</h1>
<h2>more than million words</h2>
</div>
</div>
</div>
</div>
<div class="slide " data-order="3" data-color="#0028f2" data-name="blue">
<div class="slide-content ">
<div class="clip-svg">
<img class="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/boldybae3.jpg" alt="" />
<div class="title-wrapper bigger">
<h1>- Heels on the bike it's a mess</h1>
<h2>I'm not the only one who is late</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<ul>
<li><a href="https://dribbble.com/mariosmaselli">dribbl</a></li>
<li><a href="https://www.instagram.com/mariosmaselli/">insta</a></li>
<li><a href="https://twitter.com/mariosmaselli">tweet</a></li>
</ul>
</div>
</div>@import 'https://fonts.googleapis.com/css?family=Montserrat';
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
.hide {display:none}
*, *::after,*::before{
box-sizing:border-box;
}
body, html{
background: white;
font-size:6px;
padding:4rem 2rem;
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
font-family: 'Montserrat', sans-serif;
@media (min-width: 860px) {
font-size:8px;
padding:3rem 5rem;
}
@media (min-width: 1200px) {
font-size:10px;
padding:2rem 3rem;
}
}
.header-wrapper {
position:absolute;
top:0;
left:0;
width:100%;
padding:4rem 3rem 2rem;
z-index:20;
.header {
position:relative;
display:block;
width:100%;
height:6rem;
}
.menu-wrapper {
position:relative;
float:right;
display:block;
cursor:pointer;
width:2.5rem;
height:3rem;
right:0;
margin:0;
text-align:right;
@include clearfix;
}
.menu-hamburger {
position:relative;
width:1.4rem;
display:inline-block;
vertical-align:middle;
background:white;
height:1px;
cursor:pointer;
right:0;
top:1rem;
&::before {
content:"";
width:2.5rem;
height:1px;
background:white;
position:absolute;
top:-0.8rem;
right:0;
}
&::after {
content:"";
width:1.8rem;
height:1px;
background:white;
position:absolute;
top:0.8rem;
right:0;
}
}
.logo-wrapper {
position:relative;
float:left;
}
.logo {
display:block;
font-size:3rem;
font-weight:bold;
line-height:1;
font-weight:700;
color:white;
span {font-weight:100;}
}
}
.slider-content {
position:relative;
max-width: 112rem;
min-width: 480px;
background:#fff;
margin: 0 auto;
overflow:hidden;
box-shadow: 0 0 35px 20px rgba(79,69,66,0.2);
.slider-container {
position:relative;
height: 70rem;
overflow:hidden;
}
.slide-content {
position:relative;
width:100%;
height:100%;
}
.slide {
position:absolute;
width:100%;
height:100%;
opacity:0;
@include clearfix;
&.active {
opacity:1;
}
&.active .clip-svg{
clip-path: circle(120% at 90%);
}
}
img {
position:absolute;
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.title-wrapper {
position:absolute;
color:white;
left:3rem;
bottom:5rem;
width: 40%;
&.bigger {
width: 48%;
}
h1 {
font-size:9rem;
margin:0;
line-height:1;
margin-bottom: 1rem;
font-weight:900;
}
h2 {
font-size:2rem;
margin:0;
}
}
}
.control-nav{
position:absolute;
left:3rem;
top:18rem;
z-index:999;
ul {
position:relative;
list-style:none;
padding:0;
}
li {
position:relative;
width:0.4rem;
height:1.5rem;
margin:1.5rem 0;
background:white;
opacity:0.5;
border-radius:3rem;
&.active {
opacity:1;
}
}
}
.nav-wrapper {
position:absolute;
right: 5%;
top:42%;
text-align:right;
cursor:pointer;
z-index:999;
.next-color {
position:relative;
display:inline-block;
vertical-align:middle;
color:white;
font-size:2rem;
margin-right:1rem;
overflow:hidden;
span {
display:block;
&:last-child {
font-weight:bold;
text-transform:uppercase;
}
}
}
.next-button {
position:relative;
display:inline-block;
vertical-align:middle;
width:10rem;
height:10rem;
background:#f59600;
border-radius:50%;
svg {
width: 100%;
height: 100%;
padding: 2rem;
padding-left: 3rem;
}
}
}
.footer-wrapper {
position:absolute;
color:white;
bottom: 5rem;
right:4rem;
z-index:10;
ul {
list-style:none;
margin:0;
padding:0;
@include clearfix;
}
li {
position:relative;
float:left;
margin:0 1rem;
}
a {
text-decoration:none;
color:white;
font-size:1.8rem;
font-weight:700;
}
}
svg.mask {
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
.clip-svg {
clip-path: circle(25px at 90%);
width:100%;
height:100%;
transition-property:all;
transition-duration: 0.5s;
transition-timing-function:ease;
}
/*
This time try to code js in a different way than I use to... more ordered and following this practices
https://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code
Please let me know what u think :D
Thanks for watching!
Also original dribbble
https://dribbble.com/shots/2705517-boldybae
*/
var mySlider = {
config : {
slider : '.slider-content',
activeSlide : '.slide.active',
button: '.next-button',
transition: 500,
delay: function() {return this.transition;},
navigation : '.control-nav'
},
init : function(config) {
//$.extend(mySlider.config, config);
this.createNav();
$(mySlider.config.button).
click(function() {
mySlider.animateSlide($(this));
});
},
getActiveSlide : function() {
return $(mySlider.config.activeSlide);
},
getNextSlide : function() {
var nextSlide = mySlider.getActiveSlide().next();
if ( nextSlide.length === 0 ){
nextSlide = $(mySlider.config.slider).find('.slide').eq(0);
}
return nextSlide;
},
getNextSlideColorAndName : function() {
var colorAndName = {};
var nextSlidenext = mySlider.getNextSlide().next();
var nextSlideColor = nextSlidenext.data('color');
var nextSlideName = nextSlidenext.data('name');
colorAndName.color = nextSlideColor;
colorAndName.name = nextSlideName;
if ( nextSlidenext.length === 0 ) {
nextSlidenext = $(mySlider.config.slider).find('.slide').eq(0);
nextSlideColor = nextSlidenext.data('color');
nextSlideName = nextSlidenext.data('name');
colorAndName.color = nextSlideColor;
colorAndName.name = nextSlideName;
}
return colorAndName;
},
createNav : function() {
var totalSlides = $(mySlider.config.slider).find('.slide').length;
var controlNav = $(mySlider.config.navigation).find('ul');
var nav;
for( var i=0; i < totalSlides; i++ ){
var active = "";
if(i === 0){
active = 'active';
}
controlNav.append('<li class="slider-nav nav-'+i+' '+active+' "></li>')
}
},
animateNav : function() {
var activeNav = $('li.active');
var nextNav = activeNav.next();
if(nextNav.length === 0){
nextNav = $('.control-nav li').eq(0);
}
activeNav.removeClass('active');
nextNav.addClass('active');
},
animateSlide : function(button) {
var activeSlide = mySlider.getActiveSlide();
var nextSlide = mySlider.getNextSlide();
var delay = mySlider.config.delay();
var clipPath = $('.clip-svg');
clipPath.css('transition-duration', mySlider.config.transition+'ms');
button.css('pointer-events', 'none');
nextSlide.css('z-index',10);
button.css('background', mySlider.getNextSlideColorAndName().color);
button.prev().find('.color').html(mySlider.getNextSlideColorAndName().name);
nextSlide.addClass('active').css('opacity', 1);
setTimeout(function() {
activeSlide.removeClass('active').css('opacity', 0);
}, delay);
setTimeout(function() {
nextSlide.css('z-index','');
button.css('pointer-events', 'auto');
}, delay + 300);
mySlider.animateNav();
}
}
$(document).ready(function() { mySlider.init(); });
External CSS
This Pen doesn't use any external CSS resources.