Documentation Parallaxer

Parallaxer

Created: 03/04/2016
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments

Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, you can ask them in the Item Discussions.

Intro Parallaxer - top

DZS Parallaxer is a script that turns any content into a cool parallax effect. It works smooth with any content you throw at it, images and even sliders, video players, basically any html content.

Wow your visitors with DZS Parallaxer and install easy in any template, and setup any content in any size.

Parallaxer Features

fully responsive - looks great from mobile to HD
touch optimized - touch devices are not forgotten
CSS3 technology - this component uses cutting-edge css3 definitions
easy install - purchase, download the zip, read the docs
iPhone / iPad optimized - this gallery has been optimized for Apple touch devices
Android optimized - this component has been tested on Android 4.0+ Chrome
SEO friendly - built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget
compatible with all major browsers, including IE - compatible from IE8 to IE11+, Chrome, Safari and Firefox
retina ready - looks great on retina devices
embed ready - allow users to embed the video player on their site
developer / SASS powered - this component's CSS has been built on top of SASS which means SASS users will have an easy time modifying the skins. For non-SASS users it's no problem either because CSS files ( generated by SASS ) are provided

Installation - top

All you have to do for installing on your site (ie. yoursite.com) is copy the contents of the /source folder to a folder (ie. yourfolder) on your site via ftp ( with FileZilla ) or any other upload service. You can then access your contents via http://yoursite.com/yourfolder.

Integrating in your project - top

In order to install this component in your html page you need to:

unpack the download package, open the source folder
copy the folder /dzsparallaxer into your project folder

open your html file and insert this inside your <head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<link rel='stylesheet' type="text/css" href="dzsparallaxer/dzsparallaxer.css"/>
<script src="dzsparallaxer/dzsparallaxer.js" type="text/javascript"></script>

note: if you already have included jQuery in your document, do not include it again, jQuery should only be included once

insert this inside your <body> tag where you want the parallaxer to appear

<div class="dzsparallaxer auto-init out-of-bootstrap" data-options='{ direction: "normal"}' style="height: 300px;">
    <div class="divimage dzsparallaxer--target" style="width: 100%; height: 500px; background-image: url(img/imgbig2.jpg)">
    </div>
</div>

All done!

Customise It - top

So let's explain the structure of the above so you can customize it to your needs.

The Item

The Parallaxer works with two classes. The "dzsparallaxer" is the main visible ( clip ) part. And the "dzsparallaxer--target" is the total part, the part that gets the effect. You can have any html content here as long as it has this class.This is an example for a image content.

Main Initiation

The script is initialized by the auto-init class, when the document is ready. Note that you can add settings via the data-options attribute. Settings are explained below.

Alternative Initiation

dzsprx_init('#prx1, { direction: "normal", mode_scroll:"fromtop"} );

});

</script>

This is a scripted initation. The settings are located directly in the script call.

The Settings

settings_mode

scroll or mouse or mouse_body

mode_scroll

normal or fromtop

easing

easeIn or easeOutQuad or easeInOutSine

animation_duration

animation duration in ms

direction

normal or reverse

How to set up all body background

This is the call for a fullscreen parallax background. Place

</div>

How to change the color of a separator

Let us say you have this block

</div>

Change the color by simply transforming it to

<style>

#prx1 .color-bg{

fill: #ff00ff;

}

</div>

How to set up lazyloading

For lazyloading you just need to:

add the use-loading class to the dzsparallax container
add the data-src attribute to the target, pointing to the image you want to lazyload
( optional ) add preloader div to the main dzsparallax container

<div class="preloader-semicircles"></div>

</div>

How to set up the demo team module

Lets look at the team module example

<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"}]'> <img src="img/team1.jpg"/> <div class="team-member--title"> King Doe Joseph </div> <div class="team-member--subtitle"> General Manager </div> </div>

<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"}]'> <img src="img/team3.jpg"/> <div class="team-member--title"> Sarah May </div> <div class="team-member--subtitle"> Finance </div> </div> <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:"1"},{property:"transform",value:"translate3d(0,{{val}}px,0)",initial:"30",mid:"0",final:"0"}]'> <img src="img/team4.jpg"/> <div class="team-member--title"> Prett Scott </div> <div class="team-member--subtitle"> Communcation </div> </div>

</div>

I bolded the part which handles the parallax properties. This is the attribute - [{property:"opacity",value:"{{val}}",initial:"0",mid:"1",final:"0"},{property:"transform",value:"translate3d(0,{{val}}px,0)",initial:"-30",mid:"0",final:"0"}] .

It's basic javascript object structure. You can modify any css property on this.

How to setup Features Module

First you need to include these 2 scripts in the <head> tag, or before the <body> tag end

<script src="dzsparallaxer/dzsprx_module_parallax_features.js" type="text/javascript"></script>     
<link rel='stylesheet' type="text/css" href="dzsparallaxer/dzsprx_module_parallax_features.css"/>

This is the structure:

<div class=" dzsparallaxer-features auto-init" data-options='{
js_breakout:"off"
}'>

    <img class="fullwidth feat-img " src="img/features-1.png"/>
    <div class="desc-block">
        <h2>Features Module</h2>
        <p>This is a bonus module ( independent of parallaxer functionality ) that you can use to display images and text like this. All you need to do is to include the scripts and markup found in the documentation.</p>
    </div>


    <img class="fullwidth feat-img" src="img/features-2.png"/>
    <div class="desc-block">
        <h2>Unlimited Possibilities</h2>
        <p>DZS Parallaxer is a script that turns any content into a cool parallax effect. It uses an algorithm to calculate visible and total height to calculate the scrollarea. It uses the latest CSS3 and Javascript tehniques to deliver a super smooth experience. </p>
    </div>


    <img class="fullwidth feat-img" src="img/features-3.png"/>

    <div class="desc-block">
        <h2>Unlimited Number of Images</h2>
        <p>You can scroll like this unlimited number of images and text blocks. In the text block, any html is included, like video player or iframes. On scroll, the text will automatically fade in and out.</p>
    </div>

    <div class="dzsprx-features-container">

        <div class="dzs-colcontainer">





        </div>

    </div>
    </div>

Bolded are the image and description properties.

How to make parallaxer responsive resize?

Parallaxer can resize to device dimensions.

<div class="dzsparallaxer auto-init out-of-bootstrap use-loading" data-responsive-reference-width="1170" 
data-responsive-optimal-height="300" data-options='{   direction: "normal"}' style="height: 300px;">

Just add the data-responsive-reference-width="1170" data-responsive-optimal-height="300" attributes

to the dzsparallaxer div. The reference width represents at which viewport width the parallaxer has been thought, and the height attributes represents maximum height.

FAQ - top

What is the difference between jQuery(document).ready and jQuery(window).load?

When you want to manipulate pictures - ie: you depend on their size - like a ken burns slider or scroller does, it's best to use jQuery(window).load because that executes the code in it AFTER all the images and content has loaded. For everything else, there is jQuery(document).read -which only waits for the html to be parsed corectly & all elements formed.

Developer Tips - top

Recommended Programs

You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:

.html / .css- Dreamweaver CS5
.js - Aptana Studio3.0
.scss - Netbeans with SASS plugin

SASS

If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer's life easier. This is optional but if you want to try it here is the site.