Это видео недоступно.
Сожалеем об этом.
Aesthetic video hero with sticky scroll tutorial in Framer (No-code)
HTML-код
- Опубликовано: 15 авг 2024
- Sup everyone! I'm back with another Framer tutorial. This time we're making a full screen hero with a fixed video background, a super easy fixed navigation that's always legible, some appear animations, and leveraging the sticky positioning to create a cool scroll effect with some big text.
Live demo: 6love.framer.w...
Free remix: bit.ly/hero-vi...
Follow me on Twitter: / mattjumper
Use the code "pro-yearly-partner" to get 3 months free of a Pro Framer plan.
--------------------------------------------------------------------------------------------------------------
0:00 Intro
0:25 Navigation
2:34 Video background
3:41 Hero content
5:32 Big type
8:28 Appear animations
9:45 Sticky behaviour
10:46 Responsive
12:37 Accessibility
--------------------------------------------------------------------------------------------------------------
Have a request for a video? Drop it in the comments below!
I couldn't get the page to scroll down to the body section. It would just be stuck on the hero video. Replayed your video 3x and figured out that you set the body stack to Z-index 4! Once I did that, the page scrolls as designed. Just thought it might help others who face the same hiccup
One of the better tutorials here on youtube! Kudos ✨ - Love to see more about how you set up the responsive text styles and also how you add consistent hover effects, on elements that have different link URLs.
Another thing that's not 100% clear to me is how you manage to scroll the body over the Video hero?
@@Produkthelt Thank you!
The hero video is set to fixed so it doesn't scroll, and the body has a higher z-index (so it scrolls on top) and a white background (so it hides the content behind it). The hero type stack is the same height as the video (100vh), so the body starts right below the video (without the body type stack, the body would be starting at the top of the browser because the video is set to fixed)
Amazing tutorial! 😍 Can’t wait to see more!
Thank you!
Really nice tutorial…been struggling with the appear effect on type as the one you did in the video…was really helpful, thanks
Thanks Dee!
The acessibility perspective plus SEO was really a differential! Awesome content :)
Thank you!
Watched your recent video in flux academy. Would really love a Course like Ryan’s where you share the CMS and Components you created for your clients and the advanced stuff, or a tutorial on it. Love the two videos you have. It’s so heavy, would love more.
Thank you! I'm considering a more advanced course/content around setting up components, CMS, etc. so thanks for letting me know:)
@@mattjumper Yes, please create a more advanced CMS course/content :)
@@mattjumper Yes, please. I think there's a lot of content going on, and increasing every day, but it is almost for beginners. When it comes to advanced stuff, there is a short of tutorials or paid courses.
Great tutorial!
Thanks Kumail!
This so good my god
Thank you!
Awesome! ❤
Thanks Jorn!
Wow matt, amazing tutorial, thanks for sharing ❤
Thank you!
Great video, keep on going! Regarding the use of multiple H1 tags on a web page, this practice was more significant 5-10 years ago. However, with changes to how Google indexes websites, the impact of having multiple H1 tags has decreased substantially, so it's no longer a concern. There's even an official Google video about this topic, further explaining why it doesn't matter as much today.
Great to know! Thank you
Can’t wait to see more!! 🤩🤩… don’t stop plz
Your tutorials are amazing, we want more!!!
Crazy good. Thanks for this excellent tutorial!
Hey @mattjumper. loved your Framer tutorial, please create more advanced tips & tricks😊
how do you learn how to make these?? Love the tutorial!
Hey Matt, thank you for this tutorial, i want to ask you if this type of website can work for products
I've tryed this tutoural 4 times now, dived into the comments for fixes. Really not sure what the issue is the body just wants to take over the hero regardless of z index, postion type.
Goooood
Amazing content! I will definitely sub-
Hey man, do you recommend designing in figma and take this design from it into framer with the plugin or is it unnecessary and you would do everything straight in framer to save time etc? Great content, keep it up!
Thanks Tsilko! I typically design in Figma first (right now it's still faster for me) but typically leave all the tedious stuff like inside pages and responsive states to Framer as well as all the explorations around animation, interactions, scroll behaviours, etc.
Excelente! Gracias =)
Thank you!
Thanks for the tutorial. Love the large mouse, what software did you use to record this video? Thank you
Thanks! I use ScreenStudio (website: screen.studio)
Hii, please create a video for framer position property and uses
Great tutorial! You helped a lot!! thanks!!! :) Do you think it would be possible to Show/Hide Nav On Scroll with Framer without coding? (when scroll down hide, scroll up appear)
Thank you!
I love that nav scroll behaviour as well but right now it's not possible to do that without code. You can change the navigation state based on scroll section triggers but not by scroll direction.
@@mattjumper oh I thought so. Thanks for the reply :)
bro made the best tutorial on framer so far but fu*cked up at 8:07. it's been 16 hours still haven't figured out the body thing. tried adding body but not showing in preview. damn it.
Create a new stack and place it under the "hero content" stack (make sure it's under and not in it). If the height is set to fit you need content for it to actually scroll to, so for testing purposes you could put in a bunch of placeholder content or set the height of it to 100vh (the full height of your browser) to ensure it scrolls
@@mattjumper thanks bro I made it.
Many thanks Matt, you're killing it. QUESTION: Why are you setting the WIDTH to 200%, when Framer seems to be resetting it to 100%? THNX :)
Thank you @whofarted69 😆 what's the time stamp where I set something to 200%? Sorry been a minute since I recorded this!
@@mattjumper I'm terribly sorry, I just rewatched and realized you were saying "Set to 100%" and I think I thought you were saying "Set two hundred percent."
My mistake. 😄 Sometimes I am my own worst enemy.
Great tutorial, I appreciate you brother, keep up the incredible work!
Haha all good, thank you! @@B_Migs
Does anyone know how to replicate this concept for many page sections? I have it working on the initial video - scroll to section, but what about another video scroll type section underneath it? If the positioning is absolute only, how do we replicate this.... 2-3 times on the webpage?
You could use position sticky instead of fixed, and just remove the offsetting invisible container :)
How to make video responsive?🙁
Matt so handsome 🤣
😆
Broooo you did a big mistake in beautiful tutorial, it was going awesome until the point 8:07 where you said 'I already made a body previously' bro you shouldn't have made it previously. Now I can't figure out how to create body below hero section. I created body but it's not showing in preview. I'm STUCK after following nicely for 8 mins. please help bro. Reupload a video with how to add body below sticky scroll. PLEASE BRO.
I had the same issue. In your "desktop" stack at the top, make sure it's a vertical stack, then add a section as normal. once you create the content you like, it should work from there.
I subscribed to your website. However, I did not receive the files of this tutorial
there shouldn't be any issues there, did you click on the free remix link in the description and follow the instructions?
@@mattjumper Hello Matt, I clicked on the free remix link.However, I prefer to have a file of the assets to start from scratch. Anyway, Congrats on your new course
My Tennis Club text always disappears when I set the layout direction to vertical :/
You can send me a DM on twitter @mattjumper or email jumper@madebymod.co and I can help! Either send a video of your Framer file or a remix link.
@@mattjumper I'm gonna restart for the 4th time and if it still does it I'll dm you, I appreciate it!
your photo in the center of screen is really annoying! why?? for what?