Recently while building a pretty typical static site, I found the need to have some quotes scrolling through a page. Classic job for a carousel. After doing some hunting online though, almost all carousels either used jQuery or Bootstrap as a dependency, and/or just had some really nasty CSS. And, also, I only found ONE carousel in all my hunting that was just for text, not for pictures.
So, it came time to act. AKA build it myself.
This is the result I came up with. It’s a little hacky, but it’s pure CSS3 and is perfect for quotes, if I do say so myself:
See the Pen Pure CSS3 Text Carousel by Cassidy Williams (@cassidoo) on CodePen.
The code isn’t too crazy, if you read it out. The first thing I had to add in
the HTML was the wrappers for the quotes. The <div> tags for
content-slider, slider, and mask (let’s call these the Trio of Mystery)
were all purely for the actual box holding the quotes and making sure that they
disappeared when they “faded away” (I use quotes because of how it’s written,
you’ll see).
Then you see that there’s an unordered list, where each <li> has an animation
class and contains a quote and its source. This is probably the most
straightforward part of the code.
Now let’s get crazy.
So in the CSS you’ll see basic body stuff, and then the Trio of Mystery. Like
I said before, pretty straightforward, just creates a container and a mask that
makes innocent <div>s like you disappear. Now, you’ll notice a little further
down that the .slider li section has something a little gross in there. This
is where things get hard-coded.
height: 320px;
position: absolute;
top: -325px;
Here, you’ll notice that the <li> are being set at a height and positioned
325px above their normal position. That’s because the container is set at 320px
high. The top part could have had -321px and it would have been fine. This
is how the Trio of Mystery gets away with hiding its stowaways.
If you look after this section, you’ll get to the animations. Now, this is the
part that would have been very, very significantly improved had I used a CSS
preprocessor. There’s a LOT of repetition here, and a lot of things hard-coded
for 5 quotes (no more, no less). The way each animation works is that each
quote is hidden at -325px (just out of sight, again, thanks to the Trio of
Mystery), and then when it’s that quote’s turn, it scrolls into view at 100%
opacity, and after 3 seconds, it fades (when really, its position is just moving
at the same time as the opacity is lowered to zero). Because each of the
animations last the same amount of time and goes in one direction
(15s linear infinite), we just break up the 100% into approximately fifths so
that the quotes can be spread out (the first one “exiting” at 20%, the next at
around 40%, etc).
But alas, what now?
Honestly, this works for what my original needs were. But, this mini-project could DEFINITELY be improved. Some of my ideas for a next time:
- Use a pre-processor
- Save CSS variables for the number of quotes that exist
- Generate HTML code based on the number of quotes
- Divide the percentages for the animations based on the number of quotes
Until next time!