Modern web development is about grabbing the visitors' attention. There are several ways of making your website more eye-catching and engaging. One of the most appealing methods is adding animated hero text to your landing page.
In this article I have compiled some of the most creative effects I've seen, to inspire you for your own projects in the future.
For each animation, I will provide a direct link, an interactive preview so you can get an initial impression on the fly as well as the author links, so you can explore more of their work, too.
1. Hover slider (dark/light)
By: Ivan Grozdic
2. Fluid text hover
By: Robin Delaporte
3. CSS Perspective Text Hover
By: James Bosworth
4. Apple TV - Word Rotation
By: Steven Lei
5. Spotlight Cursor Text
By: Caroline Artz
6. SVG Text Mask w/ Video Fill
By: Dudley Storey
7. SVG Text Animation w/ Stroke Offset
By: Mack Ayache
8. Shattering Text Animation
By: Arsen Zbidniakov
Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!
Connect me on Twitter, LinkedIn and GitHub!
Visit my Blog for more articles like this.
Top comments (42)
I just wanted to know if there is any way to get custom domain like .com , .in, etc for free .
I created a discussion about this a while ago 😉
If you are interested, you can check here 😉
Thanks for responding.
I read your post and visited both sites I wanted a name techwithspandy with any domain but when I checked for availability the all of the domains aren't available..
Kindly help me thru it.
Thanks
Also I read that .tk .cf domains are not good for seo.
So any way to get good domain like .com, .tech, .xyz, etc for free with seo.
Instead of searching just for a second level name, try including the top level name as well (.tk, .ml, .ga, .cf or .gq). So, instead of "techwithspandy" search for "techwithspandy.tk", etc.
ok , will check it
Thanks
You can get some really cheap ones (other than .tk, .ml, .ga, .cf or .gq), just pick a registrar and check their prices. I would suggest namecheap.com, but here is discussion with more alternatives 😉
See my main problem is that i am 14 yrs old and i cant spend money on this thing so i need some alternative for this.
namecheap.com also requires money.
Kindly guide me thru this .
And also if it is possible thru freenom.com
then kindly make a post on full procedure of it from getting the domain to adding it in vercel .
Thanks
You are awesome :)
Hey dude, just a heads up: it's not really appropriate to derail someone's post with begging them to hold your hand through an unrelated process and asking for their private contact info. Go look at the discussion they've linked and do some research on your own.
Ohk I am sorry for that and also thankz Mazda for the post I have figured out how to use it. I have now domain for free for a year.
Check it out :- techwithspandy.tk
Glad you got it figured out, pleasure to help 💯👍
Nice job!
Thank you so much, Gustavo 💯👍✨
Madza shoots ... and he scores. Seriously your posts are simple and aesthetic. Nice one
Thank you so much, Victor! ✨💯👍
gsap is just pure love
Awesome to hear you liked it 👍💯✨
Amazing effects
Thank you so much 👍😉
Awesome list here @madza
Thanks for sharing ❤
My pleasure! 👍💯
Very cool, thanks for sharing these great ideas!
My pleasure 👍💯🎉
Wow mate, just wow. This whole thing seems like magic to me. The designs the animations, the creativity. This is too cool :D
Thanks for checking them out 😉👍
This is craaaaazy🤯
Hopefully it helped 👍✨💯
I really like the SVG Text Mask w/ Video Fill. Nice job. Thanks for sharing!
Awesome to hear ✨👍
Some comments may only be visible to logged-in visitors. Sign in to view all comments.