hello and welcome to red stapler channel in this tutorial I'm going to show you
how to create a text sliding effect with CSS only in just a few minutes ready
let's check it out the concept is to create a stacking text and use animation
to increase the margin and masking div to create a sliding effect now here's
the example page I already have a Content wrapper div with flex layout to
put everything on the center of the page
let's create a wrapper for our text slider and put some text into it this
will be a static text in front of the slider next create a slider div then
inside creates child divs for each text you want to have in a list
now let's set the font size weight color and uppercase transform
also use a flex layout to Center everything next we will set the height
off the slider div which will be the masking div for this example I'm going
to use 50 pixels height and also add padding for spacing next our set the
background color for each text
also set the text color to white
now I'm going to set the height for each one to 50 pixels to match with the masking
div also add margin bottom to add spacing between them then add some
padding and takes align Center almost ready now let's add the animation since
each text has 50 pixel height and 50 pixel margin bottom you'll have to slide
it 100 pixels at a time
now here's the problem the text is continuing to slide without stopping we
can fix this in our animation by adding a small delay between each position
and we'll hide the extra text by ad or a flow hidden to our masking div here is
another problem we already set the height for each text to 50 pixels but the actual size
for each one is more than 50 pixel due to the margin so they are not aligned we
can fix this by setting boxer sizing to border box to include the margin
into the height so that's all for this tutorial if you love this video don't
forget to like or subscribe to our channel to stay tuned for the next video
thanks watching and see you next time bye