Minimalist CSS Text Sliding Animation Tutorial

Minimalist CSS Text Sliding Animation Tutorial

Articles Blog


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

27 thoughts on “Minimalist CSS Text Sliding Animation Tutorial”

  1. Hey buddy! What if I use more than 3 texts? How I divide the keyframes percentage & px in each text? Can you plz help?

  2. Hi this is very nice,

    It will have better performance if you use transform: translateX() instead of margin, and also by duplicating the HTML slide and changing a little bit the animation values you can remove the last slide flickering effect and achieve a more smooth transition.

    Here is an example that I made base on this one:
    https://codepen.io/Zerchan/pen/aMjWQW

  3. There is a small typo at the end of the video. The box is bigger because of the padding, not margin. The box sizing fix works because it includes the padding in the elements total height.

    See https://www.w3schools.com/css/css3_box-sizing.asp

  4. Your explaination is awesome, but I do not know why the video do not look sharp during playing it, kindly when you export do it with high quality

  5. Your videos are good, but, I don’t think you realize we can barely see what you’re typing. You need to GREATLY increase the font of what code you type so we can see it clearly

  6. I am trying this tutorial in Angular 7 and somehow box-sizing: border-box is failing to work hence given the alignment that you described. is there any solution to this ?
    I have also tried adding support for the various browsers but still no luck. I am currently using google chrome as my browser

  7. Techincally `box-sizing: border-box;` will include any border and padding you 've added, not margins
    but thank you for your good channel

  8. I'm sorry but this is shit. I don't know how you got this to work but it's trash it doesn't even work one bit. Take this trash down.

Leave a Reply

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