<body>
<div class="wrapper">
<div class="bubble yellow"></div>
<div class="bubble teal"></div>
<div class="bubble peach"></div>
<div class="bubble lilac"></div>
<div class="content-wrapper">
<div class="inner-wrapper">
<div class="about">
<div class="greet">Hi, <br> there!</div>
<div class="ask-mood">What color best describes <br> your mood today?</div>
</div>
<div class="swiper-parent">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide tile">
<div class="mood teal">tranquil <br>teal
<i class="icon fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div class="swiper-slide tile">
<div class="mood yellow"> mellow <br> yellow
<i class="icon fa fa-times" aria-hidden="true"></i></div>
</div>
<div class="swiper-slide tile">
<div class="mood peach">feeling <br> peachy
<i class="icon fa fa-times" aria-hidden="true"></i></div>
</div>
<div class="swiper-slide tile">
<div class="mood lilac">laidback <br> lilac
<i class="icon fa fa-times" aria-hidden="true"></i></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next nav"></div>
<div class="swiper-button-prev nav"></div>
</div>
</div>
</div>
</div>
</div>
</body>
$theme-lilac: #7772b2;
$theme-yellow: #F4DA95;
$theme-teal: #709FA7;
$theme-peach: #E47B68;
$theme-black: #1B1B1B;
$theme-shadow: #CDCDCD;
$theme-text: rgba(255, 255, 255, 0.7);
$border-radius: 10px;
$border-width: 2px;
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700;900&display=swap');
$theme-font: 'Rubik',
sans-serif;
* {
box-sizing: border-box;
font-family: $theme-font;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.yellow {
background-color: $theme-yellow;
}
.lilac {
background-color: $theme-lilac;
}
.peach {
background-color: $theme-peach;
}
.teal {
background-color: $theme-teal;
}
.bubble {
border-radius: 50%;
position: fixed;
opacity: 0.5;
&.yellow {
bottom: -20px;
left: -170px;
height: 300px;
width: 300px;
}
&.teal {
bottom: -50px;
left: 50px;
height: 100px;
width: 100px;
}
&.peach {
height: 70px;
width: 70px;
bottom: -5px;
right: 150px;
}
&.lilac {
height: 300px;
width: 300px;
right: -250px;
bottom: -100px;
}
}
.content-wrapper {
width: 305px;
height: 555px;
padding: 10px;
padding: 10px;
border: $border-width solid $theme-lilac;
border-radius: $border-radius;
box-shadow: 70px 70px 70px $theme-shadow;
.inner-wrapper {
width: 280px;
height: 530px;
border-radius: $border-radius;
color: $theme-black;
position: relative;
box-shadow: 3px 3px 3px $theme-shadow, -3px -3px 3px $theme-shadow;
.about {
padding: 70px 0px 0px 40px;
.greet {
font-weight: 500;
font-size: 20px;
margin-bottom: 15px;
}
.ask-mood {
font-weight: 300;
font-size: 14px;
}
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 30px;
color: $theme-text
}
.swiper-parent {
.swiper-container {
border-radius: $border-radius;
height: 400px;
&.big {
height: 530px;
}
.swiper-wrapper {
align-items: center;
.swiper-slide {
width: 175px;
height: 200px;
text-align: center;
color: $theme-text;
.mood {
transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
width: 175px;
height: 175px;
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
padding-top: 65px;
border-radius: $border-radius;
position: relative;
.icon {
position: absolute;
top: 10px;
right: 30px;
}
}
&.grow {
width: 275px;
height: 530px;
transform: scaleY(1);
transition: all 0.1s linear;
.mood {
&.large {
width: 295px;
max-width: 295px;
height: 535px;
padding-top: 235px;
transition: all 0.1s linear;
font-size: 30px;
}
}
}
}
}
}
}
}
}
@media screen and (max-width: 768px) {
.bubble {
display: none;
}
}
.swiper-slide {
visibility: hidden !important;
&-active {
visibility: visible !important;
}
}
View Compiled
$('.nav').hide();
$('.icon').hide();
// Initialise swiper
var swiper = new Swiper('.swiper-container', {
slidesPerView: "auto",
spaceBetween: 20,
centeredSlides: true,
grabCursor: true,
loop: true,
pagination: {
el: 'swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
gsap.to('.swiper-slide-active', {
ease: "back",
scaleY: 1.5,
duration: 0.2,
});
// scaling central / active slide -
var scaleActive = function() {
$(".swiper-slide").each(function() {
console.log(swiper.params)
if ($(this).hasClass("tile")) {
if ($(this).hasClass("swiper-slide-active")) {
gsap.to('.swiper-slide-active', {
ease: "back",
scaleY: 1.5,
duration: 0.1,
});
} else {
gsap.to('.swiper-slide', {
scaleY: 1,
duration: 0,
ease: "back"
});
}
} else {
gsap.to('.swiper-slide', {
ease: "back",
scaleY: 1,
duration: 0,
});
}
});
};
swiper.on('slideChange', function() {
setTimeout(function() {
scaleActive();
}, 0);
});
// On click expansion.
$('.swiper-slide').click(function() {
event.stopPropagation();
$('.swiper-container').addClass('big');
$('.nav').show();
$('.about').hide();
$('.icon').show();
$('.swiper-slide').removeClass('tile');
$('.swiper-slide').addClass('grow');
$('.mood').addClass('large');
swiper.params.slidesPerView = 1;
swiper.params.spaceBetween = 0;
swiper.params.centeredSlides = true;
swiper.params.loop = true;
swiper.update();
scaleActive();
});
// Closing mood board
$(".icon").click(function() {
event.stopPropagation();
$('.swiper-container').removeClass('big');
$('.nav').hide();
$('.about').show();
$('.icon').hide();
$('.swiper-slide').addClass('tile');
$('.swiper-slide').removeClass('grow');
$('.mood').removeClass('large');
gsap.fromTo(".about", { x: -80, y: 0 }, { duration: 0.2, x: 0, y: 0, ease: "back" })
$('.swiper-slide').width(175);
swiper.params.slidesPerView = "auto";
swiper.params.spaceBetween = 20;
swiper.params.coverflowEffect = {};
swiper.update();
scaleActive();
});
