Image

Parallax Image

 

Download Parallax Image 1.1b3

Now compatible with Typesetter 5

 

Installation:
Unpack the ZIP into your /addons directory and install it via
Admin Toolbox → Plugins → Manage → Available → Install

Found a bug? Have suggestions or feature requests?

Join the discussion in the Typesetter CMS Forum

Para…what?

Parallax Scrolling is an effect that creates the impression of depth and… well, see Wikipedia.

Parallax Image is a gpEasy/Typesetter plugin that generates this effect for you. It adds a content type (section type) with it's own editor component.

Parallax Image sections look nice when placed inside Wrapper Sections as a background element, along with other content types in the foreground.  But of course they can also be used stand-alone.  The plugin features 3 presentation modes - ‘parallax’, ‘fixed’ and ‘static’ and comes with a predefined Section Combo Wrapper + ParallaxImage + Text (caption).

Parallax scrolling works only on pages that contain enough content to be scrollable. Although parallax scrolling effects also look nice in the header or footer of a page,  they work best for sections in the body of a page which can scroll from the lower to the upper edge of the viewport.

Mobile devices

Currently mobile web browsers don’t play well with parallax scrolling, even on beefy devices. I could also say, they hate it! So the result is terribly jerky.

That’s because mobile browsers pre-render pages as images, and have algorithms to keep memory usage as low as possible. These algorithms are not optimized for things like parallax scrolling.

This may change in the next years but for now, Parallax Image will automatically scroll static on viewports narrower than 768 px.

Smooth scrolling

Parallax scrolling only looks good with smooth scrolling. Most browsers do not scroll smoothly when using the mouse wheel – at present only Firefox does. Therefore the plugin automatically implements and enables jquery.scrollSpeed for Webkit browsers (Chrome, Safari, Opera, Chomium), Internet Explorer and Edge.

The soft scrolling bug from ver 1.1b1 which occured in Webkit/Chrome in some situations is hopefully fixed with ver 1.1b2.

The math behind

All the math needed will be done automatically. This means that images will be automatically scaled and placed to make the effect work in every situation.

You will notice that the final size of the image changes when you change scrolling type and speed. If you wonder why this is so, just imagine an image that does not scroll at all (fixed): This image must be scaled to fill the entire viewport height, even if the current visible part is small.  Scrolling here actually just moves the clipping area. On the other side imagine an image scrolling with the same speed as the content (static): This image only has to cover it's section. Parallax scrolling is somewhere between fixed and static scrolling, and so the image size will also have to be, depending on the scroll speed.

The built-in algorithm will take image sizes, scrolling parameters and viewport dimensions into account. You cannot tweak this behavior using the editor, but  trust me when I say — you would not want to calculate and set these values manually.


This page is also sort of a stress test. It contains 11 simultaneously animated Parallax Layers, most images are scaled and partially covered with transparent areas and text with shadows. So if the presentation experience is a bit jerky, that's because your browser has quite some work to do here.

 

Usage

 

Parallax Image sections and it’s predefined Section Combo are quite easy to use.

Once the plugin is installed, you will have two new content types available in the Section Manager:

The sole…


Parallax Image

and a Section Combo…


Wrapper Section + Parallax Image + Editable Text


Add one of these Sections to a page and edit it.

This is how the editor component looks like:


Choose an image by clicking [ Select Image ], set Scrolling Type and Scroll Speed, Save, VoilĂ !

As you see there is also a setting called ← Width →. Here you may choose ‘window’ instead of the default ‘content’.
Doing so will scale the section to cover the entire viewport/window width, thus breaking out of the horizontal content boundaries.  It will only work in themes where the content is centered. Because it’s done using CSS3 calc() it will not work in Internet Explorer 8 and earlier, in older Android Stock Browsers and in Opera Mini.


See the result here:

 

Image

Combo with Caption

This caption is in fact is a generic  Editable Text section placed on top of a Parallax Image section. It is centered horizontally and vertically by default . Everything is packed into a Wrapper Section. All components have preset class names you may inspect and change using their Section Options.

This Section Combo comes predefined but you may also build your own ones, use other sections and even nest Wrappers and Grid columns.

Backdrop image courtesy of Nils Homann


Stacked Parallax Layers

If you’re familiar with gpEasy’s Section Management, know how to create tranparent PNGs and have a little patience, you can also create stacked parallax scrolling effects. See the following 4-layer landscape as an example. It stacks four PNGs and uses the scrolling speeds 0 (=scrolling type ‘fixed’), 20, 40 and 80 %.

Since the images are placed on top of each other, editing is a bit tricky and you might want to select them using Admin Toolbox → Current Page → Editable Areas.

 


Layer 4 (backdrop)

 
Layer 3

 
Layer 2

 
Layer 1 (foreground)
 
You may use these images freely under the terms of the Creative Commons
CC-BY-SA 4.0 License

Beautiful, isn’t it?

Image
Image
Image
Image

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 


Layer 4 (backdrop):

 
Layer 3:

 
Layer 2:

 
Layer 1 (foreground)
 
You may use these images freely under the terms of the Creative Commons
CC-BY-SA 4.0 License

Take
a
Trip!

Image
Image
Image
Image

It turns out that we can have quite some fun with this little tool.

Watch this one ;^)

 


Tiled patterns

You may also use repeating tiles as backgrounds. Just select ‘tile’ in the Size dropdown instead of ‘cover’:

 

Image

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

Found a bug? Have suggestions or feature requests?

Join the discussion in the Typesetter CMS Forum