Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
You can do that with the parallax transition. In the Layers -> Transitions -> Parallax Transition tab, by selecting the scroll event.
Can you maybe give me some more details - what should the paralax settings be to achieve the same as on the page http://projects.aljazeera.com/2015/08/sea-watch/ - those settings under 'Distance and Rotation' and 'Timing and Transform'.
Also, should the image be set as a background, or as a separate layer?
As much detail as you can provide me on how to replicate the gallery on the page -
Unfortunately I cannot provide you with the exact values you need to replicate that site. You will need to play around and test the parallax values to see what works best for you.
You could also utilize the play-by-scroll effect for a closer result to that setup. With it, you could scroll through multiple text layers similarly to that site, by using the text layers as keyframes.
Also, if you're new to LayerSlider, there are many source materials available you can check, that will help you get started using the plugin. The documentation contains detailed information and examples that you can read on the following URL: https://layerslider.kreaturamedia.com/documentation/ You can also read the interactive tooltip & notification messages integrated into the Slider Builder interface, with descriptions of the settings by hovering over each one of them. There are also video tutorials available on video sharing sites, for example, on YouTube. They were created by other users or authors, but still, they can be helpful. Finally, you can import the demo sliders from the Template Store to see what settings we used and how we set them up exactly.
The play by scroll uses keyframes to trigger a particular action, which is not what I want. I want a text layer to move up over a static image until it exists the screen, then triggering a new static image, with a new scroll-dpendent text layer.
The above - or the reverse when scrolling up the screen - is not going to work by triggering an event when reaching a key frame. I want the user to have control over the progression of the text while they scroll up/down. As with the example I provided.
Is this something Layerslider can do? Have one layer static, while one scoll-dependent layer moves up or down depending on input from the user?
I paid for a support license purely to get to the bottom of this, so your continued support, and providing details ratehr than suggesting I look for YouTube videos, would be greatly appreciated.
The closest to this setup -by using the play by scroll- would be to create separate slides for each instance of the text+image combo.
Basically, the 'static image' will be the slide background image and the text layer moves in front of it. This way when you change slides with a scroll, the text layer will animate in on another scroll, stay at the middle, and then animate out on new scroll, and a new image+text combo will appear on the new slide.
Unfortunately you cannot break the layer movement into multiple parts. So you cannot use multiple scrolls on a single layer, only one breakpoint per layer. Sadly, the exact animation showed in your original message, cannot be recreated with LayerSlider currently.
Hi there,
I am trying to figure out how I can have a text layer move up/down a slide as the user scrolls up/down the page?
Is this possible, and if so, how do I go about doing it?
There are examples of this on this page - http://projects.aljazeera.com/2015/08/sea-watch/
Thanks in advance for your help.
Chris
Hello Chris,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
You can do that with the parallax transition. In the Layers -> Transitions -> Parallax Transition tab, by selecting the scroll event.
Hi Attila,
Thanks for getting back to me so promptly.
Can you maybe give me some more details - what should the paralax settings be to achieve the same as on the page http://projects.aljazeera.com/2015/08/sea-watch/ - those settings under 'Distance and Rotation' and 'Timing and Transform'.
Also, should the image be set as a background, or as a separate layer?
As much detail as you can provide me on how to replicate the gallery on the page -
Thanks,
Chris
Unfortunately I cannot provide you with the exact values you need to replicate that site. You will need to play around and test the parallax values to see what works best for you.
You could also utilize the play-by-scroll effect for a closer result to that setup. With it, you could scroll through multiple text layers similarly to that site, by using the text layers as keyframes.
Also, if you're new to LayerSlider, there are many source materials available you can check, that will help you get started using the plugin. The documentation contains detailed information and examples that you can read on the following URL: https://layerslider.kreaturamedia.com/documentation/ You can also read the interactive tooltip & notification messages integrated into the Slider Builder interface, with descriptions of the settings by hovering over each one of them. There are also video tutorials available on video sharing sites, for example, on YouTube. They were created by other users or authors, but still, they can be helpful. Finally, you can import the demo sliders from the Template Store to see what settings we used and how we set them up exactly.
Hi there,
The play by scroll uses keyframes to trigger a particular action, which is not what I want. I want a text layer to move up over a static image until it exists the screen, then triggering a new static image, with a new scroll-dpendent text layer.
The above - or the reverse when scrolling up the screen - is not going to work by triggering an event when reaching a key frame. I want the user to have control over the progression of the text while they scroll up/down. As with the example I provided.
Is this something Layerslider can do? Have one layer static, while one scoll-dependent layer moves up or down depending on input from the user?
I paid for a support license purely to get to the bottom of this, so your continued support, and providing details ratehr than suggesting I look for YouTube videos, would be greatly appreciated.
Thanks,
Chris
Thank you for the feedback.
The closest to this setup -by using the play by scroll- would be to create separate slides for each instance of the text+image combo.
Basically, the 'static image' will be the slide background image and the text layer moves in front of it. This way when you change slides with a scroll, the text layer will animate in on another scroll, stay at the middle, and then animate out on new scroll, and a new image+text combo will appear on the new slide.
Unfortunately you cannot break the layer movement into multiple parts. So you cannot use multiple scrolls on a single layer, only one breakpoint per layer. Sadly, the exact animation showed in your original message, cannot be recreated with LayerSlider currently.