Mind-Blowing Anime.js Staggered Grid Effect

Рет қаралды 505,131

Жыл бұрын

Watch as I show you how to create a super cool staggered grid effect that was requested by a sub!
The icons I use: fontawesome.com/referral?a=75...
Support the channel: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
Tools: Html, CSS and JavaScript (AnimeJS)
CodePen: cdpn.io/zYWvXMM
This pen is based on: cdpn.io/YzXOGpm
Music credits:
Daze - StreamBeats - Lofi - Harris Heller

Пікірлер: 356

@nagarjunprasad Жыл бұрын

Never learned so many things in CSS even through a dedicated tutorial video. This is awesome content, keep up the good work!!

@user5214 Жыл бұрын

The sheer simplicity is what's blowing me away. And the pacing was great. And it was entertaining. And the music is great. And his voice is relaxing. And the final product was more than I expected coming into this video.

@programaths Жыл бұрын

@@user5214 He may know about marketing. There was a wave of marketing strategy where, as a seller, you tried to blown your customer mind, tricking them to come back to you for more. So, you end up selling sturdier equipment for quite a price, knowing that the customer will come back before its end of life to be "up to date". It's not effective for mass sales, more for sales where you intend to build a relationship. It's why it much less done those day. Still, when you hear "I know X, let's call him, he can figure it out", then you're in that case ^^

@omersabic8555 Жыл бұрын

Wow! You make this look so easy! Great job, really well done. Recently got my first job in front-end development. Now you gave me a slight linger of impostor syndrome lol

@Hyperplexed Жыл бұрын

Haha congrats! Don't worry, there is not a day that goes by that I don't have a bit of impostor syndrome. These videos typically take 2 - 4 full work days to make, so making it look easy is by no means easy (for me at least).

@KushagraPratap Жыл бұрын

@@Hyperplexed that is the best response to a comment by a creator.

@ridwanajibari4443 Жыл бұрын

@@Hyperplexed ok i can sleep now

@AdrianMark Жыл бұрын

@@Hyperplexed hahaha I just called you a front end god in my comment, then I read this comment and see your humility. Thank you man, you're even better than I first imagined. Really wishing for your success and your channels success. Thank you again for sharing your thoughts and knowledge.

@madaotee4557 Жыл бұрын

@@Hyperplexed sigh* now I can breath

@Pavel-wj7gy Жыл бұрын

This breakdown is insane! I spent, like, a month making my version of an Etch-a-Sketch project and implementing a flood-fill. This is extraordinary.

@robbyrish13 Жыл бұрын

Don't know if you're doing the Odin Project but I also did that project before doing this and now I want to go back and implement some of this in that

@iced2916 Жыл бұрын

@@robbyrish13 The Odin Project gang! God I remember doing that project too, now I can't even remember when was the last time I used vanilla js

@siliconhawk9293 Жыл бұрын

@@iced2916 excuse me but what might this Odin be ??

@iced2916 Жыл бұрын

@@siliconhawk9293 it's a website that teaches modern full stack web development for free, it's pretty good

@Blue_Nova707 8 ай бұрын

@@siliconhawk9293it's website for learning webdev

@nevinkuser9892 Жыл бұрын

You've successfully gone into the realm of the unknown. Really cool effect at the end with the grid gutter showing the color behind it. I really like it. And then the transition to show what's behind is just so cool.

@dom8429 Жыл бұрын

such an underrated channel. thank you so much for this 😊😊

@dragonreborn2141 Жыл бұрын

This channel is blowing my mind. I hope you continue making the awesome showcases. Cheers

@infinitelyexplosive4131 Жыл бұрын

I quite like your video style. You're good at choosing which details to keep in and which ones to gloss over.

@QUIGNONPAIN Жыл бұрын

Cant wait to use this effect and its variants ! Thank you very much, the way you explain step by step is really clear ! I appreciated it !

@Fifa-ip3ux Жыл бұрын

You are actually amazing. I have never been so inspired 🔥

@jayjolupoi88891 Жыл бұрын

that's just impressive, you just earn yourself a new subscriber. it reminds me how little i know about the fundamental of css and styling, this video really inspire me to learn more, and waiting for more video

@ibrahimame4224 Жыл бұрын

How have I never found this channel until today. The content is amazing 💯

@AdrianMark Жыл бұрын

You are a front end god. I am so glad to have found this channel man, you have no idea. Thank you so much for sharing your thoughts and knowledge. Hoping I'll be half as skilled as you one day, someday soon.

@legitimacy Жыл бұрын

You're actually so underrated, got better graphics than most KZfaqrs and way more concise. Have you considered doing TikTok? Your short form videos will probably do good there!

@Hyperplexed Жыл бұрын

Thanks!! So far I've made two KZfaq shorts that I also posted to TikTok, but I definitely need to make more!

@electrolyteorb Жыл бұрын

@@Hyperplexed you don't need to Tik tok, your YT videos are just great😍

@vaisakhkm783 Жыл бұрын

@@Hyperplexed please don't do tictoks, it will degrade your content's quality

@truestbluu Жыл бұрын

@@vaisakhkm783 eeehhhhh..

@RossWasTaken Жыл бұрын

@@vaisakhkm783 Nah not necessarily, there are loads of great content creators that make high quality short-form content on the side

@hamadamek 10 ай бұрын

I'm speechless. This is a keeper. Bravo. Standing ovation

@jhonb03 Жыл бұрын

Caballero esto es oro puro, me encanta la forma que explicas incluso no se mucho inglés y siento que entendí cada parte que explicaste, Woow eres un genio.

@sharkyboi6018 Жыл бұрын

for english users: Gentleman this is pure gold, I love the way you explain even I don't know much English and I feel like I understood every part you explained, Woow you are a genius. Edit (I used google translate cuz i was curious)

@marcelstaiger9100 Жыл бұрын

First vid I've seen from your channel. Great. I need to directly watch the next one :)

@wonkywonky6307 8 ай бұрын

That is crazy good! I absolutely love the one with the tile borders, congratulations.

@calebdeming5515 Жыл бұрын

I think they work well in tandem with each other. Could even be used as an interface for a modular app where the pieces snap to the grid.

@Burnedout95 Жыл бұрын

You're actually insane man this is so good

@vmGrymm 4 ай бұрын

your videos are really inspiring for a beginner. thank you so much!

@Lik4nGaming Жыл бұрын

It looks awesome, you make it look so easy. great job.

@Gumshoe21 9 ай бұрын

Wonderful demonstration, very clear and extremely educational. Effect looks great and can be expanded upon for sure, I just gotta figure out a way to apply what I've learned now, haha.

@OutMagic Жыл бұрын

That's insane dude XD wow! Both are gorgeous :D

@shakerwahba3742 Жыл бұрын

This worked incredibly well! I can finally play it thanks

@rodelioliwag7627 Жыл бұрын

You are a digital magician man! Such talent!

@CyCloNeReactorCore Жыл бұрын

very well may be the most informational video i've come across yet

@forshetrial Жыл бұрын

You deserves even more likes and views!! 🎉❤

@thespicehoarder Жыл бұрын

Your trolling on TikTok is god-tier and your content on youtube is perfectly explained. 10/10 dude, keep it up!

@chicharongbaboy Жыл бұрын

Thanks! I've been searching how to get it and this is brilliant :D

@lazyman2451 Жыл бұрын

quick and simple explaination love it 10/10.

@ajitshaw1936 Жыл бұрын

I just found a gem, your contents make my 🧠 to release a lots of dopamin 🤟

@SilverTheFlame Жыл бұрын

This is so cool. Thanks for the awesome video :)

@marius1029 Жыл бұрын

I love your videos, I just found out about you and I'm first year in Informatics... You're definitely giving me so many ideas for my html exams

@kisandro Жыл бұрын

That's art. Congratulations !

@kewlf00l85 Жыл бұрын

Gradient border. Easy choice. Looks so clean.

@RobertWildling 8 ай бұрын

Really, really awesome! I am a sucker for the gradient version!

@krazymeanie Жыл бұрын

I'm a lover of tailwind css but this is making me love CSS so much lmao. Think imma switch back for a while in my next couple projects

@Billiam112 Жыл бұрын

Wow, instant subscribe to this content. Awesome stuff!

@robincannon2569 Жыл бұрын

😙👌 magnificently concise gold dust quality video, damn i want to try so many bits of this out already

@MrFiregem Жыл бұрын

Actually epic. Glad I found you on reddit

@apuji7555 Жыл бұрын

Same!

@h.nazmulhassanrakib5058 Жыл бұрын

@@apuji7555 me also glad. but I found him in youtube.

@legendarygamers1703 Жыл бұрын

KZfaq Recomended me.

