Minimalist CSS Text Sliding Animation Tutorial


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

28 Comments

Add a Comment

Your email address will not be published. Required fields are marked *