#40

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools
  • Miscellaneous
  • Utility

An easy way to start using parallax

Creates a parallax by combining a selection of pages in your active theme. It can manage multiple parallax sliders that can be configured in it's own way.


What is a parallax?

It's a easy way to combine all pages into one single page, also known as single page websites. It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

Designed to fit to different screen sizes as well as tablet and mobile devices.


Use your current pages

The plugin is designed to be as customizable as possible and that any site should be adaptable without too much work. The plugin can combines all your current pages into one single page.


Implementation

Although it's a fairly complex feature it does not require any advanced skills due to the plugin works for you to be as automatic as possible.


It's using fullPage.js

To create this amazing feature the plugin is using a JavaScript framework calledfullPage.js. It's a well known framework that is used på several big companies souch as Sony, Vodafone and British Airways.

Compatibility

fullPage.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12, etc. It works with browsers with CSS3 support and with the ones who don't have it, making it ideal for old browsers compatibility.


Limitations

  • It's impossible to have a multi-level parallax. That means that you can not include a page in your parallax slider that also have a parallax component included. In that case the page will be automatically excluded.

ToDo List

Frontend:

  • Extended documentation about how to customise each page.

Backend:

  • Markup cleanup.

Implementation

Start with creating the pages you want in your parallax.

It's highly recommended that you have no layout or create a new layout without the <html><header><body> blocks in the pages that will be used in your parallax due to it will otherwise create duplicate content.

After that go to the Parallax manager that is located in the top menu.

Manage parallaxes

Create a new parallax and start with giving it a name. The name will later be represented in a dropdown list of selectable parallaxes on the page that will hold the parallax. After that go to the Pages tab. Drag and drop all the pages you want to have in your parallax into the right square box called Selected Pages.

The selected page can be placed in two levels. The first level will create a vertical parallax and pages in a sub-level will create a horizontal slider. After the pages is selected save the parallax and to to CMS and the page that will hold the parallax.

Main page for the parallax

Add the component to the page and select a parallax from the dropdown.

Settings

There is a lot of settings that has been implemented. Read more about how these work on fullPage.js.

  • Vertical Centered
  • Resize
  • Scrolling Speed
  • Menu
  • Auto Scrolling
  • Scroll Overflow
  • CSS3
  • Loop Bottom
  • Loop Top
  • Loop Horizontal
  • Navigation
  • NavigationPosition
  • Slides Navigation
  • Slides NavPosition
  • Padding Top
  • Padding Bottom
  • Fixed Elements
  • Normal Scroll Elements
  • Normal Scroll Element Touch Threshold
  • Keyboard Scrolling
  • Touch Sensitivity
  • Continuous Vertical
  • Animate Anchor
Markup

The only thing that needs to be done is to add the component.

{% component "parallax" %}

Libraries

The plugin uses two JavaScript libraries.

  • fullPage.js - A simple and easy to use plugin to create fullscreen scrolling websites.
  • Sortable - Johnny have created a jQuery lib for nested sortable lists.
  • Found the plugin not useful on 16 Aug, 2016

    Hello,

    I just installed this plugin on localhost and had the following error when I navigate to the plugin at the backend:

    The reserved indicator "@" cannot start a plain scalar; you need to quote the scalar at line 27 (near "form: @/plugins/freestream/parallax/models/parallaxes/fields.yaml").

    Kindly assist.

  • Found the plugin not useful on 11 Oct, 2015

    The effect this plugin allows you to do has nothing to do with parallax.

  • Found the plugin useful on 17 Dec, 2014

    i solved my problem ) Cool plugin, thanks!

  • Found the plugin useful on 16 Dec, 2014

    Shan jiang. Hello friend. Can you tell me how you configured the parallax October plugin with RjGallery. I have one or the other. Together does not work. All the head broke. No one can tell me. What is my mistake?

  • Found the plugin useful on 16 Dec, 2014

    freestream.parallax::lang.components.properties.paddingTop.validationMessage

  • Found the plugin useful on 30 Sep, 2014

    i am currently using it in the project (http://belovedmoment.com/gallery#wedding) everything work perfectly!!! Love it :)

  • Found the plugin useful on 11 Sep, 2014

    Great plugin! Thanks for sharing!

  • Found the plugin useful on 19 Aug, 2014

    greetings..i'm having problem trying to implement the parallax plugin due to several reasons:

    1. I know very little about web development (which includes using octobercms)
    2. im using several pages edited using the travu-theme.

    I can't seem to combine the pages as how i want it to be(to be able to scroll to the right/down to visit another page), but instead the they don't either show(if i make it nested), or the pages merges together(if i put it on the second level).

    what am i doing it wrong?i've already removed the layout and placed it in each of the respective pages. Is it because i have the footer and header? I wish somebody would be able to help me..there's not much resource to refer to..though,i really love the plugin..

1.0.12

Bugfix for yes/no attribute rendering in frontend.

Jan 29, 2016

1.0.11

October RC compatibility verification.

Mar 28, 2015

1.0.10

Removed debug row.

Sep 17, 2014

1.0.9

Bugfix of anchors. Replaces slashes with dash.

Sep 17, 2014

1.0.8

Markup and JavaScript cleanup

Sep 07, 2014

1.0.7

Code cleanup

Sep 07, 2014

1.0.6

Implements a brand new page selector to make it responsive friendly.

Sep 06, 2014

1.0.5

Major bugfix of page selector.

Aug 30, 2014

1.0.4

Markup and JavaScript fixes for backends page selector.

Aug 20, 2014

1.0.3

Removed unnecessary includes of js.

Aug 11, 2014

1.0.2

Code cleanup

Aug 10, 2014

1.0.1

First version of Parallax

Aug 10, 2014