Start Using Codepad Animation

HTML
<section class="container"> <h1> <span class="title">Keep calm</span> <span class="title">and start</span> <span class="title">using codepad</span> </h1> <div class="button">restart</div> </section>
CSS
html, body { height: 100%; width: 100%; font-family: 'Fjalla One', sans-serif; background: #3a7bd5; background: linear-gradient(to left, #3a7bd5, #3a6073); display: flex; justify-content: center; align-items: center; } .container { display: block; max-width: 320px; } .button { float: left; position: relative; bottom: -65px; left: 50%; transform: translateX(-50%) rotate(-10deg); color: #4ECDC4; text-transform: uppercase; opacity: 0; visibility: hidden; cursor: pointer; } .button span { transform: skew(-10deg); display: block; float: left; text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px; } h1 { color: #fff; text-transform: uppercase; font-size: 42px; margin: 0; line-height: 47px; letter-spacing: 2px; } .title { transform: translateX(-50%) rotate(-10deg); display: block; float: left; left: 50%; position: relative; } .title span { transform: skew(-10deg); display: block; float: left; text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px, #533d4a 5px 5px, #533d4a 6px 6px; min-width: 10px; min-height: 10px; position: relative; } .title:nth-child(1) { color: #4ECDC4; } .title:nth-child(2) { color: #FF6B6B; } .title:nth-child(3) { color: #FFFFFF; }
JAVASCRIPT
$(document).ready(function() { $(".title").lettering(); $(".button").lettering(); }); $(document).ready(function() { animation(); }, 1000); $('.button').click(function() { animation(); }); function animation() { var title1 = new TimelineMax(); title1.to(".button", 0, { visibility: 'hidden', opacity: 0}) title1.staggerFromTo(".title span", 0.5, {ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80}, {ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05); title1.to(".button", 0.2, {visibility: 'visible' ,opacity: 1}) }
Expand for more options Login