Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created October 16, 2017 23:20
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/f2f2a70e632c5bf83e37d15f192ed671 to your computer and use it in GitHub Desktop.
Save CodeMyUI/f2f2a70e632c5bf83e37d15f192ed671 to your computer and use it in GitHub Desktop.
Info Cards
.wrap
.back
.back__slide.active
.progress
.back__slide
.progress
.back-front-image
.card
.card__slide.active
.image
span.number 01
span.date 30 MARCH 2017
span.date__time 12:37PM
.card__slide
.back-image
.image
span.number 02
span.date 30 MARCH 2017
span.date__time 12:37PM
.content
.content__slide.active
h2.title
span.title__line
span.title__inner Mesmerizing
span.title__line
span.title__inner Depths
p.desc Nunc orci metus, ornare non molestie ac, ultrices eget <br/> dolor. Mauris ac mattis lectus. Praesent facilisis <br/> malesuada sapien nec pharetra. Fusce eleifend, nisl.
.button-wrap
a.button Learn More
span.button__hover
.content__slide
h2.title
span.title__line
span.title__inner Breathtaking
span.title__line
span.title__inner Heights
p.desc Nunc orci metus, ornare non molestie ac, ultrices eget <br/> dolor. Mauris ac mattis lectus. Praesent facilisis <br/> malesuada sapien nec pharetra. Fusce eleifend, nisl.
.button-wrap
a.button Learn More
span.button__hover
.content__ping.content__ping--noanimation
// Design by Catalin V. (@hiskio https://twitter.com/hiskio)
// https://dribbble.com/shots/3408986-Info-Card-Daily-UI-045
const slideElements = ['.back__slide', '.card__slide', '.content__slide'];
let inProgress = false;
const goToSlide = (slideElements, index) => {
if (!inProgress){
inProgress = true;
$('.active').addClass('exit');
$('.active').removeClass('active');
slideElements.forEach( elem => {
$(`${elem}:nth-child(${index})`).addClass('active');
})
const evenSlide = index % 2 === 0;
if (evenSlide)
$('.content__ping').addClass('content__ping--right');
else
$('.content__ping').removeClass('content__ping--right');
$('.content__ping--noanimation').removeClass('content__ping--noanimation');
setTimeout(() => $('.exit').removeClass('exit'), 1000);
setTimeout(() => inProgress = false, 2000);
}
}
$('.content__slide:nth-child(1) .button').on('click', () => goToSlide(slideElements, 2) );
$('.content__slide:nth-child(2) .button').on('click', () => goToSlide(slideElements, 1) );
setTimeout( () => goToSlide(slideElements, 2), 2000 );
setTimeout( () => goToSlide(slideElements, 1), 6000 );
// let amount = 0;
// let slide = 0;
// const progress = () => {
// amount++
// $('.active .progress').css('transform', `scaleX(${amount/400})`)
// if (amount >= 400){
// amount = 0;
// $('.active .progress').css('transform', `scaleX(${amount/400})`)
// slide = (slide + 1) % 2 ;
// goToSlide(slideElements, slide + 1);
// clearInterval(progressInterval);
// setTimeout(()=>{
// progressInterval = setInterval(progress,20);
// $('.back__slide:not(.active) .progress').css('transform', 'scaleX(0)')
// }, 2000);
// }
// }
// let progressInterval = setInterval(progress,20);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$black: #000000;
$white: #ffffff;
$dark-grey: #1c1c1c;
$light-white: #f9f9f9;
$purple: #7b29ff;
$blue: #304ffe;
$base: 1vw;
$bw: 0.15rem;
$t: 2000ms;
$ease-in: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-out: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000);
@mixin abfab{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
*{
//outline: 2px solid rgba(0,0,0,0.5);
//background: rgba(0,0,0,0.05);
-webkit-backface-visibility: hidden;
}
html{
font-size: $base;
height: 100vh;
overflow: hidden;
@media screen and (min-aspect-ratio: 8/5) {
font-size: 1.5vh
};
}
body, .wrap{
height: 100vh;
}
.back{
height: 100%;
&__slide{
@include abfab;
opacity: 0;
background: $dark-grey;
transition: opacity $t*0.15 $t*0.4 linear;
.progress{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.25rem;
opacity: 0.5;
background: linear-gradient(90deg, $purple, $blue);
transform-origin: 0% 50%;
transform: scaleX(0);
}
&:before{
content: '';
@include abfab;
background-position: center;
background-size: cover;
}
&.active{
opacity: 1;
}
&:nth-child(even){
background: $white;
.progress{
background: $black;
transform-origin: 100% 50%;
opacity: 0.5;
}
}
&:nth-child(1):before{
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/jelly-back-back.png');
opacity: 0.1;
}
&:nth-child(2){
&:before{
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-back-crop2.png');
opacity: 0.2;
background-repeat: no-repeat;
background-size: 101% auto;
background-position: right calc(50% - 14rem);
}
.back-front-image{
@include abfab;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-front-crop.png');
background-size: 101% auto;
background-position: center calc(50% + 21rem);
background-repeat: no-repeat;
z-index: 0;
opacity: 0;
transform: translate3d(0, 10rem, 0);
transition: transform $t*0.3 $t*0.15 linear, opacity $t*0.15 $t*0.25 linear;
&:after{
content: '';
background: linear-gradient(rgba($white, 0), $white 80%);
display: block;
position: absolute;
left: 0;
top: calc(50% + 20rem);
height: 20.5rem;
width: 100%;
}
}
&.active{
.back-front-image{
opacity: 0.2;
transform: translate3d(0, 0, 0);
transition: transform $t*0.6 $t*0.65 $ease-out, opacity $t*0.15 $t*0.65 linear;
}
}
}
}
}
.card{
background: rgba(0,0,0,0.2);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 90rem;
height: 50rem;
background: $black;
&__slide{
@include abfab;
box-shadow: 0 0rem 2rem rgba($black, 0);
transition: box-shadow $t*0.2 $t*0.2 linear;
.number{
opacity: 0;
transform: translatex(-5rem);
transition: transform $t*0.3 $t*0.2 $ease-out, opacity $t*0.15 $t*0.2 linear;
}
.date{
opacity: 0;
transform: translatex(-5rem) rotate(-90deg);
transition: transform $t*0.3 $t*0.2 $ease-out, opacity $t*0.15 $t*0.2 linear;
}
&.active{
box-shadow: 0 1rem 4rem rgba($black, 0.4);
.number{
opacity: 1;
transform: translatex(0rem);
transition: transform $t*0.3 $t*0.45 $ease-out, opacity $t*0.15 $t*0.45 linear;
}
.date{
opacity: 1;
transform: translatex(0rem) rotate(-90deg);
transition: transform $t*0.3 $t*0.45 $ease-out, opacity $t*0.15 $t*0.45 linear;
}
}
&.exit{
.number{
transform: translatex(0rem);
transition: transform $t*0.3 $t*0.5 $ease-out, opacity $t*0.1 $t*0.5 linear;
}
.date{ transform: translatex(5rem) rotate(-90deg);}
}
&:nth-child(even){
box-shadow: 0 1rem 4rem rgba($black, 0.2);
.date, .number { color: $black;}
.date{ left: 5.5%;}
.number{ left: 94.5%;}
.date:before{ border-bottom: $bw solid $black;}
.number:before{ border-left: $bw solid $black;}
&:after{
content: '';
@include abfab;
background-color: $white;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform $t*0.25 $t*0.3 ease-in-out;
}
&.active{
box-shadow: 0 1rem 4rem rgba($black, 0.2);
.number{ opacity: 1; transition: opacity $t*0.1 $t*0.2 linear; };
.date{ transition: transform $t*0.3 $t*0.6 $ease-out, opacity $t*0.15 $t*0.6 linear;}
}
&.active:after{
transform: scaleX(1);
transform-origin: 0% 50%;
}
&.exit{
.date{ transform: translatex(0rem) rotate(-90deg);}
.number{
transform: translatex(4rem);
transition: transform $t*0.3 $t*0.35 $ease-out, opacity $t*0.15 $t*0.35 linear;
}
}
}
&:nth-child(1){
.image{
//outline: 1px solid red;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/jelly.png');
background-size: 150% auto;
background-position: center;
background-repeat: no-repeat;
width: 40%;
height: 150%;
position: absolute;
top: 50%;
left: 25%;
transform: translate3d(-55%, -40%, 0);
z-index: 2;
opacity: 0;
}
&.active{
.image{
opacity: 1;
transform: translate3d(-50%, -50%, 0);
transition: transform $t*0.6 $t*0.5 $ease-out, opacity $t*0.15 $t*0.5 linear;
}
}
&.exit{
.image{
transform: translate3d(-45%, -60%, 0);
transition: transform $t*0.3 $t*0.15 linear, opacity $t*0.15 $t*0.25 linear;
}
}
&:after{
content: '';
@include abfab;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/jelly-back.png');
background-size: 135% auto;
background-position: center;
opacity: 0.15;
filter: contrast(150%);
}
}
&:nth-child(2){
overflow: hidden;
.image{
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-front-crop.png');
background-size: 100% auto;
background-position: 50% top;
background-repeat: no-repeat;
width: 100vw;
height: 100%;
position: absolute;
top: 55%;
left: -5vw;
transform: translate3d(0, 20%, 0);
z-index: 2;
opacity: 0;
pointer-events: none;
z-index: 1;
transition: transform $t*0.3 $t*0.15 linear, opacity $t*0.15 $t*0.25 linear;
}
.back-image{
@include abfab;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-back-crop2.png');
background-size: 101% auto;
background-position: center 85%;
background-repeat: no-repeat;
z-index: 1;
opacity: 0;
transform: translatey(0);
transition: transform $t*0.3 $t*0.15 linear, opacity $t*0.15 $t*0.25 linear;
&:after{
content: '';
background: linear-gradient(rgba($white, 0), $white 100%);
@include abfab;
height: 50%;
top: 50%;
}
}
&.active{
.image{
opacity: 1;
transform: translate3d(0, 0, 0);
transition: transform $t*0.6 $t*0.65 $ease-out, opacity $t*0.15 $t*0.65 linear;
}
.back-image{
opacity: 1;
transform: translatey(-2rem);
transition: transform $t*0.6 $t*0.5 $ease-out, opacity $t*0.15 $t*0.5 linear;
}
}
&.exit{
.back-image{
transform: translatey(-4rem);
}
}
}
}
}
.number{
color: $white;
z-index: 1;
font-family: 'Roboto Mono', monospace;
font-weight: 500;
letter-spacing: 0.02em;
position: absolute;
left: 5%;
top: calc(50% + 6rem);
&:before{
content: '';
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: 2.5rem;
display: block;
height: 4rem;
border-left: $bw solid $white;
}
}
.date{
color: $white;
z-index: 1;
font-family: 'Roboto Mono', monospace;
font-weight: 500;
letter-spacing: 0.15em;
position: absolute;
left: 95%;
width: 30%;
top: calc(83% - 0.5rem);
transform-origin: 0 50%;
transform: rotate(-90deg);
&__time{
opacity: 0.25;
}
&:before{
content: '';
display: inline-block;
transform: translatey(-0.35rem);
width: 4rem;
margin-right: 1.5rem;
border-bottom: $bw solid $white;
}
}
.content{
position: absolute;
left: 40%;
top: 50%;
transform: translatey(-50%);
width: 44%;
height: 68%;
z-index: 2;
&__ping{
position: absolute;
bottom: 0;
width: 4rem;
transition: transform $t*0.25 ease-out;
&:after{
content: '';
display: block;
height: $bw;
background: $white;
width: 100%;
transition: background $t*0.1 $t*0.35 linear;
@keyframes widenFromLeft {
0%{ transform: scaleX(1); transform-origin: 0 50%;}
20%{ transform: scaleX(4); transform-origin: 0 50%;}
100%{ transform: scaleX(1); transform-origin: 0 50%;}
}
@keyframes widenFromRight {
0%{ transform: scaleX(1); transform-origin: 100% 50%;}
20%{ transform: scaleX(4); transform-origin: 100% 50%;}
100%{ transform: scaleX(1); transform-origin: 100% 50%;}
}
animation: widenFromLeft $t*0.6 ease-out;
}
&--right{
transform: translateX(35.5rem);
&:after{
background: $black;
animation: widenFromRight $t*0.6 ease-out;
}
}
&--noanimation:after{
animation: none !important;
}
}
&__slide{
@include abfab;
pointer-events: none;
&.active{
pointer-events: auto;
.title__line{
&:before{
transform: scaleX(1);
transition: transform $t*0.5 $ease-out;
transition-delay: $t*0.5;
}
&:nth-child(2):before{
transition-delay: $t*0.6;
}
}
.title__inner, .desc, .button-wrap{
opacity: 1;
transform: translatey(0);
}
.title__inner{ transition-delay: $t*0.8;}
.desc{ transition-delay: $t*0.9;}
.button-wrap{ transition-delay: $t };
}
&.exit{
.title__inner, .desc, .button-wrap{
transform: translatey(-2.5rem);
transition: transform $t*0.2 ease-out, opacity $t*0.15 linear;
}
.title__inner{ transition-delay: $t*0.075;}
.desc{ transition-delay: $t*0.15;}
.button-wrap{ transition-delay: $t*0.225 };
}
&:nth-child(even){
text-align: right;
.title, .desc { color: $black;}
.button{
background: transparent;
color: $white;
border: $bw solid $black;
box-shadow: 0 1rem 2rem rgba($black,0.1);
&:before, &:after{ display: none; }
&__hover{
background: $black;
@keyframes full-rest{
0%{
transform-origin: right center;
transform: scaleX(1);
}
100%{
transform-origin: right center;
transform: scaleX(1);
}
}
animation: full-rest 10s forwards;
}
&:hover .button__hover{
@keyframes empty-swipe{
0%{
transform-origin: left center;
transform: scaleX(1);
}
50%{
transform-origin: left center;
transform: scaleX(0);
}
51%{
transform-origin: right center;
transform: scaleX(0);
}
100%{
transform-origin: right center;
transform: scaleX(1);
}
}
animation: empty-swipe $t*0.25 forwards;
}
}
.title__line:before{
left: -4rem;
background: $light-white;
transform-origin: 0% 50%;
}
&.active{
.title__line:before{
transform-origin: 100% 50%;
}
}
}
}
}
.title{
color: $white;
font-size: 5.5rem;
font-family: 'Playfair Display', serif;
line-height: 1;
letter-spacing: 0.03em;
margin: 0 0 3.6rem;
&__line{
display: inline-block;
position: relative;
&:before{
background: linear-gradient(90deg, $purple, $blue);
transform-origin: 100% 50%;
transition: transform $t*0.25 ease-out;
transform: scaleX(0);
content: '';
display: block;
position: absolute;
width: calc(100% + 6rem);
top: 2rem;
left: -2rem;
height: 2rem;
z-index: -1;
}
&:nth-child(2):before{
transition-delay: $t*0.1;
}
}
&__inner{
position: relative;
display: inline-block;
}
}
.desc{
font-size: 1.4rem;
font-family: 'Libre Franklin', sans-serif;
line-height: 1.84;
margin: 0 0 3.6rem;
color: $white;
}
.button{
background: rgba(0,0,0,0.2);
display: inline-block;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
line-height: 1;
font-weight: 600;
letter-spacing: 0.1em;
padding: 1.15rem 2rem;
cursor: pointer;
position: relative;
z-index: 2;
color: $white;
border-top: $bw solid $blue;
border-bottom: $bw solid $purple;
box-shadow: 0 1rem 2rem rgba($purple,0.2);
transition: transform $t*0.25 $ease-out;
&:before, &:after, &__hover{
content: '';
position: absolute;
top: -1%;
height: 102%;
width: $bw;
background: linear-gradient($blue, $purple);
}
&:before{ left: 0; }
&:after{ right: 0; }
&__hover{
left: -1%;
width: 102%;
height: 102%;
z-index: -1;
//transform: scaleX(0);
@keyframes rest{
0%{
transform-origin: right center;
transform: scaleX(0);
}
100%{
transform-origin: right center;
transform: scaleX(0);
}
}
animation: rest 10s forwards;
}
&:hover{
transform: translatey(-0.5rem);
.button__hover{
@keyframes swipe{
0%{
transform-origin: left center;
transform: scaleX(0);
}
50%{
transform-origin: left center;
transform: scaleX(1);
}
51%{
transform-origin: right center;
transform: scaleX(1);
}
100%{
transform-origin: right center;
transform: scaleX(0);
}
}
animation: swipe $t*0.25 forwards;
}
}
&:active{
//transform: translatey(-1rem);
}
}
.title__inner, .desc, .button-wrap{
opacity: 0;
transform: translatey(2.5rem);
position: relative;
transition: transform $t*0.4 $ease-out, opacity $t*0.15 linear;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment