Check out Frontend Masters! bit.ly/FrontendMastersTrial Merch: hyperplexed.store

@oamioxmocliox8082

11 ай бұрын

;)

@KB04

11 ай бұрын

Here to give my opinion. Please show more code. not complaining though, good video.👍👍

@markopolo2224

11 ай бұрын

amazing ad i bought all the courses

@neurod6013

11 ай бұрын

we need more animations on the website for more dopamine MORE MORE MOREEEEE

@DevMadeEasy

11 ай бұрын

🌟 Wow, what an incredible piece of content! 🌟 Thanks a million for sharing this gem, my dear friend! 😍💫 This is truly a treasure trove of knowledge! Keep shining bright and sharing more fantastic stuff like this! 🌈🚀

Bro if they don't use this they're losing on it, it looks so good

@stealth3122

11 ай бұрын

In all seriousness, although a fun thing to do, logos should be static. Logos are used so that your company can be recognized from a small icon, making this icon have different states makes it harder for peoples brain to make connections with how the logo actually looks. In addition to this it is fairly intrusive and is much too eye catching. I am not saying that hyperplexed is a bad designer or anything, you can tell he recognizes that most of these fun little gimmicky animations shouldn't really be used as they are often tacky or too distracting. I am also not trying to say that you should stay away from things like this in design, but just try to remember sometimes less is more :)

@maxpro751

11 ай бұрын

@@stealth3122I feel like it should be like a hidden easter egg, and if you find the hidden easter egg then this feature would be unlocked.

@CindiG6936

11 ай бұрын

That's what the logo in the tab is for

@stealth3122

11 ай бұрын

@@CindiG6936 But that is the exact problem, (other than the visual distraction) the difference in logo between other ones shown and the one that would move strangely makes it harder to recognize what the logo should actually look like.

@absolutewisp

11 ай бұрын

​@@stealth3122yeah, a gimmick like this might be fine for some kind of eye candy welcome page, but the logo in the footer should absolutely be calm and recognisable

Man, I know your content is always top tier but getting sponsorship just sets you flying to the moon 🚀😂. Congrats!

Your editing skill is actually insane! Everything was so smooth. Also the choice of background music and timing them was also spot on.

Bro, your videos just got an absolutely fascinating auditive upgrade. These sound effects rock, dude! Keep it going!

Easily one of the best channels on KZread. The presentation, everything is just amazing!

I’ve been watching these videos for a decent bit and the quality has improved so much. Good work!

This logo effect looks great!

Your so talented, I love your channel man!

what if you made the spacing non-linear, so that it travels quite some distance but the more you move away from the logo, the less spacing increases, so that it never crosses the actual line of looking weird?

@khodis2002

11 ай бұрын

Easing function or 1 - 1/(x+1) could work

This style of teaching is really great 👏

your videos are always great!

the editing on this looks so so so good!!!

you showed us a new way to make tutorials. you are amazing

you are an artist sir !

I don't know what's the most amazing : Your design ideas or you video editing skills.

Fire tutorial. I adore it and cant wait to see all the magic you do ✨🔥🎇🎇

I love Ur editing man and your unique style of content mixed with humor.

You the man. Always such cool stuff...

Dude the personality is too strong and you put so professionalism in your video... and damn that Deeeeeeeeeep voice 💕

@DBZM1k3

10 ай бұрын

For some reason, I'm hearing the Grinch. 😂

Can I just say I absolutely love your videos. I hate front-end development but you're making me want to try it.

A way easier way would've been to position the logo and tie the cursor point to a CSS translate property and just adjust that value to a maximum. Didn't test this but it seems like it would work.

@pokefreak2112

11 ай бұрын

Yeah that's how I did it on a website I worked on, define --cursor-x and --cursor-y, then you can do all the transform logic using calc() in CSS

@insideme9414

11 ай бұрын

why fear when js is here why to make it in css a wise man once said: "if you can make it in css make it" the wise man was then captured and sent to alabama

@notpea

11 ай бұрын

@@insideme9414 css lore goes hard

Can't imagine how much effort you have put for this video🤯

If your goal was efficiency, why didn't you just use 5 of the same image that's white and just tint them on awake? With the added bonus of also having a key binding to change their colour palettes.

@juandavidguarnizogutierrez4566

11 ай бұрын

that would need some extra processing, with fix data we get less memory ussage, or at least my Student brain thinks that

@AnwarulIslamYT

11 ай бұрын

@@juandavidguarnizogutierrez4566 no. now it's just added unnecessary network call for other 4 images.

@ScoutOW2

11 ай бұрын

@@juandavidguarnizogutierrez4566 Iunno, could be because i work in games and not websites, but if it only ever changes the colour its tinted by, on awake rather than render an entirely new image 5 separate times, iunno it seems like that will be less memory usage. Because 1 is just setting a value by line of code and the other is physically downloading temp files. If it was on tick it would def take up too much memory but if the colour change only happens once at the start and another time if you want it on a button press, that would be next to no memory used. Especially because i think colours assigned by code is built into the browser itself. I could be completely wrong though, I don't work on anything but games!

@bobbysmurf9915

11 ай бұрын

​@@ScoutOW2 I agree with you, It would definitely take up less storage since its only one image.

@unicodefox

11 ай бұрын

@@juandavidguarnizogutierrez4566 Memory usage is definately lower when using the same image - it has to keep 5 images loaded compared to 1.

Awesome content. Thanks for the videos!

Am definitely going to use this concept, on my own... Loved it... I was looking for some ideas like this... This concept of urs completed my needs... Kudos to you...

Your videos are so good

