If you want to give zest to your store – this add-on is just a great find to you. Nowadays, Parallax is a web-trend. Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling or moving a mouse. Be sure that these eye-catching effects will impress your visitors. Now more than ever, parallax scrolling generates a superb user experience and gives your website a sleek and dazzling design.
'Parallax banners' add-on combines 3 add-ons:
- It adds Parallax effect while moving a mouse. This feature allows to create the object moving animation or the sense of 3D image.
- It adds asynchronous moving of the banner image while scrolling the browser window that looks very unusial.
- The add-on has ‘Full width wrapper’ that allows to stretch any banners (including standard slider) to the full width of the browser window.
The 'Parallax banners' add-on doesn’t change any CS-Cart core files or override any templates, and support further updates of the add-on. So, using our add-on you will not have any issues with the compatibility. Also the add-on supports touch devices.
A great variety of settings allows you to configure the final behavior of the Parallax effect.
Compatibility:
This add-on works correctly in Internet Explorer, Mozilla Firefox, Safari, Google Chrome and Opera latest browser versions.
The add-on is compatible with CS-Cart and Multi-Vendor 4.3.7 - 4.12.2 version.
Notes:
- One license of the add-on is valid for only one CS-Cart installation. In order to use the add-on on another CS-Cart installation, it is necessary to buy one more license.
- We do not send the source code of the add-on. After the purchase you get the initial package that needs to be activated to receive the full functionality of the add-on. You can find the installation instruction in the archive of the initial package.
- You understand and agree that if you face any issues with the add-on you are ready to provide us with temporary FTP access to your store in order to investigate and solve the issue.
Have an idea how to improve this product? Share it with us!
- Download the distribution package from your order page and extract it to temporary folder.
- Upload the installation package on the add-ons page and paste the license key.
- After these actions the add-on will be activated and download the executable files that are compatible with your CS-Cart version from our server.
How to stretch a banner to full width
- Go to Design -> Layouts and choose the ‘Full width’ wrapper setting of a banner block.
How to add Parallax scroll banner
- Download the necessary banners to Marketing -> Banners
- Go to Design -> Layouts
- Add a banners block to the necessary grid.
- Choose the 'Parallax' template for this block. Click ‘Settings’ near the drop-down menu of template option.
- In the appeared settings find the ‘Detect’ setting and choose 'Scroll'. If necessary, change other settings.
- On the ‘Content’ tab choose ‘uploaded layer(s) from #1’.
How to add Parallax mousemove banner
- Download the necessary layers to Marketing -> Banners
- Go to Design -> Layouts
- Add a banners block to the necessary grid.
How to change the direction of layer movement in Parallax mousemove banner, change speed or stop the movement of a definite layer
- Go to Marketing -> Banners -> choose and edit the necessary banner/layer.
- In order to change the speed of layer movement it is necessary to change the value of the 'Parallax layer sensetivity, %' setting.
- In order to change the direction of layer movement it is necessary to specify ‘negative value’ in the 'Parallax layer sensetivity, %' setting (e.g. '-100').
- In order to stop the layer movement it is necessary to specify ‘ zero value’ in the 'Parallax layer sensetivity, %' setting.
The add-on adds 'Parallax' template to the ‘Banners’ block. Almost all settings for the creation of Parallax effect are located at 'Parallax' template settings of this block.
Sensitivity axis X - coefficient that change the distance of movement in the X direction depending on mouse movement.
Sensitivity axis Y - coefficient that change the distance of movement in the Y direction depending on mouse movement or scroll.
Scope: Item - Parallax mousemove will react only on mouse movement over a banner.
Scope: Global - Parallax mousemove will react on mouse movement all over the browser window.
Fit layers to container width – if layers have bigger size then grid/block container of Parallax, the layers will be scaled in order to be completely located in it.
Detect – the main setting that is responsible for the action on which Parallax will react.
Link – banner should evoke users to click on it in order to lead to a landing page. You can use direct link or dispatch value in this field.
Coefficient for reducing scroll banner's height - Useful for Parallax scroll banner. Decrease the height of a container in order that users don’t see the banner edge while scrolling.
