An experimental web layout where several image columns get animated out when a menu item is clicked.

Animated Image Columns was written by Mary Lou and published on Codrops.

Celý článek

Today we’d like to share a little layout with you. The idea is based on the current trend of a grid layout where the columns are animated. You can see this kind of animation in Aristide Benoist’s amazing design for Everest or Hrvoje Grubisic’s GETZ — Photography Portfolio Website concept. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.

The animations are powered by TweenMax.

Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers.

The initial view of the demo is the navigation with the decorative grid in the background.

AnimatedColumns_01

When clicking on one of the menu items, we animate the grid out by moving the columns in an alternating fashion, rotating them slightly. We mimic this behavior on the letters of the menu item.

When the grid moves away, the content area underneath is revealed:

AnimatedColumns_02

AnimatedColumns.2019-05-16 17_23_33

We hope you enjoy this experiment and find it useful!

References and Credits

Animated Image Columns was written by Mary Lou and published on Codrops.

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace