Skip to content

Instantly share code, notes, and snippets.

@danhanfry
Created August 4, 2015 23:56
Show Gist options
  • Save danhanfry/f3131919e186cc46974d to your computer and use it in GitHub Desktop.
Save danhanfry/f3131919e186cc46974d to your computer and use it in GitHub Desktop.
VLgaLX
<div class="global">
<div class="content">
<div class="content-header"> Dalia </div>
<div class="content-info">
<div class="info-left">
<div class="left-genero">
<span class="genero-t">Genero</span>
<span class="genero-v">Mujer</span>
</div>
<div class="left-numerologia">
<span class="numerologia-t">Numerologia</span>
<span class="numerologia-t">9</span>
</div>
<div class="left-origen">
<span class="origen-t">Origen</span>
<span class="origen-v">Español</span>
</div>
</div>
<div class="info-right">
<div class="right-significado">
<span class="significado-t">Significado</span>
<span class="significado-v">Del sueco "valle". Nombre de una flor, bautizada en honor del botánico sueco Dahl.</span>
</div>
<div class="right-personalidad">
<span class="personalidad-t">Personalidad</span>
<span class="personalidad-v">Inspiración y vocación artística para una personalidad muy activa.</span>
</div>
</div>
</div>
</div>
</div>
"use strict"
var aboutAnimation = new TimelineMax({
repeat: -1
})
load()
function load() {
aboutAnimation
.set('.content-info', {
display: 'none'
})
.from('.content', 1.5, {
scale: 1,
autoAlpha: 0,
width: '5px',
ease: Elastic.easeOut.config(1, 0.5)
})
.to('.content-info', 1, {
display: 'flex',
height: '324px',
ease: Elastic.easeOut.config(3, 0.5),
})
.staggerFrom('.info-left div', .9, {
className: '+= temp',
autoAlpha: 0,
x: -50,
ease: Power4.easeOut,
}, '.3', '-=.3')
.staggerFrom('.info-right div', .9, {
className: '+= temp',
autoAlpha: 0,
x: +50,
ease: Power4.easeOut,
}, '.3', '-=.3')
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Lobster);
* {
margin: 0;
padding: 0;
}
.display-none{
display: none;
}
body {
font-family: 'Open Sans', sans-serif;
}
.global {
width: 100%;
height: 720px;
background: #7781A9;
display: flex;
justify-content: space-around;
align-items: center;
}
.content {
background-color: #ECECEC;
overflow: hidden;
width: 700px;
border-radius: 10px 10px 0 0;
}
.content-header {
background-color: #F5F5F5;
padding: 10px;
font-size: 45px;
border-radius: 10px 10px 0 0;
font-family: 'Lobster', cursive;
color: #675959;
}
.content-info {
display: flex;
}
.info-left span {
display: block;
padding: 10px;
background-color: #E76060;
text-align: center;
font-size: 25px;
color: #FBFBFB;
}
.info-left span:nth-child(1) {
background-color: #FF6868;
font-weight: 600;
}
.info-left span:nth-child(2){
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06) inset;
}
.info-right {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.info-right div {
background-color: #E8F4E8;
margin: 10px;
}
.right-significado {
display: flex;
flex: 1;
}
.right-personalidad {
display: flex;
flex: 1;
}
.significado-t {
background-color: #FBFBEC;
display: flex;
align-items: center;
padding: 10px;
flex: 1;
justify-content: center;
font-weight: 600;
font-size: 19px;
border-radius: 10px 0 0 10px;
}
.significado-v {
display: flex;
align-items: center;
padding: 10px;
flex: 3;
justify-content: center;
box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.03) inset;
}
.personalidad-t {
background-color: #FBFBEC;
display: flex;
align-items: center;
padding: 10px;
flex: 1;
justify-content: center;
font-weight: 600;
font-size: 19px;
border-radius: 10px 0 0 10px;
}
.personalidad-v {
display: flex;
align-items: center;
padding: 10px;
flex: 3;
justify-content: center;
box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.03) inset;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment