Тёмный

Responsive Carousel Slider Using HTML, CSS, JavaScript & GSAP (Dribbble-Inspired) 

Codegrid
Подписаться 118 тыс.
Просмотров 5 тыс.
50% 1

Learn how to create a responsive carousel slider inspired by a Dribbble concept using HTML, CSS, JavaScript, and GSAP.
Source Code: codegrid.gumroad.com/l/codegr...
Inspiration ▸ Dribbble Element by Roman Salo
Link: dribbble.com/shots/5855369-MO...
Instagram: / codegridweb
Twitter: / codegridweb
Public Discord: / discord
Music from Epidemic Sound.
Thanks for watching!

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

 

18 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@shadowslayer2248
@shadowslayer2248 15 дней назад
My man creating more epic animations than I ever knew existed! 🎉🎉
@codegrid
@codegrid 14 дней назад
Glad you’re enjoying them! Thanks for commenting ❤️🙏🏽
@andrejkling3886
@andrejkling3886 15 дней назад
That’s much more valuable and useful… keep it up 🔥💯👍
@codegrid
@codegrid 15 дней назад
🙌🏼🙏🏽❤️
@Aman_yadav1419
@Aman_yadav1419 11 дней назад
Yess i am late but not your top notch content 🔥🔥
@codegrid
@codegrid 11 дней назад
Thanks
@dinbandhusharma4568
@dinbandhusharma4568 15 дней назад
Amazing like always 🔥🔥
@codegrid
@codegrid 15 дней назад
Thanks
@16CXx
@16CXx 15 дней назад
ma maaaan is on fire 🔥🔥 brooo keep going, after every video we go hungry for more
@codegrid
@codegrid 15 дней назад
Will try my best to keep the quality same if not higher
@PrayagKareliya
@PrayagKareliya 15 дней назад
that' very cool and you make easy to understand and apply thank you bro I wish you and your channel keep growing.🔥🤝
@codegrid
@codegrid 14 дней назад
Thanks bro!
@kushaltanna5569
@kushaltanna5569 15 дней назад
Yet another crazy video
@codegrid
@codegrid 15 дней назад
🙏🏽🙏🏽🙏🏽
@angelo.mazzeo
@angelo.mazzeo 8 дней назад
Hi, fantastic video as usual. I would like to ask you a question unrelated to the video: what font and theme do you use in VSC? Thank you 🙂
@soufiantazi3938
@soufiantazi3938 15 дней назад
crazy good video!!!
@codegrid
@codegrid 15 дней назад
Glad you enjoyed it
@huguenspaul3910
@huguenspaul3910 15 дней назад
Beautiful
@codegrid
@codegrid 15 дней назад
Thanks
@_acky
@_acky 15 дней назад
this is great ! , btw what font and theme do you use ?
@codegrid
@codegrid 15 дней назад
Theme: Sequoia / Font: Berkeley Mono
@iamemiliahhhh
@iamemiliahhhh 13 дней назад
Nice tutorial. About to convert it to Next JS. Please where did you get the images?
@codegrid
@codegrid 13 дней назад
Usually Unsplash but this time Lexica art
@iamemiliahhhh
@iamemiliahhhh 13 дней назад
@@codegrid Thanks
@Way_Of_The_Light
@Way_Of_The_Light 15 дней назад
Wow! Sick ✨👏 BTW, would you also consider looking at video game UI/UX the way Hyperplexed used to? He took some inspirations from there for some of his CSS tutorials 🙏 Maybe check out game play footages of the latest PS5 or XBox games to see how sliders, menus, banner animations etc work there? I think it’ll take your channel to the next level because usually the Video Game UI/UX is cooler and more innovative compared to what you’ll find on dribble or awwwards. 😇
@codegrid
@codegrid 15 дней назад
Sure! I never thought of that. Feel free to drop some ideas/names I can look upto for inspiration. I will also try to check it out myself! Thanks for the idea bro.
@Way_Of_The_Light
@Way_Of_The_Light 15 дней назад
@@codegrid awesome! Thank you for being open minded about it. Hmm it’s difficult to provide recommendations since all the popular modern games usually have good UI/UX. A few that come to my mind would be “Ghost of Tsushima”: has a neat text disintegration effect, button design, and color scheme; “Riders Republic”: has some nice countdown animation, and FINISH text animation that can be replicated via CSS alone; “Driveclub”: the menu has a nice interface where when you select a card, you zoom into the card to reveal the next section or page, you can just search on RU-vid “driveclub menu” to see a video of that. But yeah overall just casually looking at game footage on RU-vid of some of these popular games will give some inspiration 🙏
@Way_Of_The_Light
@Way_Of_The_Light 15 дней назад
@@codegrid awesome! Thanks for being open minded about it 🙏 Hmm just casually seeing the gameplay footage of any decent looking modern game should give some inspiration. I don’t play games much but I recommend checking out “Driveclub” menu, “ghost of Tsushima”, “Rider’s Republic”. Driveclub’s menu can be found here on RU-vid, it has a cool zoom in to reveal the next section/page animation which I think you can recreate ✨👍.
@user-yi3rq7jk2r
@user-yi3rq7jk2r 10 дней назад
Build with react
@user-gn2ev1nu1p
@user-gn2ev1nu1p 3 дня назад
Can you teach us how to make this complex ui responsive
@codegrid
@codegrid 3 дня назад
It’s responsive already. If you want to have clip path on the smaller screens as well, just update the width and height for its container using media queries!
@user-gn2ev1nu1p
@user-gn2ev1nu1p 3 дня назад
@@codegrid are all of your videos responsive ?
@Aman_yadav1419
@Aman_yadav1419 11 дней назад
Please if possible do this for react too
@codegrid
@codegrid 11 дней назад
People didn’t show much interest in the couple of react videos I published last month - compared to Vanilla JS videos! Maybe because it is more beginner friendly and everyone can follow it as beginners don’t start with React or Next but experienced devs can take the pieces and convert into anything based on their requirements!
@mustafa.wael-dev
@mustafa.wael-dev 15 дней назад
Is it responsive
@codegrid
@codegrid 15 дней назад
Of course. Showed the responsive version in the demo as well!
@shahrozahmed9746
@shahrozahmed9746 15 дней назад
With React?
@codegrid
@codegrid 15 дней назад
Nope.
@ryrd
@ryrd 15 дней назад
If you already understand react you can convert this vanilla js code to react
@abbasladan6018
@abbasladan6018 4 дня назад
Am confused man i feel like your codes are complex for me please try to explain in more details or use simpler approaches your audience are basically amateurs thank you
Далее
the untold history of web development
0:54
Просмотров 2,5 млн
Осторожно селеба идет 😂
00:16
Просмотров 354 тыс.
Reverse Engineer CSS Animations #Shorts
0:39
Просмотров 890 тыс.
Login Form | HTML CSS
1:00
Просмотров 487 тыс.
7 Portfolio Websites designers NEED to see
6:14
Просмотров 149 тыс.
Full screen Hamburger Navigation Using CSS
6:31
Осторожно селеба идет 😂
00:16
Просмотров 354 тыс.