Magic Backgrounds
is a plugin for Concrete CMS that allows you to add a parallax effect to any background on your website. The parallax effect is an illusion of depth that is created when the background of a page moves slower than the foreground as the page is scrolled. This effect can give your website a more modern and attractive appearance.
The Magic Backgrounds plugin uses the jarallax library, which is one of the most popular libraries for creating parallax effects. The jarallax library is easy to use and offers many features that allow you to customize the parallax effect to your needs.
- Unzip this file in your site's packages/ directory.
- Login to your site as an administrator.
- Find the "Extend concrete5" page in your dashboard.
- Find this package in the list of packages awaiting installation.
- Click the "install" button.
1. Choose background type:
- image
- video
2. If you chose "image":
- select an image by clicking the "Choose image" button
- adjust display method (img tag, picture tag, CSS background)
- adjust "Background size" to choose how the background image is displayed
- adjust image position
- select repeat image option
- customize overlay color
3. Parallax Settings
- choose parallax type (scroll, scale, opacity, scroll-opacity, scale-opacity)
- set parallax speed
- set mobile devices parallax disable option
- Set parallax container height
4. Insert HTML code to be displayed on the image
5. If you chose video:
- add YouTube/Vimeo video URL
- select the Magic Backgrounds / Parallax Code Generator tab in Dashboard
- In the "Select the background display method:" field, select "To be added to "Custom Element Attribute""
- Set other parameters.
- Generate the code by clicking the "Generate" button.
On the page where you want to add a parallax effect:
- click "Edit This Page" in the upper right corner (Pencil icon).
- click left mouse button the block, area or container, to which you want to add the animation
- from the pull-down menu select "Design & Custom Template" or "Edit Area Design" or "Edit Container Design"
- click "Cog" icon
- paste the previously obtained code into the field under the label "Custom Element Attribute"
- click "Save"
For more information, please visit - Concrete5 Design.
