2
Moving Letters | Text animated with JavaScript & anime.js
source link: https://tobiasahlin.com/moving-letters/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Source
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">THURSDAY</span>
<span class="line line2"></span>
</span>
</h1>
THURSDAY
Source
<h1 class="ml2">Sunny mornings</h1>
Sunny mornings
Source
<h1 class="ml3">Great Thinkers</h1>
Great Thinkers
Source
<h1 class="ml4">
<span class="letters letters-1">Ready</span>
<span class="letters letters-2">Set</span>
<span class="letters letters-3">Go!</span>
</h1>
Ready Set Go!
Source
<h1 class="ml5">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters letters-left">Signal</span>
<span class="letters ampersand">&</span>
<span class="letters letters-right">Noise</span>
<span class="line line2"></span>
</span>
</h1>
Signal & Noise
Source
<h1 class="ml6">
<span class="text-wrapper">
<span class="letters">Beautiful Questions</span>
</span>
</h1>
Beautiful Questions
Source
<h1 class="ml7">
<span class="text-wrapper">
<span class="letters">Reality is broken</span>
</span>
</h1>
Reality is broken
Source
<h1 class="ml8">
<span class="letters-container">
<span class="letters letters-left">Hi</span>
<span class="letters bang">!</span>
</span>
<span class="circle circle-white"></span>
<span class="circle circle-dark"></span>
<span class="circle circle-container"><span class="circle circle-dark-dashed"></span></span>
</h1>
Source
<h1 class="ml9">
<span class="text-wrapper">
<span class="letters">Coffee mornings</span>
</span>
</h1>
Coffee mornings
Source
<h1 class="ml10">
<span class="text-wrapper">
<span class="letters">Domino Dreams</span>
</span>
</h1>
Domino Dreams
Source
<h1 class="ml11">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">Hello Goodbye</span>
</span>
</h1>
Hello Goodbye
Source
<h1 class="ml12">A new production</h1>
A new production
Source
<h1 class="ml13">Rising Strong</h1>
Rising Strong
Source
<h1 class="ml14">
<span class="text-wrapper">
<span class="letters">Find Your Element</span>
<span class="line"></span>
</span>
</h1>
Find Your Element
Source
<h1 class="ml15">
<span class="word">Out</span>
<span class="word">now</span>
</h1>
Out now
Source
<h1 class="ml16">Made with love</h1>
Made with love
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK