It passes all the tests, but I’m trying to spice it up a little. The effect I’m going for is to have the main body of the page that contains the text and the author of the quote to recede to the top left, while a new quote appears from behind it, giving the appearance of a page turning or cards being flipped through.
I’ve found a few tutorials that have similar effects, but I run into two problems:
- They rely on third-party libraries
- They only work on static sites
The first one isn’t a big deal, but sort of defeats the purpose of trying to learn how to do it myself. In the second case, the explanation usually works on a static set of
<div>s, altering their
opacity. The trouble I have with these methods it that they attach CSS classes to elements to keep them hidden until the animation is triggered, but the elements are still created first. Working with React Components, I’m having a hard time creating a new element to bring in from behind the old one.
I hope this makes sense. In my head, it looks like an endless stack of index cards, and each time the button is clicked, the top ‘card’ is flipped off screen to reveal the next one showing a new quote.