This project is a vertical sliding page which could be used for a product, a portfolio and more. There are two panels, left and right, with text on the left and a picture on the right and two buttons in the middle where the panels meet. If you push one button, the each panel moves up and down simultaneously in manner pleasing to the eye.
I put a container DIV called 'slider-container' around the left and right panels, as well as the two buttons. Then, I made sure that the container was position:relative and overflow:hidden and that the width and height were both 100vw/h to ensure taking up the entire screen real estate.
Then I made sure both left/right slides were height:100% to ensure that they took up all of the slider-container screen real estate as well.
All of the slides and buttons were put into variables to work with in the function. The slideChange function was anonymous and changed the slide up or down if those buttons were pushed.
You can see it here!