Submit your widget

Like google 3D gallery effect

Created 5 years ago   Views 17150   downloads 4628    Author tympanus
Like google  3D gallery effect
View DemoDownload 102.2 KB
50
Share |

This is a responsive Masonry like google grid with a gallery view using 3D Transforms. 

This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view.

In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key.

 

Please note that we are using CSS 3D Transforms which are only supported in modern browsers.

THE HTML

<div id="grid-gallery" class="grid-gallery">
    <section class="grid-wrap">
        <ul class="grid">
            <li class="grid-sizer"></li><!-- for Masonry column width -->
            <li>
                <figure>
                    <img src="img/thumb/1.png" alt="img01"/>
                    <figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/2.png" alt="img02"/>
                    <figcaption><h3>Vice velit chia</h3><p>Laborum tattooed iPhone, Schlitz irure nulla Tonx retro 90's chia cardigan quis asymmetrical paleo. </p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/3.png" alt="img03"/>
                    <figcaption><h3>Brunch semiotics</h3><p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo.</p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/4.png" alt="img04"/>
                    <figcaption><h3>Chillwave nihil occupy</h3><p>In post-ironic gluten-free deserunt, PBR&B non pork belly cupidatat polaroid. </p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/5.png" alt="img05"/>
                    <figcaption><h3>Kale chips lomo biodiesel</h3><p>Pariatur food truck street art consequat sustainable, et kogi beard qui paleo. </p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/6.png" alt="img06"/>
                    <figcaption><h3>Exercitation occaecat</h3><p>Street chillwave hoodie ea gentrify.</p></figcaption>
                </figure>
            </li>
        </ul>
    </section><!-- // grid-wrap -->
    <section class="slideshow">
        <ul>
            <li>
                <figure>
                    <figcaption>
                        <h3>Letterpress asymmetrical</h3>
                        <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p>
                    </figcaption>
                    <img src="img/large/1.png" alt="img01"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Vice velit chia</h3>
                        <p>Chillwave Echo Park Etsy organic Cosby sweater seitan authentic pour-over. Occupy wolf selvage bespoke tattooed, cred sustainable Odd Future hashtag butcher.</p>
                    </figcaption>
                    <img src="img/large/2.png" alt="img02"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Brunch semiotics</h3>
                        <p>IPhone PBR polaroid before they sold out meh you probably haven't heard of them leggings tattooed tote bag, butcher paleo next level single-origin coffee photo booth.</p>
                    </figcaption>
                    <img src="img/large/3.png" alt="img03"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Chillwave nihil occupy</h3>
                        <p>Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p>
                    </figcaption>
                    <img src="img/large/4.png" alt="img04"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Kale chips lomo biodiesel</h3>
                        <p>Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a bird on it craft beer Etsy.</p>
                    </figcaption>
                    <img src="img/large/5.png" alt="img05"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Exercitation occaecat</h3>
                        <p>Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.</p>
                    </figcaption>
                    <img src="img/large/6.png" alt="img06"/>
                </figure>
            </li>
        </ul>
        <nav>
            <span class="icon nav-prev"></span>
            <span class="icon nav-next"></span>
            <span class="icon nav-close"></span>
        </nav>
        <div class="info-keys icon">Navigate with arrow keys</div>
    </section><!-- // slideshow -->
</div><!-- // grid-gallery -->
 
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>
<script>
    new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
</script>

Read more:http://tympanus.net/codrops/2014/03/21/google-grid-gallery/