Parallax image backgrounds, gradients, and video backgrounds

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

КОМЕНТАРІ • 80

  • @tonidebcn
    @tonidebcn 4 роки тому +24

    This new kind of tutorials are SO SO MUCH BETTER than the old ones. It’s like I’m learning web design, not just the tool that sometimes may be overwhelming for the newbies. And this is what really matters. I just find the old videos dated because now I’m more consciously learning. The examples do stimulate my imagination, and that’s what I didn’t know I needed. You just need to marry me, and that would be all.

  • @30888316413
    @30888316413 4 роки тому +97

    These are honestly so entertaining that I would them just for fun even if I wasn't learning Webflow

  • @barbancha
    @barbancha 4 роки тому +51

    This are the best tutorial I ever saw on internet 😻😻

    • @Webflow
      @Webflow  4 роки тому +2

      Thank you for your kind words, Alexandre Afonso!

  • @flyingbrokenarrow
    @flyingbrokenarrow 4 роки тому +3

    Webflow tutorial videos are the gold standard of tutorial videos and should receive an Oscar for the best tutorial videos from the Academy of Motion Picture Arts, Sciences and Tutorial Videos.

  • @ysteinWangen
    @ysteinWangen 4 роки тому +18

    I never turn on the notification bell, except I do, except I don't, but when I do, it's Webflow.

  • @tonykey6453
    @tonykey6453 2 роки тому +1

    This should spawn somekind of show. Probably THE best tutorial videos I've seen from any product. Love the way this guy talks and the humour is bang on point.

  • @olehansen6568
    @olehansen6568 4 роки тому +3

    Eventhough I know most of the stuff in these quick tutorials I never miss the chance to watch them as there are always some small (or big) nuggets to discover and learn about. Great work Webflow.

  • @paulrodriguez2177
    @paulrodriguez2177 4 роки тому +27

    You guys should be making tutorial for everything. I'm not even learning Webflow at this time but I love these! 😂😂😂

  • @knownoversight
    @knownoversight 4 роки тому +1

    Just started using Weblow, literally a couple of hours ago, so this is the first tut video I've watched...and I have to say this is the first tut video I've ever laughed at, out loud.. And, it's the first tut video I want to share with friends.
    Bravo guys, what a great way to provide help and guidance.

  • @Webflow
    @Webflow  4 роки тому +1

    *CONTENT WARNING at 01:23 - this section may affect people with visual sensitivities. Viewer discretion is advised.

  • @strathmckay5347
    @strathmckay5347 3 роки тому +4

    Man these are so good! The perfect mix of humour and clear explanation.

  • @podsmacked
    @podsmacked 3 роки тому +1

    I actually really appreciate the Stacks tip! I completely forgot about that

  • @ErikHill1
    @ErikHill1 3 роки тому

    Hands down, best tutorial videos everrrrr

  • @russianguy831
    @russianguy831 4 роки тому +2

    Thank you for your amazing tutorials! You make lives of thousands people so much easier! I can honestly say that this website builder platform is revolutionary, keep up the good work!

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

    Always happy to watch your tutorial , always fun and easy to understand you're the best

  • @shubhamparekh9808
    @shubhamparekh9808 4 роки тому +9

    I'm eagerly waiting for the e-commerce

    • @swaggerbauer
      @swaggerbauer 4 роки тому +1

      yeah.. need to build a mini shop soon...

  • @elementsessence7368
    @elementsessence7368 3 роки тому

    I love your tutorials. This guy is as dull & dry as he is hilarious!! Great job! And your COPY - OMG!!!! The best

  • @wh1tecl0ud
    @wh1tecl0ud 4 роки тому +1

    I laugh over every lesson, I love you, man

  • @dian.romanenko
    @dian.romanenko 9 місяців тому

    Thank you for the video! What size of the background image you can recommend? If I create the image on my own and can choose the size of canva ✨

  • @SinaNouri21
    @SinaNouri21 3 роки тому +1

    These tutorials start so goood :)))) and funny btw
    That's why I'm so excited to watch webflow tutorials every day 😂😂

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

    Your videos are unique.

  • @dudedamnit
    @dudedamnit 4 роки тому +1

    I love this tutorials so much!

  • @sidneywong4816
    @sidneywong4816 10 місяців тому

    For the text image background (photography in the video), how to make it same background color with its parent section background color, while just the texts is transparent and overlay on the fixed background image?

  • @ChrisWittusen
    @ChrisWittusen 2 роки тому

    Great video and great humor

  • @54CFL
    @54CFL 3 роки тому

    I love you guys! Webflow is a gamechanger

  • @solisinvictus4238
    @solisinvictus4238 4 роки тому

    THESE TUTS ARE AWESOME!!!

  • @miltonsarkar5024
    @miltonsarkar5024 4 роки тому +2

    Please make a video on how to autoplay video when its scrolls into view like facebook

  • @madkernell
    @madkernell 4 роки тому +2

    Webflow university rocks.

  • @KateCatalena-hw9nj
    @KateCatalena-hw9nj 6 місяців тому

    how are these so funny. the diamonds part killed me

  • @GrifanoRide
    @GrifanoRide 3 роки тому

    Amazing Webflow, with amazing funny and helpful videos)

  • @Enzocol89
    @Enzocol89 4 роки тому +7

    This guy is so damn hilarious 😂 😆 If this videos wouldn't be this much helpful I would just watch them for the jokes.
    Keep going the good stuff Webflow 👌🏻

  • @aliagha5827
    @aliagha5827 2 роки тому

    I like how this is actually funny. :)

  • @markb.8460
    @markb.8460 4 роки тому +1

    q. why is the default tile? are people using it more often?

    • @markb.8460
      @markb.8460 4 роки тому

      is that ux advice?am i working for free? is this a simulation?

  • @anetaroubickova8908
    @anetaroubickova8908 2 роки тому

    Love these tutorials! Just a quick question: Is it possible to play video on scroll? Or it has to be a lottie?

  • @asagoldstein1669
    @asagoldstein1669 4 роки тому

    What do we do about Safari completely butchering fixed backgrounds? I have to avoid or just layer fixed Div blocks which is a pain.

  • @LukasNiebel
    @LukasNiebel 3 роки тому

    Haha great script, very well delivered and clear instructions. Keep up the great work guys 👍🏻

  • @garyvoigt321
    @garyvoigt321 4 роки тому

    I watch these for pleasure and entertainment.

  • @jaredslaybaugh6856
    @jaredslaybaugh6856 3 роки тому +1

    Can you address that fixed backgrounds don't work on mobile?

    • @Webflow
      @Webflow  3 роки тому +1

      Hi Jared! Thank you so much for asking! Fixed background images take up a lot of rendering power on mobile or touch screen devices, which can cause a jarring scroll experience.
      An alternative solution is to use fixed positioning for image elements within a relative parent.
      Here's a workaround shared within the community: discourse.webflow.com/t/trouble-with-fixed-background-images-not-remaining-fixed-on-touch-screen-devices/26733/4?u=waldo

  • @oskrm
    @oskrm 3 роки тому

    When are we getting the Diamonds lesson? it's been 4 months!

  • @timmyhenrikssons
    @timmyhenrikssons 2 роки тому

    The upload video function is gone (?) and now you have to embed videos?

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

    When I use Background Video to upload animation in mp4, the color has changed a lot. I don’t know what caused it. It’s the same with webm. How can I solve it?

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

    Is this Ryan Renolds long lost brother? :O Love the tutorial!

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

    Why is my linear gradient background tiling itself though?

  • @infiltretor287
    @infiltretor287 4 роки тому

    I LOVE this channel!!!

  • @RobertTrew
    @RobertTrew 3 роки тому

    Why still no options for stop and play on the BG video element?

    • @Webflow
      @Webflow  3 роки тому

      That is actually possible. Stay tuned for a lesson on that here in the future.

  • @balloonartisan
    @balloonartisan 2 роки тому

    🤣🤣🤣 hahaha... one of your best ones yet! I LOVE these!

  • @ShxQDesigns786
    @ShxQDesigns786 4 роки тому

    How did you make the navbar with the logo in the middle

    • @joshuadiniz684
      @joshuadiniz684 4 роки тому

      You can set a max width on your navbar container!

  • @pieteb_nl
    @pieteb_nl 2 роки тому

    Where is this "hero visual" and "hero content" coming from? Have no idea what element is selected here. Are it images?

    • @Webflow
      @Webflow  2 роки тому

      The hero image is a background image. ua-cam.com/video/GxhbxvUIUd4/v-deo.html

  • @bennyd47
    @bennyd47 4 роки тому

    Great content as always! It's missing mobile completely though - fixed backgrounds & videos are two of the biggest "gotchas" when transitioning your site to mobile browsers, and this video didn't even mention mobile 😬

    • @Webflow
      @Webflow  4 роки тому +2

      Hi, bendrexl! Thanks so much for your kind words and your feedback.
      The article on Background videos is getting updated to match a lot of these gotchas. As seen at 7:27 in this lesson, this'll ensure everyone can get the most up-to-date information about how background videos behave on different devices (between iOS and Android updates, playsinline behavior seems to change every five minutes!).
      As for mobile, please stay tuned...we're working on something big for responsive design! If you're up for it, we'd love to learn more about fixed background behavior issues/gotchas you've experience on mobile to make sure it's something we cover moving forward. 🙇‍♀️

  • @njengathegeek
    @njengathegeek 2 роки тому

    "your credit card number ending in 2636 is ours" spare my rib 😂😂😂

  • @ajaymishra-jg2qe
    @ajaymishra-jg2qe 2 роки тому

    Please give me the name of tarcher
    I want to follow him personally
    Please please

  • @mikepapahotel
    @mikepapahotel 4 роки тому

    Hey Webflow - yet another awesome tutorial! I'm fairly new to Webflow and I'd love to examine how you did the 3 scrolling sections with their fixed BG images of the cushions from 2m:54s.
    Is that page available anywhere on webflow.io so that I could bring it in as a read-only to see how you did it? I've spent the last hour or so trying it for myself without success.
    Again - sincere thanks for all your brilliant tutorials - without doubt they're the best I've ever seen for teaching about/supporting any platform I've come across in the past 20 years!

    • @Webflow
      @Webflow  4 роки тому +2

      Hi, Michael Hancock! We'll put something together and share it here ASAP (most likely Monday), as well as add that link to the lesson notes. Great idea!

    • @mikepapahotel
      @mikepapahotel 4 роки тому

      @@Webflow Many thanks guys - I appreciate that! 😊👍🏻

    • @Webflow
      @Webflow  4 роки тому +2

      Hi ​@@mikepapahotel! Thanks for reaching out regarding the fixed parallax scroll background layout. The project is now available to open or clone to interact with the layout. Link to project: webflow.com/website/Fixed-backgrounds-with-parallax-scrolling?s=background-fixed

    • @mikepapahotel
      @mikepapahotel 4 роки тому +1

      @@Webflow OUTSTANDING!! Thank you again for your excellent support! 👌🏻

  • @2020davidg
    @2020davidg 3 роки тому

    Brilliant!

  • @dastinliedke9251
    @dastinliedke9251 2 роки тому

    Love it!

  • @dmanprohere
    @dmanprohere 2 роки тому

    There is parallax image?

    • @Webflow
      @Webflow  2 роки тому

      This part of the video that speaks about a fixed background may be what you are looking for: ua-cam.com/video/GxhbxvUIUd4/v-deo.html
      If this isn't it, here is another tutorial that might help:
      university.webflow.com/lesson/parallax-movement-on-scroll

  • @oleww50
    @oleww50 4 роки тому +2

    “Frying bacon” 😂😂

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

    I would bet every dollar I've ever seen this guy is a huge fan of John Mulaney

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

    Жаль что нет такой функции в мобильной версии

  • @Ms.Robot.
    @Ms.Robot. 3 роки тому

    Very nice. ❤️💋

  • @ovalayacademy364
    @ovalayacademy364 4 роки тому

    WHY?!!!! WHY ARE YOU SO FUCKING AWESOME!!!!!!

  • @yvessigner5503
    @yvessigner5503 2 роки тому

    There is no "parallax" chapter
    in the lesson.

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

    3:25

  • @preetdhillon5861
    @preetdhillon5861 4 роки тому

    i love you guys

  • @yvessigner
    @yvessigner 3 роки тому

    This tutorial does't cover parallax background

  • @AmirXplorer
    @AmirXplorer 2 роки тому

    😂😂😂 I forgot why I came here...

  • @maddypape
    @maddypape 3 роки тому +1

    This is better than netflix binging for us UX designers