Classic text scroller

Developer
Size
5,758 Kb
Views
6,072

How do I make an classic text scroller?

Oldschool effect. What is a classic text scroller? How do you make a classic text scroller? This script and codes were developed by Josep Llodrà on 19 January 2023, Thursday.

Classic text scroller Previews

Classic text scroller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Classic text scroller</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- best in webkit -->
<body>
<div id="text"> Hola chicos! this is a classic text scroller in css3 for your browser. Play some 8-bit music while watching...
</div>
<div id="container">
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Classic text scroller - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=VT323);
html { height: 100%; background-color: #31568b; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF31568B', endColorstr='#FFFF078B'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMxNTY4YiIvPjxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjMzE1NjhiIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjIzNzhiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #31568b), color-stop(83%, #31568b), color-stop(100%, #22378b)); background-image: -webkit-linear-gradient(top, #31568b 0%, #31568b 83%, #22378b 100%); background-image: linear-gradient(to bottom, #31568b 0%, #31568b 83%, #22378b 100%);
}
body { width: 100%; overflow: hidden;
}
@-webkit-keyframes osc { 0% { top: 0px; } 100% { top: 200px; }
}
@keyframes osc { 0% { top: 0px; } 100% { top: 200px; }
}
@-webkit-keyframes scroll { 0% { left: 100%; } 100% { left: -310800px; }
}
@keyframes scroll { 0% { left: 100%; } 100% { left: -310800px; }
}
.letter-0 { display: inline-block; position: absolute; left: 0px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-1 { display: inline-block; position: absolute; left: 35px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-2 { display: inline-block; position: absolute; left: 70px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-3 { display: inline-block; position: absolute; left: 105px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-4 { display: inline-block; position: absolute; left: 140px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-5 { display: inline-block; position: absolute; left: 175px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-6 { display: inline-block; position: absolute; left: 210px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-7 { display: inline-block; position: absolute; left: 245px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-8 { display: inline-block; position: absolute; left: 280px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-9 { display: inline-block; position: absolute; left: 315px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-10 { display: inline-block; position: absolute; left: 350px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-11 { display: inline-block; position: absolute; left: 385px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-12 { display: inline-block; position: absolute; left: 420px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-13 { display: inline-block; position: absolute; left: 455px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.3s; animation-delay: 1.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-14 { display: inline-block; position: absolute; left: 490px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-15 { display: inline-block; position: absolute; left: 525px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-16 { display: inline-block; position: absolute; left: 560px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-17 { display: inline-block; position: absolute; left: 595px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-18 { display: inline-block; position: absolute; left: 630px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-19 { display: inline-block; position: absolute; left: 665px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1.9s; animation-delay: 1.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-20 { display: inline-block; position: absolute; left: 700px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-21 { display: inline-block; position: absolute; left: 735px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-22 { display: inline-block; position: absolute; left: 770px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.2s; animation-delay: 2.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-23 { display: inline-block; position: absolute; left: 805px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.3s; animation-delay: 2.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-24 { display: inline-block; position: absolute; left: 840px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-25 { display: inline-block; position: absolute; left: 875px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-26 { display: inline-block; position: absolute; left: 910px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.6s; animation-delay: 2.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-27 { display: inline-block; position: absolute; left: 945px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-28 { display: inline-block; position: absolute; left: 980px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.8s; animation-delay: 2.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-29 { display: inline-block; position: absolute; left: 1015px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2.9s; animation-delay: 2.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-30 { display: inline-block; position: absolute; left: 1050px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-31 { display: inline-block; position: absolute; left: 1085px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.1s; animation-delay: 3.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-32 { display: inline-block; position: absolute; left: 1120px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.2s; animation-delay: 3.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-33 { display: inline-block; position: absolute; left: 1155px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.3s; animation-delay: 3.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-34 { display: inline-block; position: absolute; left: 1190px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.4s; animation-delay: 3.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-35 { display: inline-block; position: absolute; left: 1225px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-36 { display: inline-block; position: absolute; left: 1260px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.6s; animation-delay: 3.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-37 { display: inline-block; position: absolute; left: 1295px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.7s; animation-delay: 3.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-38 { display: inline-block; position: absolute; left: 1330px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.8s; animation-delay: 3.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-39 { display: inline-block; position: absolute; left: 1365px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 3.9s; animation-delay: 3.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-40 { display: inline-block; position: absolute; left: 1400px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-41 { display: inline-block; position: absolute; left: 1435px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.1s; animation-delay: 4.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-42 { display: inline-block; position: absolute; left: 1470px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.2s; animation-delay: 4.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-43 { display: inline-block; position: absolute; left: 1505px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.3s; animation-delay: 4.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-44 { display: inline-block; position: absolute; left: 1540px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.4s; animation-delay: 4.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-45 { display: inline-block; position: absolute; left: 1575px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-46 { display: inline-block; position: absolute; left: 1610px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.6s; animation-delay: 4.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-47 { display: inline-block; position: absolute; left: 1645px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.7s; animation-delay: 4.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-48 { display: inline-block; position: absolute; left: 1680px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.8s; animation-delay: 4.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-49 { display: inline-block; position: absolute; left: 1715px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4.9s; animation-delay: 4.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-50 { display: inline-block; position: absolute; left: 1750px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-51 { display: inline-block; position: absolute; left: 1785px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.1s; animation-delay: 5.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-52 { display: inline-block; position: absolute; left: 1820px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.2s; animation-delay: 5.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-53 { display: inline-block; position: absolute; left: 1855px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.3s; animation-delay: 5.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-54 { display: inline-block; position: absolute; left: 1890px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.4s; animation-delay: 5.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-55 { display: inline-block; position: absolute; left: 1925px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.5s; animation-delay: 5.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-56 { display: inline-block; position: absolute; left: 1960px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.6s; animation-delay: 5.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-57 { display: inline-block; position: absolute; left: 1995px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.7s; animation-delay: 5.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-58 { display: inline-block; position: absolute; left: 2030px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.8s; animation-delay: 5.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-59 { display: inline-block; position: absolute; left: 2065px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 5.9s; animation-delay: 5.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-60 { display: inline-block; position: absolute; left: 2100px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6s; animation-delay: 6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-61 { display: inline-block; position: absolute; left: 2135px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.1s; animation-delay: 6.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-62 { display: inline-block; position: absolute; left: 2170px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.2s; animation-delay: 6.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-63 { display: inline-block; position: absolute; left: 2205px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.3s; animation-delay: 6.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-64 { display: inline-block; position: absolute; left: 2240px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.4s; animation-delay: 6.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-65 { display: inline-block; position: absolute; left: 2275px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-66 { display: inline-block; position: absolute; left: 2310px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.6s; animation-delay: 6.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-67 { display: inline-block; position: absolute; left: 2345px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.7s; animation-delay: 6.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-68 { display: inline-block; position: absolute; left: 2380px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.8s; animation-delay: 6.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-69 { display: inline-block; position: absolute; left: 2415px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 6.9s; animation-delay: 6.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-70 { display: inline-block; position: absolute; left: 2450px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7s; animation-delay: 7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-71 { display: inline-block; position: absolute; left: 2485px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.1s; animation-delay: 7.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-72 { display: inline-block; position: absolute; left: 2520px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.2s; animation-delay: 7.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-73 { display: inline-block; position: absolute; left: 2555px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.3s; animation-delay: 7.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-74 { display: inline-block; position: absolute; left: 2590px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.4s; animation-delay: 7.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-75 { display: inline-block; position: absolute; left: 2625px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.5s; animation-delay: 7.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-76 { display: inline-block; position: absolute; left: 2660px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.6s; animation-delay: 7.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-77 { display: inline-block; position: absolute; left: 2695px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.7s; animation-delay: 7.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-78 { display: inline-block; position: absolute; left: 2730px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.8s; animation-delay: 7.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-79 { display: inline-block; position: absolute; left: 2765px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 7.9s; animation-delay: 7.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-80 { display: inline-block; position: absolute; left: 2800px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8s; animation-delay: 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-81 { display: inline-block; position: absolute; left: 2835px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.1s; animation-delay: 8.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-82 { display: inline-block; position: absolute; left: 2870px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.2s; animation-delay: 8.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-83 { display: inline-block; position: absolute; left: 2905px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.3s; animation-delay: 8.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-84 { display: inline-block; position: absolute; left: 2940px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.4s; animation-delay: 8.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-85 { display: inline-block; position: absolute; left: 2975px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.5s; animation-delay: 8.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-86 { display: inline-block; position: absolute; left: 3010px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.6s; animation-delay: 8.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-87 { display: inline-block; position: absolute; left: 3045px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.7s; animation-delay: 8.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-88 { display: inline-block; position: absolute; left: 3080px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.8s; animation-delay: 8.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-89 { display: inline-block; position: absolute; left: 3115px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 8.9s; animation-delay: 8.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-90 { display: inline-block; position: absolute; left: 3150px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9s; animation-delay: 9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-91 { display: inline-block; position: absolute; left: 3185px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.1s; animation-delay: 9.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-92 { display: inline-block; position: absolute; left: 3220px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.2s; animation-delay: 9.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-93 { display: inline-block; position: absolute; left: 3255px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.3s; animation-delay: 9.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-94 { display: inline-block; position: absolute; left: 3290px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.4s; animation-delay: 9.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-95 { display: inline-block; position: absolute; left: 3325px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.5s; animation-delay: 9.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-96 { display: inline-block; position: absolute; left: 3360px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.6s; animation-delay: 9.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-97 { display: inline-block; position: absolute; left: 3395px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.7s; animation-delay: 9.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-98 { display: inline-block; position: absolute; left: 3430px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.8s; animation-delay: 9.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-99 { display: inline-block; position: absolute; left: 3465px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 9.9s; animation-delay: 9.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-100 { display: inline-block; position: absolute; left: 3500px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10s; animation-delay: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-101 { display: inline-block; position: absolute; left: 3535px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.1s; animation-delay: 10.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-102 { display: inline-block; position: absolute; left: 3570px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.2s; animation-delay: 10.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-103 { display: inline-block; position: absolute; left: 3605px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.3s; animation-delay: 10.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-104 { display: inline-block; position: absolute; left: 3640px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.4s; animation-delay: 10.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-105 { display: inline-block; position: absolute; left: 3675px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.5s; animation-delay: 10.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-106 { display: inline-block; position: absolute; left: 3710px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.6s; animation-delay: 10.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-107 { display: inline-block; position: absolute; left: 3745px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.7s; animation-delay: 10.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-108 { display: inline-block; position: absolute; left: 3780px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.8s; animation-delay: 10.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-109 { display: inline-block; position: absolute; left: 3815px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 10.9s; animation-delay: 10.9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-110 { display: inline-block; position: absolute; left: 3850px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 11s; animation-delay: 11s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.letter-111 { display: inline-block; position: absolute; left: 3885px; -webkit-animation-name: osc; animation-name: osc; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 11.1s; animation-delay: 11.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
#text { display: none;
}
#container { position: absolute; top: 25%; font-family: "VT323", monospace; font-size: 80px; -webkit-animation-name: scroll; animation-name: scroll; -webkit-animation-duration: 1776s; animation-duration: 1776s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running;
}
#container span { background: -webkit-linear-gradient(#ff3, #f20); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; color: #fff;
}
#container span:after { background: none; content: attr(data-text); left: 0; position: absolute; text-shadow: 0px 6px 0px black; top: 0; z-index: -1;
}

Classic text scroller - Script Codes JS Codes

$(document).ready(function() { var text = $('#text').html(); text = text.trim(); var c; for(var i = 0; i < text.length; i++) { c = $('#container'); c.append('<span data-text="'+text[i]+'" class="letter-'+i+'">'+text[i]+'</span>'); }
});
Classic text scroller - Script Codes
Classic text scroller - Script Codes
Home Page Home
Developer Josep Llodrà
Username jllodra
Uploaded January 19, 2023
Rating 3
Size 5,758 Kb
Views 6,072
Do you need developer help for Classic text scroller?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Llodrà (jllodra) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!