STEP 1) THE HTML

  
    

      Horizontal Text Slider
    
    

      

        

          
Slide 1
          

            The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can't a pardon toss the sexist exercise?
          
        
        

          
Slide 2
          

            The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.
          
        
        

          
Slide 3
          

            Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.
          
        
        

          
Slide 4
          

            A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.
          
        
        

          
Slide 5
          

            The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.
          
        
      
    
  

Yep, there is no rocket science here:

• is the “main container” for the text slider.
• is the “secondary container” in which we will do some CSS animation magic with.
• Finally, 
  are the individual slides.

  STEP 2) THE CSS

  1-horizontal.css

  /* [SLIDER] */
  #slider,  #slider .slide{
    width: 500px;
    height: 250px;
  }
  #slider {
    overflow: hidden;
    margin: 0 auto;
    font-size: 1.2em;
    background: #ffd7d1;
  }
  #slider .container {
    position: relative;
    width: 9000px; /* Assign an insanely large width */
    top: 0;
    right: 0;
    animation: slide-animation 25s infinite;
  }
  #slider .slide {
    position: relative;
    float: left;
    box-sizing: border-box;
    padding: 10px 20px;
  }
  
  /* [ANIMATION] */
  @keyframes slide-animation {
    0% { 
      opacity: 0;
      right: 0;
    }
    11% {
      opacity: 1;
      right: 0; 
    }
    22% { right: 100%; }
    33% { right: 100%; }
    44% { right: 200%; }
    55% { right: 200%; }
    66% { right: 300%; }
    77% { right: 300%; }
    88% {
      opacity: 1;
      right: 400%; 
    }
    100% {
      opacity: 0;
      right: 400%;
    }
  }
  
  /* [DOES NOT MATTER] */
  html, body {
    font-family: arial;
    background: #ffe9d8;
  }
  h1 {
    text-align: center;
  }

  • First, we line up all the .slide using float: left. The goal is to create a “super long” unbroken horizontal string of slides.
  • For that to happen, we have to set the .container to have an insanely large width.
  • Next, we set overflow: hidden on the #slider main container to prevent an ugly scrollbar.
  • The width and height of every .slide is then set to match the main #slider container… Or the CSS animation magic will not work properly.
  • Finally, we attach a keyframes animation on .container– The idea is simple, playing with the right position to “scroll” through the slides.

  SECTION B
  VERTICAL TEXT SLIDER

  With the horizontal text slider, we can simply do a small tweak to the CSS and turn it into a vertical text slider.

  STEP 1) THE HTML

  2-vertical.html

  
  
    
      
  
        Vertical Text Slider
      
      
  
        
  
          
  
            
  Slide 1
            
  
              The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can't a pardon toss the sexist exercise?
            
          
          
  
            
  Slide 2
            
  
              The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.
            
          
          
  
            
  Slide 3
            
  
              Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.
            
          
          
  
            
  Slide 4
            
  
              A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.
            
          
          
  
            
  Slide 5
            
  
              The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.
            
          
        
      
    
  

  Yep, this is pretty much the same… Just some changes in the CSS.

  STEP 2) THE CSS

  2-vertical.css

  /* [SLIDER] */
  #slider,  #slider .slide{
    width: 500px;
    height: 250px;
  }
  #slider {
    overflow: hidden;
    margin: 0 auto;
    font-size: 1.2em;
    background: #ffd7d1;
  }
  #slider .container {
    position: relative;
    bottom: 0;
    right: 0;
    animation: slide-animation 20s infinite;
  }
  #slider .slide {
    position: relative;
    box-sizing: border-box;
    padding: 10px 20px;
  }
  
  /* [ANIMATION] */
  @keyframes slide-animation {
    0% { 
      opacity: 0;
      bottom: 0;
    }
    11% {
      opacity: 1;
      bottom: 0; 
    }
    22% { bottom: 100%; }
    33% { bottom: 100%; }
    44% { bottom: 200%; }
    55% { bottom: 200%; }
    66% { bottom: 300%; }
    77% { bottom: 300%; }
    88% {
      opacity: 1;
      bottom: 400%; 
    }
    100% {
      opacity: 0;
      bottom: 400%;
    }
  }
  
  /* [DOES NOT MATTER] */
  html, body {
    font-family: arial;
    background: #ffe9d8;
  }
  h1 {
    text-align: center;
  }

  The working principals behind the vertical slider are the same as the horizontal one.

  • All the .slide are lined up vertically, which is already done “naturally” with the default display:block.
  • Similarly, we set overflow: hidden on the #slider main container to hide the ugly scrollbar.
  • The width and height of every .slide must match the main #slider container as usual.
  • Finally, attach the keyframes animation on .container– Instead playing with the right position, we will play with the bottom position to scroll vertically.

  EXTRA
  DOWNLOAD & DEMO

  That’s it for all the code, and here is the download link as promised – Plus a demo of both the horizontal and vertical slides.

  DEMO

  Slide 1

  The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can’t a pardon toss the sexist exercise?

  Slide 2

  The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.

  Slide 3

  Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.

  Slide 1

  A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.

  Slide 2

  The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.

  Slide 3

  The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can’t a pardon toss the sexist exercise?

  LIMITATIONS

  As you can already see, maintaining this slider can be quite a hassle – If you add or remove a slide, you will have to update the keyframes accordingly. Also, even though this simple text scroller does not have a single line of Javascript, it is also not responsive. You can try messing around with min-width and max-width, but the chances are, you will still need some sort of “CSS hack” to get it to work.

  DOWNLOAD

  Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

  CLOSING
  WHAT’S NEXT?

  Thank you for reading, and we have come to the end of this short guide. I hope that it has helped you to create a better website, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

  
  

  The post 2 Steps Simple Pure CSS Text Slider appeared first on Code Boxx.