Previous Demo Back to the Codrops Article

Scattered Polaroids Gallery A flat-style take on a Polaroid gallery

This first example shows a simple use case without showing a description on the back side of the Polaroid. Clicking another navigation dot will reshuffle the Polaroids and bring the respective current item to the center.

Click on the gallery to start it.

img01

Serenity Beach

img02

Happy Days

img03

Beautywood

img04

Heaven of time

img05

Speed Racer

img06

Forever this

img07

Lovely Green

img08

Wonderful

img09

Love Addict

img10

Friendship

img11

White Nights

img12

Serendipity

img13

Pure Soul

img14

Winds of Peace

img15

Shades of blue

img16

Lightness

img10

Friendship

img11

White Nights

img12

Serendipity

img13

Pure Soul

img14

Winds of Peace

img15

Shades of blue

img16

Lightness

The next examples show how to add a description to the back of the photo which can be viewed by flipping the Polaroid. To flip the Polaroid, the current navigation dot has to be clicked a second time. This functionality is indicated by a rotated arrow on the dot icon.

Another configurable option for each item is the shuffle iteration count which defines how many times all items should be "spread", or shuffled, before the current photo moves to the middle.

img04

Heaven of time

What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.

img05

Speed Racer

img01

Serenity Beach

I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and eveybody everybody else's mortality.

img02

Happy Days

These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?

img03

Beautywood

img06

Forever this

img07

Lovely Green

img08

Wonderful

img09

Love Addict

img10

Friendship

img11

White Nights

img12

Serendipity

img13

Pure Soul

img14

Winds of Peace

img15

Shades of blue

img16

Lightness

img10

Friendship

img11

White Nights

img12

Serendipity

img13

Pure Soul

img14

Winds of Peace

img15

Shades of blue

img16

Lightness

The last example does not require a click on the gallery to initiate the first shuffling.

The dummy items show how to fill the container with Polaroids without actually making them part of the viewable gallery. This can be useful when wanting to show just a specific subset of a collection.

All Polaroids in this use case have a description on the back side, which can be viewed by clicking the navigation dot again.

img05

Speed Racer

Here he comes Here comes Speed Racer. He's a demon on wheels. Wouldn't you like to get away? Sometimes you want to go where everybody knows the your name. And they're always glad you came!

img02

Happy Days

These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?

img03

Beautywood

It's a neighborly day in this beautywood a neighborly day for a beauty. Would you be mine? Could you be mine. Now the world don't move to the beat of just one drum.

img01

Serenity Beach

I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and eveybody everybody else's mortality.

img04

Heaven of time

What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.

img06

Forever this

Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me.

img07

Lovely Green

img08

Wonderful

img09

Love Addict

img10

Friendship

img11

White Nights

img12

Serendipity

img13

Pure Soul

img14

Winds of Peace

img15

Shades of blue

img16

Lightness

img10

Friendship

img11

White Nights

img12

Serendipity

img13

Pure Soul

img14

Winds of Peace

img15

Shades of blue

img16

Lightness

Photos by Riza Nugraha, licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0)