search

thomaspark / flexboxfroggy

A game for learning CSS flexbox 🐸
https://flexboxfroggy.com
MIT License
6.9k stars 677 forks source link

Visually depict the axis direction #20

Open tombrewsviews opened 8 years ago

tombrewsviews commented 8 years ago

I like it. If you can depict direction too, you can differentiate row from row-reverse. Not sure how it can be implemented, and will have to make sure the aesthetics fit and aren't too distracting, but I'm definitely keen on the idea.

tombrewsviews commented 8 years ago

Initially I was thinking to use the waves but I agree with you Tom, might be distracting and too much.

What about ripples from below the leafs spreading towards the current direction?

I should make some visuals to explain that... Coming soon

tombrewsviews commented 8 years ago

Hey. Here, would visualising the axis direction as ripples on the water help people realise the difference between normal and reverse? ripledirection-01

thomaspark commented 8 years ago

Visually it looks great. Fits with the style, and it's visible but subtle.

Not sure how it would work when there's no space, like when a lilypad is on the edge of the pond or there are multiply lilypads lined up.

Also wondering how to best implement it. Perhaps grab the computed style for each lilypad, then apply a class based on each's flex-direction.

tombrewsviews commented 8 years ago

Glad you like it :) had few other options but this one as you said is the most subtle one.

I was hoping the ripples could be animated out of the leaf in the direction of the axis and disappearing gradually. ;)

Regarding the space when the leaf is close to the edge, could we add a bit more, say 40-60px of padding to just show the ripples animating out towards the edge?

What do you think? Could that work? On Fri, 18 Dec 2015 at 21:41, Thomas Park notifications@github.com wrote:

Visually it looks great. Fits with the style, and it's visible but subtle.

Not sure how it would work when there's no space, like when a lilypad is on the edge of the pond or there are multiply lilypads lined up.

Also wondering how to best implement it. Perhaps grab the computed style for each lilypad, then apply a class based on each's flex-direction.

— Reply to this email directly or view it on GitHub https://github.com/thomaspark/flexboxfroggy/issues/20#issuecomment-165893480 .