Create Crazy 3D Image Slider Effects Using CSS Only

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 645

  • @lundeveloper
    @lundeveloper  6 місяців тому +147

    Please don't forget to subscribe to watch more interesting videos

    • @LaughterOperation
      @LaughterOperation 6 місяців тому

      done..

    • @DebashisRoy-cs9qm
      @DebashisRoy-cs9qm 4 місяці тому

      Thanks Please make More Web Development Video.....like this... 😊

    • @Montu7
      @Montu7 3 місяці тому

      🎉🎉Party for 1 M 🎉🎉🎉🎉❤❤

    • @AliQGGG
      @AliQGGG 3 місяці тому

      almost forgot ;P

    • @stormlord3389
      @stormlord3389 2 місяці тому

      almost

  • @prodbysvper5761
    @prodbysvper5761 6 місяців тому +309

    This is actually crazy, to be able to make something like this with no js and easily explained

    • @lundeveloper
      @lundeveloper  6 місяців тому +15

      Thank you so much bro 😍

    • @elitedire4k
      @elitedire4k 3 місяці тому +2

      Agreed, i got a lot to learn in css yes

    • @tariqsyed6011
      @tariqsyed6011 3 місяці тому +1

      How would you that in js.

    • @The_Andvarius
      @The_Andvarius 2 місяці тому +1

      i tried this and doesnt work why?

    • @prodbysvper5761
      @prodbysvper5761 2 місяці тому +1

      @@lundeveloper thank you for the work you’ve been giving us it’s truly a blessing. I’ve learned a lot from you

  • @lundeveloper
    @lundeveloper  6 місяців тому +70

    70% of the channel's viewers do not click the subscribe button 🥲 Please everyone who finds it interesting, please subscribe to the channel to help me reach 50,000 subscriptions. Thank you everyone so much 🥲🥲🥲😢😢😢

    • @C-KRET
      @C-KRET 6 місяців тому +1

      Just liked and subscribed

    • @-The-Golden-God-
      @-The-Golden-God- 6 місяців тому +1

      No

    • @SamuSauo
      @SamuSauo 6 місяців тому +1

      buddy your css 1000x better than me, just like and subscribed

    • @back2Islamyt
      @back2Islamyt 6 місяців тому

      I just clicked sub opps😀

    • @SavagesoundsincTV
      @SavagesoundsincTV 6 місяців тому

      Done and done. Great work and great vid!

  • @karikaru
    @karikaru 3 місяці тому +11

    The last time i used css or messed with code was 15 years ago. Css having variables, doing calculations, positioning in 3d space has blown my mind right now.

  • @simplesoul6143
    @simplesoul6143 6 місяців тому +24

    You're a genius bro. Not in a million years would I have managed to do this

  • @logicweaver7152
    @logicweaver7152 6 місяців тому +88

    I'm thankful that UA-cam recommended me this beautiful video.

    • @lundeveloper
      @lundeveloper  6 місяців тому +4

      Thank you so much 😭😭😭

    • @olsenmusic8783
      @olsenmusic8783 2 місяці тому

      @@lundeveloper hello i appreciate your job can you help or teach me how i can do it please

  • @GinodPethmin
    @GinodPethmin 6 місяців тому +118

    Mr.beast knows CSS!

    • @someguy6076
      @someguy6076 8 днів тому

      IKR. That was my first thought, too.

  • @Blu3-urcooked-In
    @Blu3-urcooked-In 12 днів тому

    The moment I literally saw the flying pictures, I clicked the sub button without hesitation XD
    This is crazy. I can't believe I only just discovered your channel after 3 months of frickin hard coding.

  • @matheussantosdasilva7084
    @matheussantosdasilva7084 6 днів тому

    I'm from Brazil, man, what an insane design, congratulations, your work is very beautiful.

  • @govindr3004
    @govindr3004 9 днів тому +1

    Seriously! It is that simple, its all depend on the explainer!
    Dude its awesome, I subscribing you channel by only seeing this video ❤

  • @franklin_zzz
    @franklin_zzz 6 місяців тому +8

    I'm not gonna lie bro, you are literally the best teacher out there besides codeGrid, although i really prefer your videos because of the knowledge i absorb from your content. I have nothing to request but more contents, more juicy, i mean juicy content
    I really hope you keep this up and i wish you success.

    • @lundeveloper
      @lundeveloper  6 місяців тому +3

      Thank you very much. I will constantly try to improve the quality of my content ❤️

  • @snesmocha
    @snesmocha 6 місяців тому +2

    For those who don’t want to watch it’s just this video or tldr
    Find how many images you have, give each an index value
    divide 2pi or 360 depending on whether or not you’re using rads or deg for your sin function and offset each image by
    y = yoff + sin((2PI)/amount) * index + scroll) * length
    x = xoff + cos((2PI)/amount) * index + scroll) * length/2
    Now get the y value and scale the image according to the y values distance to the min of the y as sin is periodic and center the object by adding a second value to center accordingly.
    Finally just tween the scroll value according to the pi value defined by the initial pi/amount value to circularly scroll each value and you’re done

  • @Footballian826
    @Footballian826 6 місяців тому +397

    mrbeast teaching coding 🤩🤩🤩🤩🤩

  • @josejaum
    @josejaum 15 днів тому

    Dude, the way you explain is great, I perfectly understood the logic behind this! The ability of CSS to do things that I would only think of before with JS is incredible... and I would dare to say that even easier than with JS :)
    THANK YOU! new subscriber

  • @huzaifaansar9327
    @huzaifaansar9327 2 місяці тому

    Probably, this is the only channel over social media that teaches that much clearly . Literally impressed with it.

    • @sridhars221
      @sridhars221 Місяць тому

      I am not getting the desired out put could you pls me with that

  • @itsYourType313
    @itsYourType313 6 місяців тому +9

    It's just a mind blowing so much love from India ❤

  • @divya.n1697
    @divya.n1697 7 днів тому

    This is amazing. Steps so clear and explanation for every step throughout coding process. Hats Off. One of the best Tutorials.

  • @Aditya.Rawat45
    @Aditya.Rawat45 5 місяців тому +63

    Foreign devs : Yahh LunDev! 😄😄
    Indian devs : Lun what💀

  • @janbures6445
    @janbures6445 5 місяців тому +1

    Very handy and nicely explained! Great job, keep it coming!

  • @rishicr2326
    @rishicr2326 6 місяців тому +12

    Cool stuff bro Keep Doing 😊

  • @YehudArtLine
    @YehudArtLine Місяць тому +1

    wowwww!!!!!!!!
    such a nice explanation!
    thank you so much for this video!

  • @nandyalanaresh1161
    @nandyalanaresh1161 21 день тому +1

    It's amazing bro you did it well with proper explanation 👏👍

  • @WebWonders-r5s
    @WebWonders-r5s 2 дні тому

    Crazy CSS i learned lot of thing from this thumbs up.

  • @zzenxey
    @zzenxey 2 місяці тому

    A person this skilled and clear at things what he is doing is admirable and simply amazing.
    Respect for the skill level and such beautifully explained content.
    Absolute genius!

  • @orhannaseri
    @orhannaseri 9 днів тому

    just wow the way u explain it so easily and clear bravo bro👏

  • @silasharshit9502
    @silasharshit9502 3 дні тому

    Quality content!
    Subscribed bro!!

  • @sujitprasadkushwaha9031
    @sujitprasadkushwaha9031 5 місяців тому +1

    its really amazing to see what can be done with css only.
    I love it.
    keep posting new and awesome videos like this.

  • @JaviRelax
    @JaviRelax 5 місяців тому +1

    Such a clear way to explain complicated things, i really appreciate that!
    Such a great video! Thank You!

  • @BonneyDPao
    @BonneyDPao 6 місяців тому

    Man you're great! Hope we can all make your channel bigger and bigger!

    • @lundeveloper
      @lundeveloper  6 місяців тому

      Thank you so much 🥹🥹🥹 Its my Dream 🥹🥹

  • @glossyreign
    @glossyreign 15 днів тому

    This is super inspiring!! Thanks for sharing your knowledge, it's about to be fun experimenting

    • @glossyreign
      @glossyreign 15 днів тому

      Also these sound bites are sending me lol

  • @DavidGutierrez-dj2kk
    @DavidGutierrez-dj2kk 4 місяці тому

    You are amazing! Please make more content! You don't know how grateful I am for your content!

  • @smiledailyshorts
    @smiledailyshorts 5 місяців тому

    yo this is crazy! keep up the content man I learned a lot very well explained, I subscribed. I hope you get a lot of subscribers you deserve!

  • @newbie_fr
    @newbie_fr 6 місяців тому +1

    One of the most underrated channels on UA-cam...

  • @shekharpal036
    @shekharpal036 5 місяців тому

    I appreciate the hardwork u must have done in order to be where you are today .
    I am just a beginner, but using your simple CSS it feels as if I am learning great things

    • @lundeveloper
      @lundeveloper  5 місяців тому +1

      Thank you brother, try hard together

  • @vijayfrontend
    @vijayfrontend 6 місяців тому +2

    Wow, I came to this channel with a UA-cam recommendation. Awesome tuts. keep it up man

  • @estebanpedroguerravidal8336
    @estebanpedroguerravidal8336 9 днів тому

    Me pareció fantastico... Muy buena explicación, muy claro y muy estético.

  • @drfcozapata
    @drfcozapata 2 місяці тому

    😱😱😱😱😱😱
    Coooooooooooool!!! 😁
    You're a genius bro. Blessings from Venezuela. New subscriber.

  • @bekirasmcelik2934
    @bekirasmcelik2934 4 місяці тому

    Amazing work! Well done friend. We’d like to see more.

  • @benh6224
    @benh6224 Місяць тому +1

    thx from france for your works, it's dope !

  • @seralterego
    @seralterego 3 місяці тому

    This is sooooo cool...great video man!

  • @TwilightMystique
    @TwilightMystique 6 місяців тому +1

    It's really great content, especially the way you explain things and their details, which most other UA-camrs don't bother to explain.

    • @lundeveloper
      @lundeveloper  6 місяців тому

      Thank you very much,
      I will try harder ^^

  • @syrup8345
    @syrup8345 6 місяців тому +3

    zero HUNGARIAN FORINTs???? 😱🤣 no waaaaay no waaaaaaaay this dude a Hungarian CSS MASTER and I didn't know about him.... instant SUBSCRIBE!! LETS GOOOOO keeep it uuuuup!
    Btw If you are not Hungarian I would still subscribe, you are awesome

  • @Luis-xe8du
    @Luis-xe8du 3 місяці тому

    Crazy design, what a nice guy, keep doing it!

  • @johncondino3601
    @johncondino3601 Місяць тому

    Love it. Very helpful, thank you!!!

  • @Yamo406.x
    @Yamo406.x 25 днів тому

    Wow! You just earned a subscriber bro

  • @mdyousufgazi4030
    @mdyousufgazi4030 6 місяців тому +3

    this is madness. legendary

  • @Yarkaha
    @Yarkaha 6 місяців тому +1

    You earned a subscription man!! This is epic keep doing it. 😂😂❤

  • @rkyt4519
    @rkyt4519 2 місяці тому +1

    Its really Amaaaaazing , please make video including controlling these siding images .... like if we click on any of these images , we can open it ...

  • @abhisheksingh-cn6vi
    @abhisheksingh-cn6vi 5 місяців тому +1

    The way u r explaining each line is really appericiate. ❤

  • @kash6858
    @kash6858 4 місяці тому

    This channel is my second pick after hyperplexed, good stuff

  • @apaulolopes4497
    @apaulolopes4497 4 місяці тому

    Thank you! This is amazing :) Liked, voted and subscribed!

  • @SlickFX_Trader
    @SlickFX_Trader 3 місяці тому

    *This is a great tutorial* , and CSS I didn't even know you could do! Great experience

  • @arinome.takanome
    @arinome.takanome 2 дні тому

    Awesome work 👍

  • @jyjm
    @jyjm 6 місяців тому

    Waiting eagerly for the pt 2 with JS !! Amazing!

  • @maazdev9000
    @maazdev9000 6 місяців тому +25

    We need the javascript version as well 💯, This is Boss level CSS really amazing

    • @AdelekeOluwamayokun
      @AdelekeOluwamayokun 2 місяці тому

      Yes lundev
      We need the JavaScript part of this code
      Control the slider and preview a selected image

  • @dav1_fer
    @dav1_fer 6 місяців тому

    Love this effect! Good content friend 👍

  • @adrianooo3658
    @adrianooo3658 6 місяців тому +372

    Why do you sounds like Mr. Beast?

    • @d.o.nmuzic3802
      @d.o.nmuzic3802 6 місяців тому +21

      😂 I love it! It’s better than doing a video with music but no explanation.
      Great job on this

    • @WePiphany
      @WePiphany 6 місяців тому +34

      These videos are text to voice for audio - CapCut makes this easy and there are dozens of other apps. The typos or broken English comes through with awkward cadence time to time, but content is good. Making videos this way take more time than just recording a real voice.

    • @1brooklyn718
      @1brooklyn718 6 місяців тому

      U sound fruity af 😅😂lol stop remembering how other men voice sound lol

    • @choanlpoto
      @choanlpoto 6 місяців тому +28

      Ah that why the voice is unbearable

    • @WePiphany
      @WePiphany 6 місяців тому +5

      @@choanlpoto I would be shocked if there wasn't already another AI plugin that will reinterpret all online voices to one you like more.

  • @phunguyen-developer
    @phunguyen-developer 5 місяців тому

    Đẳng cấp vl anh trai ơi
    Fk amazing video

  • @Br30357
    @Br30357 5 місяців тому

    I am amazed to see what can be done by just CSS only.
    You did a great job.

    • @lundeveloper
      @lundeveloper  5 місяців тому

      Thank you for watching my content ^^

    • @Br30357
      @Br30357 5 місяців тому

      @@lundeveloper No bro thankx for making such a beautiful innovative thing and sharing it with others. BTW thankx for your comment.

  • @veselinfilipov2649
    @veselinfilipov2649 6 місяців тому

    Found your channel today and it was a direct subscribe. Awesome content!

  • @urtechtips1323
    @urtechtips1323 5 місяців тому +2

    Never knew mr beast started teaching coding now and he's pretty good at it.

  • @sudharsteyn7147
    @sudharsteyn7147 6 місяців тому +1

    Cool bruh looks amazing

  • @longlancer
    @longlancer 4 місяці тому

    This is just sick! Awesome.

  • @EpicSaif2
    @EpicSaif2 3 місяці тому

    This is ..... a work of art man 🤯

  • @error_null6774
    @error_null6774 5 місяців тому

    Genius!!!!!! This is so genius that my thumbs feel like hitting on the subscribe button

    • @lundeveloper
      @lundeveloper  5 місяців тому

      So you haven't clicked subscribe yet? 😢😢😢😢😢

    • @error_null6774
      @error_null6774 5 місяців тому

      I subscribed!

  • @CodeForBeginner23
    @CodeForBeginner23 17 годин тому

    you'r like Albert Einstein in web design. you tell us somthing that no one ever tell us

  • @muhammaduseram9405
    @muhammaduseram9405 4 місяці тому

    this is sick🌟😍

  • @ArtCraftTbscreation
    @ArtCraftTbscreation 6 місяців тому

    Mind blowing... I used to do this kind of enimation, with JS, but from now, I will try with CSS... Thanks... I hope will make more videos on these kind of effective css tricks

  • @GirishGaikwad2055
    @GirishGaikwad2055 5 місяців тому

    yo man really cool 😍😍

  • @cs-ziyech7573
    @cs-ziyech7573 7 днів тому +1

    you are the best thank you

  • @nexuzja
    @nexuzja 2 місяці тому

    Great content, creative and well explained. Thank you!

  • @Sk_Senen
    @Sk_Senen Місяць тому

    I'm speechless 🙌🙌🙌

  • @jimmyj.6792
    @jimmyj.6792 5 місяців тому

    Awesome presentation and explaination 🙏 so good and beautiful effect 🙂

  • @gonsa55
    @gonsa55 17 днів тому

    this was absolutely amazing

  • @usmankhalid9516
    @usmankhalid9516 4 місяці тому

    good job Lun !

  • @AdelekeOluwamayokun
    @AdelekeOluwamayokun 2 місяці тому

    You are the best lundev🥳🥳

  • @blazweindorfer
    @blazweindorfer 4 місяці тому

    This was amazing! pls do more stuff like this

  • @rashidshahriar7913
    @rashidshahriar7913 6 місяців тому +1

    new css king in the town

  • @BrandonSelby
    @BrandonSelby 4 місяці тому

    love it, I learned a lot of epic snippets of css

  • @kenbee85
    @kenbee85 3 місяці тому

    I really love you explanation compare to others. For me as that one that English is not my first language, a visual graphic design really helped solidify my understanding.

  • @sandroardhi
    @sandroardhi 6 місяців тому

    Very very cool, automatic subscribed 😼👏

  • @DetectiveNoir_
    @DetectiveNoir_ 6 місяців тому +1

    This deserves millions of views

  • @Anonymous-yv3ey
    @Anonymous-yv3ey 5 місяців тому +3

    At 0:14 the eye glow effect and then cards aligned in an orbit is it video editing or did you do it with CSS??

  • @manuelvaal1257
    @manuelvaal1257 5 місяців тому

    your voice made it easier to digest css. u are a legend.🤩

  • @deepanshubhargav1024
    @deepanshubhargav1024 6 місяців тому

    Bhai shab bhot shi bnaya bhai aapne, keep it up BRO !

  • @rehan5910
    @rehan5910 Місяць тому

    Its Amazing 🔥🔥

  • @franciscojoseortegadiaz3224
    @franciscojoseortegadiaz3224 Місяць тому

    Hey bro, thanks for sharing your knowlege with all of us, I'd love to see another where you teach us how to control the slider with the mouse

  • @Khizar.design
    @Khizar.design 5 місяців тому

    Amazing...you took coding to another level.... Love the way you explain things.

  • @zafit02
    @zafit02 5 місяців тому

    oomg you are the best professor of css i have ever seen this is soooo clear

  • @mabedinia4
    @mabedinia4 5 місяців тому

    wow that was great , i started my web design with wordpress now im reconsdring it 😂

  • @charleyshiman4748
    @charleyshiman4748 4 місяці тому

    This is just unbelievable. I am speechless

  • @lundeveloper
    @lundeveloper  6 місяців тому +13

    Comming ❤❤❤

  • @satiros
    @satiros 6 місяців тому

    Pretty good and Nice. At the end i was kind of dizzy but it is interesting what You could do.
    Thx for sharing :)

  • @VikasYadav-qg5kp
    @VikasYadav-qg5kp 6 місяців тому

    just wanted to say, subscribed🤩

    • @lundeveloper
      @lundeveloper  6 місяців тому

      Thank you so much bro 😍😍

  • @AlbertNgLTruong123
    @AlbertNgLTruong123 5 місяців тому

    Yeah ! Perfect!🎉

  • @mm-kc2px
    @mm-kc2px 5 місяців тому

    Great content bro really very appreciatable👏

  • @AsHiSh_KuMaR786
    @AsHiSh_KuMaR786 22 дні тому

    Awesome ❤❤❤

  • @rojasjahiker
    @rojasjahiker 5 місяців тому

    such an amazing video bro, i've learned a lot!

  • @realiable
    @realiable 4 місяці тому

    U r awesome.. u made my thoughts and ideas on real practice.. u r genius bro🎉

  • @lounes03b99
    @lounes03b99 2 місяці тому

    suuuuuuuuuuuuuuuuuuuuuuuuper 🔥 🔥