@MAXpower10000000 Жыл бұрын

Damn 💯💯 your improved version rocks

@okunamayanad Жыл бұрын

i think the outlined would be really good for a header, and also the rainbow one for background

@yoNikma Жыл бұрын

your creative! keep going and thanks for sharing

@seveto3911 Жыл бұрын

I LOVE your video style

@piratesmanX Жыл бұрын

Instantly subscribed. THANKS KZfaq ALGORITHM!!!

@Oliver__404 Жыл бұрын

that's actually so sick. nice

@compass9909 Жыл бұрын

You are a literal genius

@firstname4474 Жыл бұрын

That's just amazing, somehow got this video in the recommended and instantly subbed. I'm not even a frontend tho.

@vt9988 Жыл бұрын

You make really WOW videos! I like the border version more

@patchstep 8 ай бұрын

“Lets pretend we’re React for a moment, and create some HTML in our JS” Amazing

@Gsoul94channel Жыл бұрын

Amazing, thanks for insight

@Juliano08 Жыл бұрын

You are making my life soo much easier

@captansambhav7496 Жыл бұрын

Really nice and helpful... Thanks!

@stefanutdraganoiu1261 Жыл бұрын

Still working as of today! Thank you!

@mustafahasircioglu5796 Жыл бұрын

OH MY GOST THATS PRETTY

@Omar45 Жыл бұрын

Amazing quality content ❤❤

@tusharkuntawar6170 Жыл бұрын

Sigma chad for making the outline version look that nice

@maxxxb4uh4us80 Жыл бұрын

Isso sim é perfeito parabéns pela iniciativa

@ibrahimkhalil7544 Жыл бұрын

It worked! Tank you sir.

@LisandroDC Жыл бұрын

BEAUTIFUL

@aboelsoof301 Жыл бұрын

Awesome effect Good Work

@tanakakun6093 Жыл бұрын

Actually been trying to find a grid system for my personal notes application and I think I found it through your vids. Thx for the tutorial!

@dweblinveltz5035 Жыл бұрын

This is a convoluted implementation if all you want is a responsive structured grid of items. He has a decent reason for this implementation, but you likely don't and will only overcomplicate your code.

@devjony Жыл бұрын

This was awesome

@karim-gb5nx Жыл бұрын

amazing. Didn't feel to skip any seconds in the video

@austincodes Жыл бұрын

The border gradient version is absolutely beautiful

@stanimirnikolov159 Жыл бұрын

Epic graphics. Blowing my mind rn

@aghileslounis Жыл бұрын

what an easy new like and subscribe ! waw it's crazy how much we can do with css and js

@prionkor Жыл бұрын

You have earned a subscription ;)

@nntanisiminevolts1155 Жыл бұрын

Mad skills 🤯

@suyesh Жыл бұрын

Awesome content man. new subscriber

@NOSHEDMANTIS Жыл бұрын

This did done blow my goddamn mind, fren.

@biggusdickkus2247 Жыл бұрын

This is so awesome 👍🏻

@rose_watr Жыл бұрын

Beautiful and awesome ❤️👍

@t3st3d Жыл бұрын

this looks cool

@paradoxify_ Жыл бұрын

What you can do extra is, generating the different colors for the body gradient when making toggled variable true; It'll generate different gradient every time we go back from tiles to gradient;

@apuji7555 Жыл бұрын

You're a really great channel! You should do a tutorial series or something. A _ton_ of people would appreciate that.

@Hyperplexed Жыл бұрын

Thank you! I will definitely consider doing that at some point!

@Hyperplexed Жыл бұрын

Can I ask what kind of tutorial series you'd be hoping to see?

@thesynical939 Жыл бұрын

@@Hyperplexed honestly a concise beginners to intermediate would be great.

@wrench2474 Жыл бұрын

so many things going over my mind 🤯

@ChrisStayte Жыл бұрын

LOVE this

@germansiciliano9241 Жыл бұрын

Meanwhile I'm struggling to center the inputs of my form using the grid. The beautiful things you can do when you know your stuff, great content for sure!

@h.nazmulhassanrakib5058 Жыл бұрын

Finally KZfaq did a good job for Suggest me his video. 🥰🥰🥰🥰

@treshi Жыл бұрын

Both are great and it depends on what you want to do, but to be fair your gradient version rocks! Just insane what you can do with a few lines of code some libs, HTML5, CSS3 and JS!