Thank you so much for this great video, I tried the first 2 methods and they work great on desktop, but I can't find a solution for the mobile and tablet version, the video stays only at the top of the page, when I would like it to take the whole screen, I tried with different videos but the result is the same, do you have any solutions? thanks anyway!
Its really nice having people around like you, you probably have great skills and experience to come up with these solutions, so i have a question for you, do you think is there any downsize for SEO and which do you think is better and faster for a workflow, using Three.js ? or just creating a video with blender and after effect and use your methods ? we are really carious of what is the best way to achieve a scroll effect from all aspects, load times, SEO's, Responsiveness and speed of development or workflow, Thank you, really appreciate the time putting on creating such an informative video
Three.js using models in the glb format is definitely way better than video , the reason is it’s possible to load the models asynchronously, so in terms of seo, the models would load away from the main thread keeping response times super quick .. Alternatively, you can create Lottie files with the video you prefer, then lazy load those , but would have to watch the Lottie’s file size
@@the_mig we tried to do Lottie files but we had some limitations of what can be achieved especially with blender, dont you think if we use threejs it is mainly for interactive elements instead of a static video ? so it is not worth the effort ? it is like coding a video is there any work around optimized solution ?
OMG, you are the best! Quick question: How can I make it work on a specific section of my page? It seems to only work if the video is placed at the beginning of my page.
@@EmiRamosArt ok so what I think you mean is that when it comes to the video section, it just scrolls past right? If you set the main container of that section to sticky top ( in advanced, motion effects) , that should force the section to stop so that the video can scroll.
@@the_migThanks for taking time to answered me. Yes, I have my section with that setting on and also "stay in colum" and everything stops when it should. The problem is the video doesn't play. I don't get it.
@@EmiRamosArt ok .. took a little tweaking but to make the trigger in the section you have to play a little with the line in the code that says start: " top top" inside the scrollTrigger loop function.. So whats happening it it starts on the top of the page (it suppose to trigger on top of VH but wordpress isnt letting it) so to get around this, you change "top top" to how many px down the page you want it to start the trigger, so what worked for me was setting it to 1000px because it was the next container after the first main one with other content.. So if its like the 3rd container then set it to more px down.. will have to play with it to get the right start you want because I dont have an idea how the design looks like but you get the idea :)
@@manigfoodhub2120 hi, generally this happens when someone accidentally puts css names or code in the wrong place by accident .. The code was copied live for the video and worked fine hey
How can you add the logo or text over the video? I see that in the samples at the beginning you have text over the video that you scroll but I can't do it. Can anyone help me?
You would place the logo widget under the video. (Same container) Then in advanced settings, you would add negative top margin to move it up.. Or Change the position of the logo to absolute and place it into the correct place with the sliders for that (also in advanced settings of the logo) Either way would get you to overlay the logo.. If it disappears under the video for some reason then just up its z-index till it’s on top..
@@TORGAMES1 ok, what was the video you used? just trying to figure out if I missed something because we have it working ok on our side.. I know that video with audio wont auto play on mobile which is standard..
Hi, thank you so much for idea #3 you are a really good teacher! :)
Thank you so much for this great video, I tried the first 2 methods and they work great on desktop, but I can't find a solution for the mobile and tablet version, the video stays only at the top of the page, when I would like it to take the whole screen, I tried with different videos but the result is the same, do you have any solutions?
thanks anyway!
Hi, I'm using the sprite method, but on mobile devices, the video doesn't resize properly. Can anyone help me
Its really nice having people around like you, you probably have great skills and experience to come up with these solutions, so i have a question for you, do you think is there any downsize for SEO and which do you think is better and faster for a workflow, using Three.js ? or just creating a video with blender and after effect and use your methods ? we are really carious of what is the best way to achieve a scroll effect from all aspects, load times, SEO's, Responsiveness and speed of development or workflow, Thank you, really appreciate the time putting on creating such an informative video
Three.js using models in the glb format is definitely way better than video , the reason is it’s possible to load the models asynchronously, so in terms of seo, the models would load away from the main thread keeping response times super quick ..
Alternatively, you can create Lottie files with the video you prefer, then lazy load those , but would have to watch the Lottie’s file size
@@the_mig we tried to do Lottie files but we had some limitations of what can be achieved especially with blender, dont you think if we use threejs it is mainly for interactive elements instead of a static video ? so it is not worth the effort ? it is like coding a video is there any work around optimized solution ?
OMG, you are the best! Quick question: How can I make it work on a specific section of my page? It seems to only work if the video is placed at the beginning of my page.
which example did you use?
@@the_mig Thank you so much! I´ve tried both. If I use it at the top of my web it works like a charm. But not in a middle section for example.
@@EmiRamosArt ok so what I think you mean is that when it comes to the video section, it just scrolls past right?
If you set the main container of that section to sticky top ( in advanced, motion effects) , that should force the section to stop so that the video can scroll.
@@the_migThanks for taking time to answered me. Yes, I have my section with that setting on and also "stay in colum" and everything stops when it should. The problem is the video doesn't play. I don't get it.
@@EmiRamosArt ok .. took a little tweaking but to make the trigger in the section you have to play a little with the line in the code that says start: " top top" inside the scrollTrigger loop function..
So whats happening it it starts on the top of the page (it suppose to trigger on top of VH but wordpress isnt letting it) so to get around this, you change "top top" to how many px down the page you want it to start the trigger, so what worked for me was setting it to 1000px because it was the next container after the first main one with other content..
So if its like the 3rd container then set it to more px down.. will have to play with it to get the right start you want because I dont have an idea how the design looks like but you get the idea :)
Hi,
Method 3: I am trying the same code. but the background position is not set dynamically so it's not working
@@manigfoodhub2120 hi, generally this happens when someone accidentally puts css names or code in the wrong place by accident ..
The code was copied live for the video and worked fine hey
How can you add the logo or text over the video?
I see that in the samples at the beginning you have text over the video that you scroll but I can't do it.
Can anyone help me?
You would place the logo widget under the video. (Same container)
Then in advanced settings, you would add negative top margin to move it up..
Or
Change the position of the logo to absolute and place it into the correct place with the sliders for that (also in advanced settings of the logo)
Either way would get you to overlay the logo..
If it disappears under the video for some reason then just up its z-index till it’s on top..
Hi, How to do for mobo device? Method 1 and 2 is not working.
Really?
What device and what browser you using?
@@the_mig Yeah, I have checked on iPhone as well as android phones. I have tested on chrome in both the phones.
@@TORGAMES1 ok, what was the video you used?
just trying to figure out if I missed something because we have it working ok on our side..
I know that video with audio wont auto play on mobile which is standard..