On scrolling some elements will slide in - and slide out again if the page is scrolled further, or scrolled back up. The items to slide in are put in a container with the class .slider. That container has a width of 100%. In Styles > Effects > Transitions that slider container is given an All Properties Duration of 1 second.
The left margin of that .slider container is what will be used to move it into view. It is not a flex container as it otherwise will not work properly in Internet Explorer.
All the rest is dealt with by the tiny JavaScript put in the footer box of the container. That simply sets the tiny function fc() to run when scrolling occurs.
That function fc() checks whether the slider container area has fully come into view at the bottom of the screen. When that occurs, it sets the left margin of the slider container to zero.
The .slide container needs to have a height. If not, it will collapse. For it to change in sync with the viewport and the size of the images, the height of the images has to be used as the yardstick. The images in this example are in the aspect ratio of 4x3. So, the set width of the images were 30vw, and that makes the height 22.5vw rounded up to 23, to be used for the height of the .slider.
The second component is fairly similar, but there the elements will slide in and stay in the same position unless the viewport is changed, or if the page is reloaded. This component is built exactly like the first one, only the styling and Java script found on the Element pane are different.
The images used in this component come from Pixabay.
Slide in - Then What?
Scroll down to see the component!
On scrolling some elements will slide in - and slide out again if the page is scrolled further, or scrolled back up. The items to slide in are put in a container with the class .slider. That container has a width of 100%.
In Styles > Effects > Transitions that slider container is given an All Properties Duration of 1 second.
The left margin of that .slider container is what will be used to move it into view. It is not a flex container as it otherwise will not work properly in Internet Explorer.
All the rest is dealt with by the tiny JavaScript put in the footer box of the container. That simply sets the tiny function fc() to run when scrolling occurs.
That function fc() checks whether the slider container area has fully come into view at the bottom of the screen. When that occurs, it sets the left margin of the slider container to zero.
The .slide container needs to have a height. If not, it will collapse. For it to change in sync with the viewport and the size of the images, the height of the images has to be used as the yardstick. The images in this example are in the aspect ratio of 4x3. So, the set width of the images were 30vw, and that makes the height 22.5vw rounded up to 23, to be used for the height of the .slider.
The second component is fairly similar, but there the elements will slide in and stay in the same position unless the viewport is changed, or if the page is reloaded. This component is built exactly like the first one, only the styling and Java script found on the Element pane are different.
The images used in this component come from Pixabay.
Download the 'in-out' component (displayed)
Download the 'in-and-stay' component