DZS Parallaxer - Source Files

Where artists and fans come together.

Connect is a place where fans can engage with their favorite artists. They can see, comment on, like, and share whatever exciting material an artist chooses to post. Unreleased demo tracks, an acoustic version of the latest hit, a video shot in the studio — it’s right here and straight from the source.

Where artists and fans come together.

Parallax Elements.

Each elements inside The Parallaxer can have their own parallax elements that animated based on the main parallax container.

You can animate any css property for the elements. And each can have their own animation. At the bottom of the page there is a sample parallaxer which you can use for example like a creative team module.

The code for animating each property is easy to understand with some basic css knowledge.

<div class="dzs-col-3 dzsparallaxer--team-member-con" style="text-align: center; width: 20%;" data-parallaxanimation='[{property:"opacity",value:"{{val}}",initial:"0",mid:"1",final:"0"},{property:"transform",value:"translate3d(0,{{val}}px,0)",initial:"-30",mid:"0",final:"0"}]'>

Some properties you can animate:

opacity
position
transform
blur
any css property

Boxed Layouts Work Too.

Worried that you have a boxed layout site and this only shows fullwidth examples ? No worries, DZS Paralllaxer works in any context, any size. Just check the examples above how well they perform in a boxed layout.

Of course, the same rules apply, you can have any html content. Sliders, videos, fonts, blockquotes, testimonials. The separators can be applied on boxed elements, no problem at all.

Some quote you can fly in.