Day # 71: Sliding text

Sometimes displaying text can get more sophisticated by animating that showing of content. With that in mind, I decided to animate the displaying of text by using a slider on a vertical bar.

This allows us to save or keep the rest of the text hidden. In other words, our website gets significantly more efficient and elegant.

The key here is to create 4 paragraphs so that we can show just one at a time, depending on where the slider is placed.

The vertical bar is made up of 4 lines and an additional one, thicker, which acts as the active one.

    <div class="controller">

        <div id="line1"></div>

        <div id="line2"></div>

        <div id="line3"></div>

        <div id="line4"></div>

        <div id="active"></div>

    </div>

Later on, in Javascript we get to modify the position of the text, or those 4 paragraphs, so that when we move the slider we can show one paragraph at a time. 

        line1.onclick = function() {

            slider.style.transform = 'translateX(0)'

            active.style.top = '0px'

        }