I Gave a Website Logo Superpowers
HTML-код
- Опубликовано: 4 авг 2023
- Frontend Masters: bit.ly/FrontendMastersTrial
Watch as I show you how I gave the logo on careerpuck.com "superpowers".
Merch: bit.ly/HyperplexedStore
Support the channel: bit.ly/SupportHyperplexed
Tools used: HTML, CSS, JavaScript
CodePen: bit.ly/CodePenLogoSuperpowers
Music licensed by Artlist:
Ardie Son - Roadway
Maya Belsitzman & Matan Ephrat - Farewell
ANBR - High Society
Ziv Grinberg - Richard Goes Stompin
Yuval Vilner - Nocturne in E Flat Major Op 9 No 2
Check out Frontend Masters! bit.ly/FrontendMastersTrial
Merch: hyperplexed.store
;)
Here to give my opinion. Please show more code. not complaining though, good video.👍👍
amazing ad i bought all the courses
we need more animations on the website
for more dopamine
MORE MORE MOREEEEE
🌟 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
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 :)
@@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.
That's what the logo in the tab is for
@@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.
@@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 RUclips. 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!
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?
Easing function or 1 - 1/(x+1) could work
Your so talented, I love your channel man!
This logo effect looks great!
This style of teaching is really great 👏
I don't know what's the most amazing : Your design ideas or you video editing skills.
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.
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
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
@@insideme9414 css lore goes hard
Fire tutorial. I adore it and cant wait to see all the magic you do ✨🔥🎇🎇
Can I just say I absolutely love your videos. I hate front-end development but you're making me want to try it.
the editing on this looks so so so good!!!
I love Ur editing man and your unique style of content mixed with humor.
you showed us a new way to make tutorials. you are amazing
your videos are always great!
you are an artist sir !
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 💕
For some reason, I'm hearing the Grinch. 😂
Can't imagine how much effort you have put for this video🤯
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...
Awesome content. Thanks for the videos!
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.
that would need some extra processing, with fix data we get less memory ussage, or at least my Student brain thinks that
@@juandavidguarnizogutierrez4566 no. now it's just added unnecessary network call for other 4 images.
@@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!
@@ScoutOW2 I agree with you, It would definitely take up less storage since its only one image.
@@juandavidguarnizogutierrez4566 Memory usage is definately lower when using the same image - it has to keep 5 images loaded compared to 1.
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.
Ayoo the editing on this video made me forget i was watching hyperplexed, good job yo
Your videos are so good
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.
Dude learning never so fun 😂, a masterpiece in terms of story telling and accuracy.
Now excuse me imma watch your other videos
I'll be so happy for you when you get to the million subscribers.
Man I'm not a programmer but i love and enjoy your videos.keep it up 🔥🤟🏻
I'm sure someday they'll consider using it
Yay, I want it in the site now
Awesome content
ooh ol, that was fun!
Damn this is high quality video
its funny seeing people in the comments think the message at the end of the video was real lol
So educational and still enjoyable and funnyxD
That message at the end imply that you pissed off Career Puck more then once 😂
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
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.
I hope frontend masters never run out of money so they could sponsor you
Do more "website" (they're really apps) redesign videos, I LOVE them.
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 love it
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... 😢
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
This is a cinematic masterpiece (idk if i make sense). It's so good!
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.
Hyperplexed be flexin'
1:30 - Stop I beg you... It's perfect
Please upload more Videos!!!
that logo is pulled straight from the 90s
Idea. Use hsl and pull the saturation into it as you move the mouse away
Lol😂 love this channel.
You are the superpower
For the first time, I didn't skip an ad 😂😂😂
Amazing as always, just wonder why you used 5 svg files instead of just changing the color of one with html/css
That was some aggressive message. Gezz they need to chill out. 🤣
I just laughed so harh! This is so cool
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.
Yea... And Redbull gives me wings
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
Are you lemmino?
Thought he meant giving Netflix like fireballs or flight but this is cool too
That end music tho
I thought I was having the mandela effect when you pronounced your name as hyperflexed.
I use coolers for the exact same reason !!
lol. You awesome bro
newton of frontend
This video sounds more sponsored by CareerPuck than FrontendMasters.
hi hyper!
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?
1/1 (1:1) because the logo dimensions are equal
My doctor gave me "superpowers", but all I really got was myocarditis
hyperflexed!
Ah yes this is why the internet is getting slower, websites need to track our mouse position 24/7 to move their logos accordingly
would love to see some examples of cool interactions targeted for mobile, where devs can rely on hover.
Wow!
dude you always makek try those things
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.
Their reaction is waaaay too serious haha
boy, that was a ride xDD
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 :)
Have you played Persona5? That game gives me so many cool ideas of web design stuff.
Script writing at its peak 🛐
THEY GOT THE PWIMEAGEN 😱😱😱
I think there is one more thing you could try:
Part1:
Step1: Get personal infomation of the CEO. (dox the CEO)
Step2: Use a fake Email to text the CEO.
Step3: Tell him that you know where he lives and you are going to make this information public, if he won't use your Logo.
If Part1 didn't work continue with
Part2:
Step4: Hire a Hacker on the Darkweb. (VPN recommended)
Step5: Tell the CEO that you can do a DDoS-Attack, if he won't use your Logo continue with the plan.
Step6: Tell the Hacker to do a DDoS-Attack on the website. (If hacker fails learn hacking and do it by yourself.)
Now wait for the company to rebuild their Website.
Part3:
Step7: Hire a Hitman from the Darkweb. (VPN recommended)
Step8: Tell him to ki** the CEO. (If the Hitman fails get a Silverballer and do it by yourself.)
Repeat Part3 until the Logo is added, or continue with
Part4:
Step9: Ask Elon Musk to give you money.
Step10: Buy the company.
Step11: Add the Logo by yourself.
damn this was good until the elon musk part
@@asher3311 what should I write instead?
Ah, so that's how you make... that thing.
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
You could do one svg, copy it in the DOM programatically and set the fill attribute 😅
Watching your videos literally makes me want to give up coding, and I only just began my journey. If there are people this good out there, why bother.
Most of them are just unnecessary show offs
Master
Sick 🔥
While I definitely enjoy the new style of video, i think i still prefer the old videos, please bring them back
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
I would hire you...
If I had a company.
this channel is good, i am from UZBEKISTAN