I’m working on the project “Random Quote Machine” and I’m trying to implement the same ‘text ease-in’ as the example found here. I know it could be done with jquery, but I’m trying to use only React.
I’ve tried following a promising path of using CSS Transition but the render of React doesn’t trigger the transition.
After some more mucking about (who can sleep with bugs?) I found my problem. The React render would trigger the transition, IF i’d put the transition on the right component instead of on it’s parent. Still open for feedback!
Cool picture and overall nice clean design. I like the “Wasting your life” timer.
Here are a few things I would do.
Switch the #quote-box to use max-width: 800px; instead of just width. Otherwise, the page won’t be responsive. Having done this, you need to remove the background repeat and set the size to cover on the background image.
I would make the buttons bigger, you can just up the font-size a bit (maybe like 1.15em).
I may have missed it but I didn’t see any logic to make sure the same quote does not appear two times in a row.
One way to make the quote box jump a little less between short and long quotes would be to give the .quote-text class a min-height and then give the child span element margin auto. I think around 200px for the min-height will take care of the 1, 2 and 3 line quotes.
Last, you have a comma instead of a semicolon on the .quote-text selector for display: flex (display: flex,)
Lot’s of great stuff here, thank you for taking the time!
Switching to max-width is a good idea (I was designing for full screen where I should be thinking about responsiveness). Trying to get this to look good on mobile will be a challenge so I put it on the to-do list.
I don’t have logic against showing the same quote twice, didn’t think about that!
About the min-height, you where almost right, but 250px is the sweet spot for non-jumpy divs up untill 3 lines.
And the comma… I think I wrote that piece of CSS just after writing a JS object
