Recreating The Hover Effect That Shocked Frontend Devs

No video

Recreating The Hover Effect That Shocked Frontend Devs

Рет қаралды 6,467

Conner Ardman

Күн бұрын

Пікірлер: 28

@johnnycoding1423 Жыл бұрын

I just write a react component for this animation according to this video, really brilliant. thank you for sharing!

@rnwonder107 Жыл бұрын

Create an npm package for it

@abubakarsadeeq2974 8 ай бұрын

It will be helpful if you can share it with people like me.

@rubenzafratraver6819 8 ай бұрын

did you manage to do it??

@johnnycoding1423 8 ай бұрын

@@abubakarsadeeq2974 working on it!~

@johnnycoding1423 8 ай бұрын

@@rubenzafratraver6819 working on it!~

@nested9301 Жыл бұрын

Impressive now create an npm package for that 😂❤

@hogandromgool2062 17 күн бұрын

I used the same affect from probably the same source you did.

@And1997Ruz Жыл бұрын

I was literally showing this to my friend 3 days ago, and I've been wondering how it's done since the Frontend Expert's launch. Looks stunning

@vinothkumarthangavelu8724 Жыл бұрын

This really awesome, I just coded along with your video but It didn't worked. Also its has no error. Initially dot's like line (" \" ) appeared in TOP to BOTTOM(Y axis to X) after Image appeared with not action. And then nothing happened. Can I get a github link for learning.

@shichii4690 Жыл бұрын

omg I wish I can be as good as you someday ❤

@ConnerArdman Жыл бұрын

Study and practice enough and you can be better 👌

@boody8844 Жыл бұрын

Looks very nice!

@thegoatoffootballmessi Жыл бұрын

Hi Bro make immediate video on how to install a package on atom ide please.

@mirjalol_shamsiddinov Жыл бұрын

💖💖💖💖thanks

@codewithsehran 3 ай бұрын

I'm finding something like that

@scooterman9058 Жыл бұрын

i have a really good computer but still for some reason this code you wrote here lags a lot when hovering over the picture + moving the particles around, but when its on the frontend expert site there is no lag

@ConnerArdman Жыл бұрын

Yeah IIRC there were issues with that when they first made the FrontendExpert one and it's since been optimized a bit. The simplest optimization that comes to mind would be to just make the individual circles bigger and/or lower the frame rate so there's less calculations to make. You could also try to be smarter about which ones need to be updated, when they need to be updated, etc.

@alexfrozen 4 ай бұрын

Ofc it will lag. Making optimization mentioned above, about resting pixels, a good way to spend a time to nowhere. Any rasterization algos in JS, per pixel jobs, a very bad idea. Like smashing thausands stones with one hummer. They should be placed in special instrument like pressing mechanism. I mean GPU. You HAVE TO use shaders or don't do it at all. And even more, you MAY NOT teach to hit every stone by hammer, it's a kind of crime in development.

@abubakarsadeeq2974 Жыл бұрын

How I wish I can get the source code

@kusalghosh7848 Жыл бұрын

Where can I learn this much of animation development?

@ConnerArdman Жыл бұрын

We have a free CSS animation video on FrontendExpert (linked in the description) that can be a good starting place just to learn the basics of how animations work. Beyond that, I'm sure there's some great tutorials on KZfaq and whatnot, but it mostly comes down to practice. There's nothing all that unique about animation code compared to other DOM manipulation code. I think the difficulty is more about deciding what to code to make the design look good, which beyond some design principles is mostly a skill learned through practice.

@kusalghosh7848 Жыл бұрын

@@ConnerArdman thanks sir

@alexfrozen 4 ай бұрын

@@kusalghosh7848best way to study this magic is shadertoy (google it). Also I can recommend "The Art of Code" youtube channel and work of Inigo Quilez. He has a lot of publications and hints over the web. And forget about CSS/JS tricks. They are specialized for layout, coloring and compositional purposes. Maybe some basic color/size/transform transitions. Using CSS/JS tools for pixelwork, it's huge shame in the eyes of real experts, but huge respect from stupid (sorry) people. Last one will give a lot of lies like "you're smart" and some and these lies can bury you alive in illusions. Silent degradation with proud face.

@milancodes Жыл бұрын

who was responsible for this incredible idea on the frontendExpert site?

@blender1188 3 ай бұрын

Frontend devs may like it (me included) but the average user doesn’t care about this stuff at all. I have seen sites with all bangs and whistles being replaced with plain sites because of this.

@ConnerArdman 3 ай бұрын

True, but this is a website literally for frontend developers… Gotta design to your target demographic.