6

8 Creative Text Animations for Your Website's Hero Area 😍🎉

 2 years ago
source link: https://dev.to/madza/8-creative-text-animations-for-your-websites-hero-area-gbo
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.
neoserver,ios ssh client
Cover image for 8 Creative Text Animations for Your Website's Hero Area 😍🎉
Madza

Posted on Apr 19

• Originally published at madza.hashnode.dev

8 Creative Text Animations for Your Website's Hero Area 😍🎉

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.

Discussion (37)

pic

Collapse

Expand

I just wanted to know if there is any way to get custom domain like .com , .in, etc for free .

Comment button Reply

Collapse

Expand

Author

Apr 19

I created a discussion about this a while ago 😉
If you are interested, you can check here 😉

Comment button Reply

Collapse

Expand

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

Thread

Thread

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.

Thread

Thread

Author

Apr 19

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.

Thread

Thread

ok , will check it
Thanks

Thread

Thread

Sloan, the sloth mascot

Comment deleted

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 😉

Thread

Thread

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 .

Thread

Thread

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 :)

Thread

Thread

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.

Thread

Thread

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

Thread

Thread

Author

Apr 19

Glad you got it figured out, pleasure to help 💯👍

Comment button Reply

Collapse

Expand

Madza shoots ... and he scores. Seriously your posts are simple and aesthetic. Nice one

Comment button Reply

Collapse

Expand

Author

Apr 19

Thank you so much, Victor! ✨💯👍

Comment button Reply

Collapse

Expand

Collapse

Expand

Author

Apr 19

Thank you so much, Gustavo 💯👍✨

Comment button Reply

Collapse

Expand

Collapse

Expand

Author

Apr 20

Thank you so much 👍💯

Comment button Reply

Collapse

Expand

Wow mate, just wow. This whole thing seems like magic to me. The designs the animations, the creativity. This is too cool :D

Comment button Reply

Collapse

Expand

Author

Apr 22

Thanks for checking them out 😉👍

Comment button Reply

Collapse

Expand

Collapse

Expand

Author

Apr 22

Hopefully it helped 👍✨💯

Comment button Reply

Collapse

Expand

I really like the SVG Text Mask w/ Video Fill. Nice job. Thanks for sharing!

Comment button Reply

Collapse

Expand

Collapse

Expand

Absolutely love these! Always a pleasure to check out your posts! <3

Comment button Reply

Collapse

Expand

Author

Apr 20

Thank you so much, SVGator! 😍✨

Comment button Reply

Collapse

Expand

Collapse

Expand

Author

Apr 20

Awesome to hear you liked it 👍💯✨

Comment button Reply

Collapse

Expand

Very cool, thanks for sharing these great ideas!

Comment button Reply

Collapse

Expand

Collapse

Expand

Comment marked as low quality/non-constructive by the community. View Code of Conduct

Nice work
Keep it up

Also I launched my blog website
Link :- techwithspandy.vercel.app

Comment button Reply

Collapse

Expand

why are you running around promoting your blog?
THIS COMMENT SECTION IS FOR BLOG DISCUSSION NOT PROMOTION

Comment button Reply

Collapse

Expand

No no, you got it wrong .
I am not promoting my blog I am just asking for how it is indirectly.

Thread

Thread

You're spamming links to it, which is promoting. STOP being rude to people here. You were told to knock it off earlier, so knock it off.

Thread

Thread

Ok then,
I am sorry for my behavior.
Thanks.

Comment button Reply

Collapse

Expand

Author

Apr 19

Thank you so much 💯👍✨

Comment button Reply


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK