"Intro Text Animation"
Bootstrap 3.1.0 Snippet by LeandroBizzinotto

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="itranslate.css"> <link href="https://fonts.googleapis.com/css?family=Orbitron|Quicksand" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> </head> <body> <p>Produced by Leandro Bizzinotto</p> <div class="welcome-section content-hidden"> <div class="content-wrap"> <ul class="fly-in-text"> <li>Y O U R </li> <li>I N</li> <li>T R O </li> <li>H E R E </li> </ul> <a href="#" class="enter-button">Get start here</a> </div> </div> <script type="text/javascript"> $(function () { var welcomeSection = $('.welcome-section'), enterButton = welcomeSection.find('.enter-button'); setTimeout(function () { welcomeSection.removeClass('content-hidden'); }, 800); enterButton.on('click', function (e) { e.preventDefault(); welcomeSection.addClass('content-hidden').fadeOut(); }); }); </script> </body> </html>
*{ margin: 0; padding: 0;} body{background: #101010;} p{color: white; font-size: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)} .welcome-section{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; overflow: hidden; font-family: 'Orbitron', sans-serif; font-weight: 700;} .content-wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)} .fly-in-text{list-style: none} .fly-in-text li{ display: inline-block; margin-right: 20px; font-size: 4em; color: #fff; opacity: 1; transition: all 3s ease} .fly-in-text li:nth-child(4){margin-right: 0;} .enter-button{display:block; text-align: center; font-size: 2em; text-decoration: none; color: #adff2f; margin-top: 30px; transition: all 1s ease 3s} .content-hidden .fly-in-text li{ opacity: 0;} .content-hidden .fly-in-text li:nth-child(1){transform: translate3d(-150px, 0, 0)} .content-hidden .fly-in-text li:nth-child(2){transform: translate3d(0px, 0, 0)} .content-hidden .fly-in-text li:nth-child(3){transform: translate3d(100px, 0, 0)} .content-hidden .fly-in-text li:nth-child(4){transform: translate3d(200px, 0, 0)} .content-hidden .enter-button{opacity: 0; transform: translate3d(0, -30px, 0)}

Related: See More


Questions / Comments: