Recommended Extensions close

aikon Support Center

Technical Support

Our technical support team is ready to help you with any problems you may have.  Submit a support ticket and we'll help you ASAP.

SUBMIT A SUPPORT TICKET

30 DAY GUARANTEED REFUND

Sun - Thu: 9am - 8pm
Logo Img

Documentation aikon Easy Parallax

Overview

aikon Easy Parallax ('Parallax' henceforth) allows you to display a stylish and beautiful parallax effect which includes both customizable text and a background image. The parallax becomes fully visible as you (and/or your users) scroll down your webpage. It can move in the same or different speed as the rest of the webpage. Newly incorporated features allow you to transcend the limitation of an otherwise normal HTML document, and setting display dimensions in a much more flexible and relevant way then just % or PX.

Installation (Module)

This is a standard Joomla! Module. To install it you will need to log into your admin interface and select the Extension Manager under the 'Extensions' tab in your top menu (assuming you are using a standard admin interface). Once you're inside, click on the 'Upload Package File' tab (it may already be selected for you), and drag the packaged zip file into the 'Browse' button, or click on the 'Browse' button and select it. Finally, click on the 'Upload & Install' button and you're ready to go.

install

The module will now be available from the Module Manager found under the 'Extensions' tab in the top menu of the admin interface. An initial module will be created for you, and you can create additional modules by clicking on the 'New' button. Select the modules you have already made in order to configure them. Don't forget to publish them in the correct positioning and on the right pages.

select

Modules can also be included inside an article. If you'd like to do that, here is some info directly from the Joomla! Documentation portal: http://docs.joomla.org/How_do_you_put_a_module_inside_an_article%3F.

Basic Settings – Configuring Your Very First aikon Easy Parallax

After you have installed and published the module it's time to add to it some content. Enter the module's configuration settings from the Module Manager.

Heads up: Parallax requires jQuery to function. If you are encountering any problems, please make sure the module is published correctly, and then try switching on 'Load jQuery' (click on 'Yes'). This will make the extension load its own jQuery.

We strongly recommend you keep 'Leave Smooth Scroll' on. This will load a short script that forces Google Chrome to scroll smoother, thus allowing your Chrome users to enjoy the parallax effect to its fullest.

Next, it is best if you pay attention to all the fields under 'Parallax Settings', although the default settings may very well suite you.

Firstly, you need to select a background image. We strongly recommend you pick a large enough image, especially if you decide to set a high parallax ratio (in which case the image must be larger than the parallax display).

You can select the background mode – Cover is recommended but you might want to take a look at the other options if it does not behave like you expect. You can then zoom in on the image to make sure it covers everything, if it does not. This is useful for negative parallax ratio (which is explained further down this document).

settings

Next, you'll need to select a type of display height. You can either choose a fixed height (in PX) by adding the required value in the field that appears before you, or you can use our new and awesome feature - 'Relative Size'. If you choose this option, a field will appear for you to add a specific size in. This will give the parallax display a specific percentage (according to height), regardless of the use of advanced CSS support found in your users' browsers. For example, by entering 50% in the field, you will receive a parallax that uses exactly 50% of your users' view point. And, lastly, you can make the parallax height to auto-fit your content.

If you have a lot of content, it is recommended that you turn on Auto resizing by content. This will make the module try to fit your height requirement, but, if your content is too large, it will stretch further, so it does not spill over.

In response to numerous requests from our customers, we have recently added a new feature, 'Force-Full Width'. Typically, the parallax display takes the size of its container. But, what if your template doesn't have a full-width slot to place the module in? Well, from now on, that is no longer a problem. Just click on the 'Force-Full Width' button and the parallax will have a full-width display that does not break your layout in anyway.

Next, you'll need to select your parallax's ratio. The higher the ratio, the faster the image scrolling will be in relation to the rest of the page. Avoid using 100 unless you don't want your display to look like a parallax. You can use this to make an entire one-page website from our module, with the 'solid' sections using a parallax with 100% ratio.

You can then select the horizontal alignment of the image. You may want to manipulate this as it will make different part of the image visible.

heightstuff

Finally, in the 'Add Float' field you can find helpful advice for dealing with any layout problems you might encounter.

Adding Content to Your Display

In the 'Basic' tab (under 'Content Settings') you can add content to your parallax display by using the content editor available inside.

The 'Content Color' and 'Content Container Size' fields control their aptly name functions. The 'Content Container' is always centered. If you want the text on a specific side (left/right), just align the text you add to the editor.

By turning on 'Enable Shader' on you will reveal the shader's settings. Inside you can set its direction and opacity. We strongly recommend you play around with it until you find the perfect match. It's an awesome feature – we're absolutly sure you'll love it!

advanced

Finally, you can choose whether or not to display the content as it is or to let Joomla! process it first. This will allow you to add additional modules into the display. Just turn 'Prepare Content' on (by swiping on 'Yes'). Please note that the name 'Prepare Content' is the name of the internal Joomla! event which triggers all content plugins to work on the content.

If you can't see your new module, we strongly recommend you follow our troubleshooting tips below.

Mobile settings

Added after some users have requested it – the mobile tab lets you override key features in a resolution of your choice. This allows you to server different settings for lower resolutions.
If you can't see your new module, we strongly recommend you follow our troubleshooting tips below.

You can chose if you want the parallax effect on mobile at all, or if you rather have a native simpler implementation. This will have better performance, but will not look the same.

You can select at which resolution these settings can take effect. Default is 980px.

You can then override the fallowing settings only from that resolution and below:

- mobile image
- mobile image sizing mode
- mobile background zoom
- mobile parallax ratio

Lastly, you can activate automatic font resizing. This will reveal a field where you select the resize ratio. This will scale down your text on mobile displays. This way, even if you have a lot of custom styled content, it will scale automatically on mobile and no further coding will be required.

Advanced settings

You can select a different Parallax engine if the default has performance issue on your site. You can select either the default Aikon engine, or Stellar JS. Stellar JS does not support 100% of the features, so only turn it on if you have an issue with performance.

Troubleshooting

The module may not work for various reasons. These can all be easily resolved.
The most common reasons are improper configuration of general module information or parameters, and/or a jQuery issue.

You should therefore make sure your module's general configurations are valid and fit your intention:

  • Make sure the module has been properly published (check its status in the Module Manager).
  • Double-check that the module is positioned correctly.
  • Make sure the module has been published on the right page(s).
  • Make sure you have the proper editing permissions (if you're using a Joomla! Access Control component).

Make sure the module's parameters are valid: aikon form requires correct settings. Check out the rest of the document to make sure everything has been set correctly.

Solving jQuery Issues:

Most extensions require a jQuery plugin. Many of them include added features that enable users to leverage jQuery to the fullest. The only problem is that users often upload jQuery themselves, and by doing so they overwrite the extended version of jQuery, thus preventing the extension from working properly.

The best solution is to make sure only one instance of jQuery is loaded. One way of doing that is to manually check that jQuery is NOT loaded via the form template but by Joomla! only. We also suggest you download a free plugin which can help you handle this issue. It's called jQuery Easy, and it's available here: http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

jquery easy

Pease notice: we are NOT responsible for any damage that may be caused by using the jQuery Easy plugin. The plugin needs to installed, enabled and configured manually.
The recommended settings for this plugin are: under the 'Basic Site Options' select 'Enable jQuery field jQuery' or 'JQuery+jQuery UI (select one of them, according to your specific needs). Under version select 1.8 and you're ready to go!

Want Weekly Special Offers & Deals?

Subscribe to our newsletter, and receive special offers and deals on a weekly basis!
close popup

UP TO 50% OFF
LIMITED TIME ONLY

Check out our most recent deal, don’t miss out!

  • popup
  • menu
  • parallax
  • forms
  • youtube
  • logo

SEE SPECIAL OFFERS