Landing Page

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}); });
Expand for more options Login