How to get images to flip on a web page, like this

When you go here:
http://codecanyon.net/item/buzzyvideos-social-network/full_screen_preview/14664486

and scroll down that page, the images flip. Can you tell me if this is a specific program, that I would need to add to a web page to create this on my site, or is it some particular lines of code? Maybe you can see by selecting view source, I couldn’t tell.

Hi Chris,
It looks like the site is using a script called AnimOnScroll. It’s illustrated on Typmpanus, here:

The live demo is here:

1 Like

Thanks so much

You’re welcome!

Can you provide some basic installtion instructions, or direct me to where those might be, please?
Much thanks

I think the page you want is here.

Thank you for your message and link.
I read that page and have gotten as far as adding the unordered list and replacing their images with a sample of my own, however I’m not sure what I should do next to get this to work.

Should I add this to GridLoadingEffoects/css/default.css:

    /* Effect 4: fall perspective */
.grid.effect-4 {
	perspective: 1300px;
}

.grid.effect-4 li {
	transform-style: preserve-3d;
}

.grid.effect-4 li.animate {
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	animation: fallPerspective .8s ease-in-out forwards;
}

@keyframes fallPerspective {
	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

And should I add this somewhere:

 new AnimOnScroll( document.getElementById( 'grid' ), {
	minDuration : 0.4,
	maxDuration : 0.7,
	viewportFactor : 0.2
} );

Any guidance will be appreciated.

I haven’t got round to playing with this myself yet, but it looks as though that CSS is an important part of the grid effects.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.