No video :(

This cursor follow interaction is too good. Let's build it

Подписаться 1,1 млн

Просмотров 25 тыс.

50% 1

bit.ly/3XBEzaJ 👈 Learn UI/UX & CSS Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a really cool, smooth cursor-follow effect using HTML, CSS, JavaScript and the GreenSock animation platform.
I spotted this effect here, and thought it'd be awesome to recreate it:
www.heights.ag...
Codepen Demo:
codepen.io/des...
0:00 - Project Preview
0:28 - HTML
1:16 - CSS
4:35 - Initial JS
5:50 - Black Cursor Follow Circle
7:06 - Hand Animation on Hover
Let's get started!
#frontend #javascript #css
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@DesignCourse Год назад

Big news. A brand new course is in the works, "Advanced Frontends" where we build highly interactive frontends (similar to those found on Awwwards). 😍

@waifufx Год назад

Sir you deserve an award for all these Awwwards content. Thank you sir.

@DesignCourse Год назад

Sweet, gimme those awards!

@waifufx Год назад

@@DesignCourse Yes Sir I rate you a lot sir

@rjm199x Год назад

legendary! you deserve all recognition!!

@felipeleon6631 Год назад

Love this type of videos! very useful

@crust5532 Год назад

Awesome tutorial. Will love to see a full GSAP tutorial in this channel. Love your contents. Also can you name the font used in this tutorial??

@DesignCourse Год назад

Bebas Neue

@pauljohn3898 Год назад

Absolutely amazing

@-0-__-0- Год назад

I did the same thing as this but instead of having a separate hand div animate, I have it placed in my mouse follower div and when it hovers over an element with a specific target, it changes into a mouse follower for that element.

@tejaskesaria7175 Год назад

We need a GSAP crash course.

@DesignCourse Год назад

I do a couple, but I will create an updated crash course here for 2023 shortly.

@tejaskesaria7175 Год назад

@@DesignCourse Thanks we will wait for it whenever you are ready with it

@outpost31737 Год назад

Nice one Gaz.

@toniok.4726 Год назад

Look nice thanks for sharing!

@izmaelmag Год назад

GSAP is great but for this particular case you can avoid downloading it and use linear interpolation one-line function in plain JS Just an example const lerp = (start, stop, amt) => amt * (stop - start) + start;

@DesignCourse Год назад

Ty. I do have an old plain vanilla js tutorial that shows doing something similar. I like to show GSAP because likely in the context of such a project, you'd be utilizing GSAP for other parts of the layout.

@izmaelmag Год назад

@@DesignCourse unfortunately junior developers often adds huge libraries into the project bundle for a ~1% of its features 😅

@Choco_Goodman Год назад

this not work well when mouse leave , can you fix that sir? i wanna send you bug

@qwerty-or1yg Год назад

Does anyone still use plain html, css and js these days? Would be interesting to see an approach to these kinds of interactions using frontend frameworks and making it reusable throughout the project.

@DesignCourse Год назад

The problem with that is there are a lot of frameworks that people use. Vue, React, Svelte, Angular even. If I show it the vanilla JS way, it should give everyone a solid understanding of how to tackle it.