10 Open Source 3D Animated Sliders Built On CSS & JavaScript

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/CI9_9MXM-Lc/

You can add some pretty crazy image sliders into your project with basic jQuery or even with free WordPress plugins.

They all have their own unique animations, custom interfaces and features. But if you can’t find what you want in a plugin, then you may be forced to build it yourself.

That’s what many of the developers featured below did when they built these incredible 3D-animated sliders. Here are 10 of my favorites from CodePen.

Slicebox

See the Pen Slicebox – 3D Image Slider by codefactory (@codefactory) on CodePen.

You’ve probably seen or heard of Slicebox before. This is a popular 3D slideshow plugin and it’s by far one of the most detailed.

This pen offers a live demo of the animated slider in action with most of the features still intact. It all runs on jQuery, while this specific demo works with just 50 lines of JavaScript.

But you can find an even more detailed example on the Codrops site. I’m a huge fan of this slider. If you’re looking for something with crazy 3D effects – this is your best bet.

Rotating Page Slider

See the Pen Rotating 3D Slider by Nikolay Talanov (@suez) on CodePen.

Developer Nikolay Talanov created this rotating slider with some very detailed JavaScript and even more complex HTML/CSS classes.

His code actually follows the BEM naming conventions for CSS, which use a double underline to separate blocks from containers. This makes it a lot easier to skim the code once you understand what you’re looking at.

But this slider may not work for everyone because it rotates the entire page rather than just a part of the page.

Still, it’s a really cool effect that would work very well on specific projects.

Smooth Perspective Slider

See the Pen Smooth 3d perspective slider by Alex Nozdriukhin (@alexnoz) on CodePen.

If you love parallax design on the web, then have a look at this slider created by Alex Nozdriukhin.

As you move your cursor around the page you’ll notice the slideshow element responds in kind. As you rotate your way through the elements, notice the custom animation effects.

This really is pretty smooth and it’s a darn creative use of web animation. However, you may have trouble finding a project that is a good fit for this type of slideshow.

3D Effects with jQuery

See the Pen jQuery 3D Effect Slider by victor (@vkanet) on CodePen.

This basic slider is proof that you can build something great with just a little bit of jQuery. It works on a timer interval, but can also be controlled with the included navigation arrows or dots.

It’s all pretty easy to customize if you’re looking to restyle the animation, as well. Just make sure that you’re up-to-date on the latest jQuery techniques before diving into this code.

3D Flipping Image

See the Pen 3D Flip Image Slideshow by Nik Lanús (@niklanus) on CodePen.

One interesting aspect of this pen is that it doesn’t work exactly like a slideshow. It’s built more to showcase the animation rather than a typical slider UI.

Still, I’d say that developer Nik Lanús has created an amazing design with a very attractive flipping animation.

You can force the images to flip by scrolling up or down on the page (this can all be controlled in jQuery). But it’ll take some work to move this animation effect into a full-blown image slider.

3D Cube Slider

See the Pen 3D Cube slider. Pure CSS. by Ilya K. (@fornyhucker) on CodePen.

I’ve never seen anything quite like this on the web – it has to be one of a kind.

With this 3D cube, you may be surprised how accurate and smooth the animations feel. Note that this script is a bit heavy, so you may have to give the pen a minute to load in.

But here’s the great part: this entire 3D cube animation works on pure CSS. No JavaScript required. How great is that?

Carousel Using TweenMax.js & jQuery

See the Pen 3D Carousel Using TweenMax.js & jQuery by John Blazek (@johnblazek) on CodePen.

You can build some incredible things with custom libraries like TweenMax.

One such example is this carousel, which works just like a typical 3D rotating album you’d expect to find in iTunes. The whole thing is controlled via JavaScript and it works with one of the many TweenMax animations.

Granted, this demo just uses placeholder text for each block – so it’s not all that pretty to look at. But you can easily swap out the text and create one heck of a custom carousel.

3D Slider in Pure CSS

See the Pen PURE CSS 3D SLIDER by Dmitriy Panfilov (@panfilov) on CodePen.

Here’s another radical slider with a super unique interface. This CSS3 slider is built on just HTML and CSS – making it even more impressive.

Creator Dmitriy Panfilov built this like an album stack where you click any of the lower elements to bring it into the foreground. It’s not your typical slideshow interface but it can work very well on websites with enough space.

But this really feels more like a practice project just to prove how much you can do with a little CSS ingenuity.

3D Image Gallery

See the Pen 3D images gallery by Bobby (@ImBobby) on CodePen.

If you’re looking for a rotating carousel with a smaller frame, check out this code snippet.

It works via CSS3 transforms and really does feel like it’s embedded into the page in 3D space. Note that the images may also take a few seconds to load, so it may require some patience on your part.

But what I like most about this snippet its portability. You can reformat the container element to whatever size you’d like – making this flexible and easy to add into any layout.

10. Carousel Cubed

See the Pen 3D Cube Carousel by Derek Wheelden (@frxnz) on CodePen.

Yup, another crazy cube carousel with some pretty whacky code.

This design created by Derek Wheelden relies on Sass and Bourbon mixins to simplify the animations. But all of the jQuery code is built from scratch, so you can easily reuse it without any preprocessing.

Again, this may not prove incredibly useful for every project you build. But the design is flashy enough to grab attention and certainly usable in the majority of modern web browsers.

This is just the tip of the iceberg with 3D effects on the web. If you’d like to see more, have a peek in CodePen for plenty of awesome 3D snippets that you can work with.