#wrapper
.card.card1
.content
.inner
%h1.word This
%h3{"data-text" => "02"} 02
%p Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
.card.card2
.content
.inner
%h1.word Check
%h3{"data-text" => "01"} 01
%p Nulla consequat massa quis enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. In ac felis quis tortor malesuada pretium.
.card.card3
.content
.inner
%h1.word Out
%h3{"data-text" => "04"} 04
%p Nullam accumsan lorem in dui. Donec vitae orci sed dolor rutrum auctor. Curabitur vestibulum aliquam leo.
.card.card4
.content
.inner
%h1.word Thing
%h3{"data-text" => "03"} 03
%p Fusce risus nisl, viverra et, tempor et, pretium in, sapien. In hac habitasse platea dictumst. Nam adipiscing.
#trigger
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:radial-gradient(circle at center, #555, #222);
font-family:'Acme';
perspective:600px;
*{
transform-style:preserve-3d;
backface-visibility:hidden;
&:before, &:after{
transform-style:preserve-3d;
backface-visibility:hidden;
}
}
#wrapper{
width:700px;
height:500px;
position:relative;
overflow:hidden;
box-shadow:0 20px 40px -10px rgba(0,0,0,0.25);
&.flash{
animation:bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
@keyframes bend{
0%{
transform:rotateY(0deg);
}
20%{
transform:rotateY(2.5deg);
}
50%{
transform:rotateY(0deg);
}
100%{
transform:rotateY(0deg);
}
}
}
#trigger{
position:absolute;
width:20px;
height:20px;
box-shadow:0 0 0 1px #ccc, 0 0 0 1px #ccc;
z-index:999;
border-radius:100%;
left:calc(12.5% - 12.5px);
top:calc(50% - 12.5px);
transition:background 0.2s ease-in-out, opacity 0.2s ease-in-out;
cursor:pointer;
&:hover{
background:#ccc;
&:before{
color:#222;
}
}
&.flash{
transition:box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition-delay:0s, 0.2s;
box-shadow:0 0 0 1px #ccc, 0 0 0 10px transparent;
opacity:0;
pointer-events:none;
}
&:before{
content:'→';
position:absolute;
color:#ccc;
top:50%;
left:50%;
transform:translate(-50%, -50%);
transition:0.2s ease-in-out;
}
}
&.fade{
opacity:0.25;
}
.card{
width:100%;
height:100%;
position:absolute;
top:0;
pointer-events:none;
z-index:0;
transition:transform 0.4s ease-in-out;
.content{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
overflow:hidden;
background:linear-gradient(to bottom, transparent calc(50% - 1px), rgba(0,0,0,0.05) calc(50% - 1px), rgba(0,0,0,0.05) 50%, transparent 50%), linear-gradient(to right, transparent calc(56% - 1px), rgba(0,0,0,0.05) calc(56% - 1px), rgba(0,0,0,0.05) 56%, transparent 56%), #ccc;
background-size:100%, 100% 50%, 100%;
background-repeat:no-repeat;
background-position:50%, 50% 100%, 50%;
h1{
opacity:1;
position:absolute;
left:calc(25% + 40px);
top:20px;
font-size:120px;
margin:0px;
color:rgba(0,0,0,0.175);
text-transform:uppercase;
}
p{
position:absolute;
width:22.5%;
height:40%;
display:inline-block;
bottom:0;
left:calc(25% + 40px);
line-height:1.5;
font-family:"Montserrat";
font-size:14px;
color:#555;
padding:5px;
box-sizing:border-box;
transition:0.3s ease-in-out;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
h3{
position:absolute;
right:-200px;
top:20px;
font-size:80px;
margin:0;
color:transparent;
overflow:hidden;
border-bottom:1px solid rgba(0,0,0,0.175);
transform:scaleX(0);
transform-origin:left;
transition:transform 0s ease-in-out, right 0.4s ease-in-out;
transition-delay:0.6s, 0s;
padding:0 10px;
&:before{
content:attr(data-text);
color:transparent;
-webkit-text-stroke:0.25px rgba(0,0,0,0.25);
position:absolute;
transform:translateY(125%) skewY(45deg);
transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-delay:0.4s;
left:10px;
top:0;
}
}
&:before{
opacity:0;
z-index:2;
transition:0.2s ease-in-out;
}
&:before, &:after, .inner{
content:'';
position:absolute;
width:112.5%;
height:100%;
left:12.5%;
top:0;
background-size:cover;
transition:0.5s ease-in-out;
}
&:after{
background:transparent;
transition:0.5s ease-in-out;
}
&:before, .inner:after{
filter:saturate(0);
}
.inner{
width:40%;
height:45%;
left:auto;
right:0%;
z-index:999;
top:auto;
bottom:0;
transform-origin:left;
transform:scaleX(0);
overflow:hidden;
&:before, &:after{
content:'';
position:absolute;
width:100%;
height:100%;
background:#222;
left:0;
top:0;
z-index:2;
transform:scaleX(1);
transform-origin:right;
}
&:after{
background-size:cover;
z-index:1;
transform-origin:50% 50%;
transform:scale(1.5);
}
}
}
&.card1{
.content{
&:before, .inner:after{
background-image:url('https://images.unsplash.com/photo-1558845530-c8963f0c26fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80');
}
}
}
&.card2{
.content{
&:before, .inner:after{
background-image:url('https://images.unsplash.com/photo-1558848369-839e86bc7f84?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80');
}
}
}
&.card3{
.content{
&:before, .inner:after{
background-image:url('https://images.unsplash.com/photo-1558775723-1f9ca54bb7cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2767&q=80');
}
}
}
&.card4{
.content{
&:before, .inner:after{
background-image:url('https://images.unsplash.com/photo-1558848618-ce2c2e7bb671?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
}
}
}
&:first-of-type{
pointer-events:all;
left:0;
animation:scaleIn 1s ease-in-out 1 forwards;
animation-delay:0s;
transform:translateX(-100%);
@keyframes scaleIn{
from{
transform:translateX(-100%);
}
to{
transform:translateX(-75%);
}
}
z-index:11;
.content{
&:before{
opacity:0.25;
animation:scaleDown 0.75s ease-in-out 1 forwards;
animation-delay:0.25s;
transform:translateX(6.75%);
@keyframes scaleDown{
to{
transform:translateX(0);
}
}
}
&:after{
background:#222;
}
}
}
&:nth-of-type(2){
z-index:10;
animation:scaleIn2 1s ease-in-out 1 forwards;
will-change:transform;
@keyframes scaleIn2{
from{
transform:translateX(-75%);
}
to{
transform:translateX(0%);
}
}
.content{
p{
transition-delay:1.85s;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
&:after{
transition-delay:0.5s;
}
h3{
transition:transform 0.2s ease-in-out;
right:20px;
transform:scaleX(1);
transition-delay:2s;
&:before{
transform:translateY(0%);
transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-delay:2.25s;
}
}
h1{
right:100px;
}
.inner{
animation:scaleIn4 0.5s ease-in-out 1 forwards;
animation-delay:1.35s;
will-change:transform;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
@keyframes scaleIn4{
to{
transform:scaleX(1);
}
}
&:after{
animation:scaleUp 1s ease-in-out 1 forwards;
animation-delay:1.9s;
will-change:transform;
@keyframes scaleUp{
to{
transform:scale(1);
}
}
}
&:before{
animation:scaleIn5 0.35s ease-in-out 1 forwards;
animation-delay:1.75s;
will-change:transform;
@keyframes scaleIn5{
to{
transform:scaleX(0);
}
}
}
}
&:before{
animation:scaleIn3 1.5s ease-in-out 1 forwards;
animation-delay:0.15s;
opacity:1;
will-change:transform;
@keyframes scaleIn3{
0%{
transform:translateX(0%);
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}
50%{
transform:translateX(-12.5%);
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}
100%{
transform:translateX(-12.5%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
}
}
}
}
&:nth-of-type(3){
z-index:3;
.content{
&:before, &:after{
opacity:0;
transition:0s;
transition-delay:0s;
}
.inner{
transform:scaleX(1);
transition:0.5s ease-in-out;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
&:before{
display:none;
}
&:after{
transform:scale(1);
}
}
}
}
}
}
}
/*
* based on this dribbble shot by Andrew Baygulov: https://dribbble.com/shots/6427548-Kaiser-Slideshow
*/
(function ($) {
var isActive = false;
$.fn.shuffleText = function(shuffleResult, options){
var $this = $(this);
// Add/Remove Chars You Want To Appear During Shuffle In This Array
var aChars = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","k","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
// Defaults Settings
var defaults = $.extend({
time : 40, // Time In ms (Milliseconds) Of Shuffle For Each Letter
maxTime : 1000, // Max Time In ms (Milliseconds) Of Global Shuffle
amount : 3, // Amount Of Shuffle For Each Letter
complete : null // Do Something When Shuffle Is Completed
}, options);
if(shuffleResult == undefined)
shuffleResult = '';
// Init Variables
var aToShuffle = $this.text().split(''),
aShuffleResult = shuffleResult.split(''),
iFlag = 0, n = 0, duration = 0, iLenght = 0,
interval, aLetters;
if(!isActive){
isActive = true;
// Launch Shuffle
return $this.each(function(){
replaceEntry();
aLetters = $this.find('span');
// Debugging
if(defaults.amount < 0)
defaults.amount = 0;
// Calculate Duration Of Global Shuffle
if((iLength * (defaults.amount + 1) * defaults.time) > defaults.maxTime){
duration = defaults.maxTime / (iLength * (defaults.amount + 1));
}else{
duration = defaults.time;
}
randomChars();
interval = setInterval(randomChars,Math.floor(duration));
// Create The Correct DOM Structure
function replaceEntry(){
$this.empty();
if(aToShuffle.length > aShuffleResult.length)
iLength = aToShuffle.length;
else
iLength = aShuffleResult.length;
for(i = 0; i < iLength; i++){
if(aToShuffle[i] == undefined)
$this.append($('<span></span>'));
else
$this.append($('<span>'+aToShuffle[i]+'</span>'));
}
}
// The Shuffle Function
function randomChars(){
var randomChars = aChars[Math.floor(Math.random() * aChars.length)];
if(iFlag >= iLength){
isActive = false;
$this.text(shuffleResult);
clearInterval(interval);
if(typeof defaults.complete == 'function')
defaults.complete.call($this);
}else{
if(n == defaults.amount){
if(iFlag >= aShuffleResult.length)
$(aLetters[iFlag]).text('');
else
$(aLetters[iFlag]).text(aShuffleResult[iFlag]);
iFlag++; n = 0;
}else{
$(aLetters[iFlag]).text(randomChars);
n++;
}
}
}
});
}
};
}(jQuery));
$("#trigger").click(function(){
$('.card').removeClass("active");
$('#wrapper').prepend($('#wrapper .card:last'));
$(this).addClass("flash");
$('#wrapper').addClass("flash");
$('.card:nth-of-type(2)').addClass("active");
$text = $('.active .word').text();
setTimeout(function(){
$(".active .word").shuffleText($text, {
frames : 2000,
maxSpeed : 1,
amount : 35,
complete : null
});
}, 1200);
setTimeout(function(){
$("#trigger").removeClass("flash");
$("#wrapper").removeClass("flash");
}, 2000);
});
External CSS
This Pen doesn't use any external CSS resources.