Getting to the 3rd Dimension! Everything You’ve Ever Wanted to Know About 3D Slideshows
Wow, it’s not a surprise, 3D is trendy on the web! Getting more and more popularity. And there are a bunch of great libraries or technologies, like WebGL and CSS 3D Transforms, giving you the opportunity to include 3D elements in a couple of parts of your website!
In the beginning
But that trend is shaped, actually started, by something almost new: Web Graphics Library, or WebGL. It’s the greatest game changer in web graphics making 3D easy to use and using of graphics on any browser with no plugins.
3D on the web truly arrived with the launch of WebGL, powering many of the most astonishing websites created recently. Simply speaking, the technology is a way to render interactive 3D and 2D graphics inside browsers with hardware acceleration, without any plugin.
According to 99Designs, there’s no doubt that the biggest web design trend is WebGL in all it’s flavors — interactive video, games, animation and data visualization.
3D slideshow, greatest friend of images
Do you remember Flash? That was great for creating stunning slideshows and the only option for more attractive image galleries.
But no more! Say hello to the new type of slideshows! There are several most popular 3D slider transitions, like blinds, cube, flip, fold, tiles, turn, unfold, etc. That will totally improve a simple website’s user experience.
CSS hardware acceleration
It is really light for executing as well! That’s because of the CSS-hardware-accelerated transitions. That means that the script is accessing the device’s graphical processing unit for much better performance.
Sitepoint is explaining how the hardware acceleration works:
When the browser receives a page’s markup, it parses it to build the DOM Tree. The DOM Tree and CSS allow the browser to build the Render Tree. The Render Tree consists of render objects — the elements to be rendered on the page. Each render object is assigned to a graphic layer.
Each layer is uploaded to GPU as a texture. The trick here is that the layer may be transformed in the GPU without repainting, like in the case of 3D graphics. These transformations are made by the separate Compositor process. You can find more information about the composition in Chrome here.
The alternative for web: CSS 3D Transitions
3D transform can be dazzling, a true spectacle to behold. But before we start tacking 3D diamonds and rubies to our compositions like Liberace’s tailor, we owe it to our users to ask what can they benefit from this awesome feature. As the user Desandro on GitHub is writing:
The entire application does not, and should not, take advantage of 3D. CSS was built to style documents, not generate explorable environments. I fail to find a benefit to filling out a web form that can be accessed by swiveling my viewport to the Sign-Up Room (although there have been proposals to make the Web just that). However, there is plenty of opportunity to use 3D transforms in between the interface, via transitions.
Take for instance the Weather App on the iPhone. The application uses two views: a details view and an options view. Switching between these two views is done with a 3D flip transition. This affords the user that the interface has two and only two views, as they can only exist on either side of the same plane.
Also consider slide cycle plugins. When you’re at the last slide, what cues tip-off the user that the advancing will re-start the cycle at the first? A better paradigm can be used with a 3D transform, where the slides are placed side by side one another in a circle in 3D space. In that arrangement, the last slide logically comes before the first.
3D transforms are more than just eye candy. We can also use them to solve dilemmas and make our applications more intuitive.
Let me make it easier
As you already know, there are really many cases in the contemporary design trends where you can include a bit of 3D reality. It’s absolutely important to turn your slideshows into stunning web presentations.
It’s easy than ever! Just use Adobe Dreamweaver and DMXzone App Connect Slideshow with 3D Transitions add-on. You will find the most popular and trendy 3D transitions available on the web, ready to use without coding skills. Blinds, cube, flip, fold, tiles, turn, unfold, it’s all possible with our newest add-on.
Where to use
Much cases: from your e-commerce website, to a corporate page. Everybody loves 3D slideshows! And check out some showcases here, here and here. Stunning, isn’t it?
