How Apple do scroll-based video scrubbing using CSS and Javascript

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

КОМЕНТАРІ • 31

  • @everydayslang-645
    @everydayslang-645 20 днів тому

    Really great. Easy to follow. Works like a charm... but what if you wanted more than one video like this on a page?

  •  Рік тому +1

    Your content is getting better and better. nice video man

    • @SuperHi
      @SuperHi  Рік тому

      Glad you think so! We appreciate it!

  • @bruhmoment3731
    @bruhmoment3731 7 місяців тому

    This channel is like a goldmine to me. I've seen so many cool web design effects on the internet. Have no idea how to implement them and I don't even know what to search to find tutorials about them. This channel is full of those cool effects I have been wanting to try.

    • @bruhmoment3731
      @bruhmoment3731 7 місяців тому

      and on top of that you're an excellent teacher

  • @televisie456
    @televisie456 Рік тому

    YES! This is what we've all been waiting for.

    • @SuperHi
      @SuperHi  Рік тому +1

      You ask and you shall receive!!!!

    • @televisie456
      @televisie456 Рік тому +1

      @@SuperHi would love to see a preloader, so all these content heavy tutorials would load smoothly.

  • @katiep814
    @katiep814 9 місяців тому

    Great video!!! Thank you so much! I really appreciated how well you explained everything, especially the javascript! It works so well !!

  • @HuyenNguyen-bb3cg
    @HuyenNguyen-bb3cg 6 місяців тому

    Thank you so much! Simple but powerful JS and CSS techniques

  • @streamingvideo6654
    @streamingvideo6654 7 місяців тому

    This is awesome mate! Simple JS but works great. Thanks so much.

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

    Very helpful video. Thanks a lot

  • @安田胡桃
    @安田胡桃 4 місяці тому

    Thank you so much!!! This help a lot

  • @MeezanTheFairBloke
    @MeezanTheFairBloke Рік тому

    So cool! thanks mate

    • @SuperHi
      @SuperHi  Рік тому

      No problem! Glad you liked it!

  • @plastic_hand
    @plastic_hand Рік тому +1

    thank you so very much. that helped a lot. But how do i get the scroll video smoother? It is like jumping through the frames

    • @SuperHi
      @SuperHi  Рік тому +4

      Hey! A few quick ways to do it would be to increase the length of the video and/or shorten the scrollable distance so that there's more dense frames per area. Another option would be to 'tween' the video's currentTime, where you'd have an animate loop that is moving towards the aim point in the video by 1/60th of a frame each time - I did try this in an initial test and while it works well going forwards, it's a bit choppy when going backwards as videos don't really like to 'play' backwards!

  • @tomaszhofman7745
    @tomaszhofman7745 Рік тому

    you do amazing job!

    • @SuperHi
      @SuperHi  Рік тому

      Thank you so much!

  • @byteaddis-t9r
    @byteaddis-t9r 7 місяців тому +7

    How to make the video smmoth like apple

  • @ivanp3103
    @ivanp3103 Рік тому

    good job! thank you!

    • @SuperHi
      @SuperHi  Рік тому

      Our pleasure! Thanks Ivan!

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

    i tried, this i works, love it, but how to make it smoot, the video playing is kind of choppy :(

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

    Nice video, however it does not look good on mobile viewport

  • @voxtelnismo
    @voxtelnismo Рік тому

    Amazing. And now the magic is gone. 😂

  • @mustafa.wael-dev
    @mustafa.wael-dev Рік тому +1

    I think apple use image sequences instead of video

    • @SuperHi
      @SuperHi  Рік тому +1

      Yes, you're right, they do both options in different areas of the site, video seems to be their most common one based on our research, and it's probably due to video being smaller in total file size than the same amount of frames in an image sequence.

  • @sa8452
    @sa8452 7 місяців тому

    Wait, why’re the views on this so low?