Heya Hyperplexed! Loved this video, as usual - you always explain everything in a way that makes it so much easier to digest (even though this video wasn't entirely explanation based, i really liked how you did it with the polyrhythms one!). Anyways, flattery aside, I've come to present to you a challenge. Redesign a website WITHOUT using dark mode. More specifically, I think it would be interesting to see what you do with 4chan and its abundance of boards... It's like Craigslist, in that its UI hasn't changed for literal years, so I'd be interested in how you could keep it faithful while adding that extra splash of stylisation that comes with a Hyperplexed design. That's if you see this comment though lmao.

ooh ol, that was fun!

I love it

I'm sure someday they'll consider using it

Ayoo the editing on this video made me forget i was watching hyperplexed, good job yo

Damn this is high quality video

Dude learning never so fun 😂, a masterpiece in terms of story telling and accuracy. Now excuse me imma watch your other videos

So educational and still enjoyable and funnyxD

Yay, I want it in the site now

Amazing content as usual, I wonder if you can do a video on how you edit/create your videos, what tools, softwares, equipments, websites you use.

that logo is pulled straight from the 90s

Man I'm not a programmer but i love and enjoy your videos.keep it up 🔥🤟🏻

Awesome content

I'll be so happy for you when you get to the million subscribers.

The most cliche ending... Loved it!

I like clean markup and non-performant properties for animations, so I'd use a single image with multiple filter shadows and manipulate their positions with custom css props

That message at the end imply that you pissed off Career Puck more then once 😂

its funny seeing people in the comments think the message at the end of the video was real lol

Lol😂 love this channel.

Do more "website" (they're really apps) redesign videos, I LOVE them.

You are the superpower

You can color SVG shapes with CSS. It was enough to use one SVG logo and add some styling. Not only it would be lightweight, it would also scale better, because, well, vectors ;)

I just laughed so harh! This is so cool

For the first time, I didn't skip an ad 😂😂😂

1:30 - Stop I beg you... It's perfect

I hope frontend masters never run out of money so they could sponsor you

Please upload more Videos!!!

Great video but why not copy and paste the same svg 5 times in HTML and give them all a different background colour. This way you can change the colour palette in CSS or based on the cursor position.

Hyperplexed be flexin'

hyperflexed!

Instead of 5 different images it would more interesting to do this with a single svg, where you generate the other colors with js and animate it. And make it scalable with svg as well.

That end music tho

newton of frontend

Wow!

Master

Brother, please make 2 videos a month. I don't know about others but I love your content so much that I can't wait that long... 😢

lol. You awesome bro

YO first time seeing a vid of yours and Holy WOW 🎉⚡️❤️💥🥳👏🏻👏🏻👏🏻 Def wonder how much time talent and $ cost for a vid of this insane quality

Idea. Use hsl and pull the saturation into it as you move the mouse away

That was some aggressive message. Gezz they need to chill out. 🤣

Just the other day I was experimenting with front end for a potential page on my site and made a similar effect to this, except the images weren't overlaid on top of each other and had to move independently.

Thought he meant giving Netflix like fireballs or flight but this is cool too

I use coolers for the exact same reason !!

This is a cinematic masterpiece (idk if i make sense). It's so good!

I thought I was having the mandela effect when you pronounced your name as hyperflexed.

although this was probably overkill, being able to interact with a logo is a thing i would appreciate. it should be more hidden and act as an easteregg

Yea... And Redbull gives me wings

would love to see some examples of cool interactions targeted for mobile, where devs can rely on hover.

dude you always makek try those things

hi hyper!

Amazing as always, just wonder why you used 5 svg files instead of just changing the color of one with html/css

boy, that was a ride xDD

man iam dieing

You could do one svg, copy it in the DOM programatically and set the fill attribute 😅

Their reaction is waaaay too serious haha

Sick 🔥

I'm always amazed by your videos, each one better than the last. My only question is how do you calculate the aspect-ratio property for the #logo?

@tercmd

10 ай бұрын

1/1 (1:1) because the logo dimensions are equal

Hi bro! cool video, I constantly enjoy your insanely cool videos, especially about web development. could you repeat this unreal effect in the new video, when you click on the search in the header on the site (airbnb) and the search goes out.

To be honest I love all your works, that pure javascript because I'm not fan of library like I want also to recreate all animation that need the library into vanilla js, I would like to suggest if you can recreate the 'Embla Carousel Opacity' library in vanilla js :)

THEY GOT THE PWIMEAGEN 😱😱😱

This video sounds more sponsored by CareerPuck than FrontendMasters.

Have you played Persona5? That game gives me so many cool ideas of web design stuff.

❤

Script writing at its peak 🛐

Even though you didnt got accepted, you earned HUGE respect from me 💪

Ah, so that's how you make... that thing.

My way of doing this would be making big invisible circle over the logo and add mouseOver listener to it. And use some math to transform it in opposite way of the mouse. You can make circle as big as you want. Bigger circle - bigger range for effect

they are all right tbh

this channel is good, i am from UZBEKISTAN

I always wondered how he does it, i have done javascript of daveGray from youtube, but I am still not able to understand his code, can anyone tell me how can I understand his js code, css part is mostly understood but js part I am unable to understand. His work is so much awesome, only if I could understand it, what am I missing to understand this code? can anyone tell me?

Nice vid. You could have used a single logo with filters or use it as a DOM svg instead of image to optimize it too

Awesome video. Can you do some mobile design effects next? A lot of cool websites are only cool in desktop with parallax and stuff and in the mobile view its.. meh

Day 2 they still haven't updated it. But jokes aside awesome video as always.