Norway


A Masonry-powered with a motion hover effect on the items and a .

GridLayout_featured  - GridLayout featured - Grid Layout with Scrollable Content View

Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

The initial view of the layout looks as follows:
GridLayout_01  - GridLayout 01 1 - Grid Layout with Scrollable Content View

When clicking on an item, we show the content:
GridLayout_02  - GridLayout 02 - Grid Layout with Scrollable Content View

- advertisement - Grid Layout with Scrollable Content View

Here’s the whole animation:

GridLayoutScrollable  - GridLayoutScrollable - Grid Layout with Scrollable Content View

We hope you enjoy this little layout and find it useful!

References and Credits

Previous:



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here