HTML
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="174 27 960 560" style="enable-background:new 174 27 960 560;" xml:space="preserve">
<g id="XMLID">
<polygon id="topS" points="865.6,124.9 514.4,124.9 496.7,92.3 882.8,92.3 "/>
<polygon id="middleS" points="733.1,239.5 602.5,240.4 578.6,200.6 749.4,199.7 "/>
<polygon id="topV" points="837.6,178.8 623.9,177.6 601.1,145.1 856,143.6 "/>
<polygon id="slantV" points="639.3,491.3 820,143.8 856,143.6 656.9,525 "/>
<polygon id="slantS" points="649.9,342.7 724.1,199.5 764.7,199.7 672.1,376.9 "/>
<polygon id="slantV2" points="661.9,466.9 467.1,92.5 431,92.3 644.3,500.6 "/>
<polygon id="slantS2" points="614.2,240.4 532.8,92.5 496.7,92.3 576.6,240.4 "/>
<polygon id="slantS3" points="656.8,403.4 591,275.7 634.2,273 677.3,366.4 "/>
</g>
</svg>
<div id=snow></div>
<div class="container">
<span class="txt anim-text-flow">SREE VISION '16
</span>
</div>
<div class="cont">
<button type="button" >
explore
</button>
</div>
<p id="b" > Bigger </p>
<p id="be"> Better </p>
<p id="g"> Grandeur </p>
SCSS
body
{
background:#222;
overflow:hidden;
color: #fff;
font-family: 'Ubuntu','Open Sans';
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 2.3em;
line-height: 2;
font-weight: 600;
text-rendering: optimizeLegibility;
text-align: center;
}
p
{
position: absolute;
bottom:0%;
left: 80%;
transform: translate(-50%, -50%);
text-transform: uppercase;
font-size: 1.0em;
letter-spacing: 0.2em;
overflow: hidden;
visibility:hidden;
}
#b
{
bottom:10%;
color:#80DEEA;
}
#be
{
bottom:20%;
color:#01579B;
}
#g
{
bottom:0%;color:#880E4F;
}
svg
{position:relative;
visibility:hidden;
transform: translate(-50%, -50%);
transform:scale(0.8);
}
#topS
{
fill:#01579B;
}
#slantS2
{
fill:#29B6F6;
}
#slantS
{
fill:#1976D2;
}
#middleS
{
fill:#0D47A1;
}
#slantS3
{
fill:#42A5F5;
}
#topV
{
fill:#AD1457;
}
#slantV{
fill:#E91E63;
}
#slantV2
{
fill:#C2185B;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
#snow{
background: none;
font-family: Androgyne;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:1;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
/*
* Animation module with all animation code
*/
.anim-text-flow,
.anim-text-flow-hover:hover {
/*
* Animation variables
*/
$animationSteps: 20;
$animationDuration: 50;
$animationElement: span;
$animationElementsCount: 100;
$delayBetweenLetters: 0.2;
/*
* Elements settings
*/
#{$animationElement} {
animation-name: anim-text-flow-keys;
animation-duration: #{$animationDuration}s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
/*
* Keyframe loop
*/
@keyframes anim-text-flow-keys {
@for $i from 0 through $animationSteps {
#{percentage($i * (1 / $animationSteps))} {
color: hsla(random(365), 60, 60, 1);
}
}
}
/*
* Element animation delay loop
*/
$totalDelayTime: $animationElementsCount * $delayBetweenLetters;
@for $i from 1 through $animationElementsCount {
#{$animationElement}:nth-of-type(#{$i}) {
animation-delay: #{($i * $delayBetweenLetters) - $totalDelayTime}s;
}
}
}
////////////////////////////
// DEMO CODE
///////////////////////////
.container {
position: absolute;
top: 10%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.txt {
display: block;
}
button{
position: absolute;
bottom:0%;
left: 50%;
transform: translate(-50%, -50%);
cursor:pointer;
height: 30px;
width: 200px;
border: 0;
border-radius: 5px;
text-transform: uppercase;
font-size: 0.4em;
letter-spacing: 0.2em;
overflow: hidden;
visibility :hidden;
background-image: linear-gradient(to right, #E040FB, #00BCD4);
color:white;
}
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
JAVASCRIPT
$('.txt').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$(window).load(function(){
var st=new TimelineMax({repeat:0});
var st2=new TimelineMax({repeat:0});
var st3=new TimelineMax({repeat:0});
var st4=new TimelineMax({repeat:0});
var st5=new TimelineMax({repeat:0});
var st6=new TimelineMax({repeat:0});
var st7=new TimelineMax({repeat:0});
var st8=new TimelineMax({repeat:0});
var st9=new TimelineMax({repeat:0});
var st10=new TimelineMax({repeat:0});
var st11=new TimelineMax({repeat:1});
var st12=new TimelineMax({repeat:0});
st3
// .from('#XMLID', 0.66, {y: -35}, 0.33)
// .to("#XMLID", 2.5, {rotationY: 360*5, ease: Power2.easeOut, transformOrigin:'50% 50%', delay: 0.36})
// .to('#XMLID', 0.46, {y: -35, delay: 0.16});
.to("#topS", 1.13, {scaleY: 0.2, transformOrigin:'50% 50%'}, 3.6)
.to("#topS", 1.58, {scaleY: 1,visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st
.to("#topS2", 2.03, {scale: 0, transformOrigin:'50% 50%'}, 3.6)
.to("#topS2", 1.58, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st2
.to("#slantS", 3.13, {scale: 0, transformOrigin:'50% 50%'}, 3.6)
.to("#slantS", 1.58, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st4
.to("#slantS2", 3.13, {scale: 0, transformOrigin:'50% 50%'}, 3.6)
.to("#slantS2", 1.58, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st5
.to("#slantS3", 4.13, {scale: 0, transformOrigin:'50% 50%'}, 3.6)
.to("#slantS3", 1.58, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st6
.to('#topV', 1.2, {scaleY: 0, scaleX: 1,visibility:'visible' , transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 0.3)})
.from('#topV', 1.46, {scaleY: 0, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 1});
st7
.to("#middleS", 1.13, {scale: 0, transformOrigin:'50% 50%'}, 3.6)
.to("#middleS", 1.58, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st8
.set('#slantV', {scale: 0, autoAlpha: 1, transformOrigin: 'center top'})
.fromTo('#slantV', 0.5, {y: 0}, {y: 0,visibility:'visible' })
.from('#slantV', 0.26, {scaleY: 1})
.from('#slantV', 0.56, {scaleX: 1})
.from('#slantV', 0.43, {scaleY: 0, delay: 1.8})
.from('#slantV', 0.33, {scaleX: 0, y: 20})
st9
.set('#slantV2', {scale: 0, autoAlpha: 1, transformOrigin: 'center bottom'})
.fromTo('#slantV2', 1, {y: 0}, {y: 0,visibility:'visible' ,})
.from('#slantV2', 0.26, {scaleY: 1})
.from('#slantV2', 0.56, {scaleX: 1})
.from('#slantV2', 0.43, {scaleY: 0, delay: 1.8})
.from('#slantV2', 0.33, {scaleX:0, y: 20})
st10
.to("button", 8.13, {scaleY: 0.2, transformOrigin:'50% 50%'}, 3.6)
.to("button", 1.58, {scaleY: 1,visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.1)});
st11
.to('#XMLID', 1.76, {rotation: -90, ease: Elastic.easeOut.config(1, 0.5),transformOrigin:'50% 50%',delay: 0.39})
.to("#XMLID", 0.8, {rotation: -45, ease: Elastic.easeOut.config(1, 0.5),delay: 0.46})
.to('#XMLID', 0.46, {rotation: 0, ease: Elastic.easeOut.config(1, 0.5),delay: 0.36})
st12
.to('p', 8.0, {scaleY: 0, scaleX: 1.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 0.3),visibility:'visible'})
.from('p', 0.46, {scaleY: 0, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 1});
});
