JA Animation Module Installation Guide
JA Animation module lets you enable image animation on your Joomla! site, rich backend with advanced features for nice effects and easy configuration.
Step 1: Installation
You follow simple steps below:
1/ Install the module via Joomla Installer
2/ Assign module to the position as you want
3/ Enable the module
- Module Zip size is over 2 MB and the module will not install, until your PHP default upload setting ( 2MB ) is increased.
- In some cases, the animation in user browser may increase the user side CPU usage.
- Keep your module updated with the latest version
Then, the module is instantly available in your front-end. If you are new to this stuff, follow detailed guideline below:
----How to install Joomla module
Step 2: Configuration
From the back-end of your Joomla site (administration) select Extensions->Module Manger, then click on module title JA Animationto enter configuration panel:
- Module Class Suffix: A suffix to be applied to the css class of the module(table.moduletable), this allows individual module styling. If first of anim module needed set module class suffix = ''_jaanim''
- Select Animation Profile: Choose the animation profile you would like to show on the frontend. Each profile has optimized settings for best results.
You can clone and edit the animation profile as per your need. Select profile and click Clone to customize it. Any way the default settings for that specific profiles are always available as reference for you.
You can also delete profiles, however, there is no undo for this and you would need to reinstall the module or replace the default profile files in the ../modules/mod_jaanimation/profiles/
Image path and Dimesions:
- Image Url: Default image set can be found at ..modules/mod_jaanimation/assets/images/ choose one of them or add yours there
- Zindex: You can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Change this only if your animation image or tooltip hides behind other elements of your site.
- Width: Set width of image
- Height: Set height of image
- Direction: Choose direction for animation
- Move Type: choose animation movement pattern
- Radius: Radius (apply for move type = sine) @exm: radius = 30
- Preset Position: Preset position: array of many nodes (x,y)
- Delay: Step delay: delay time beetween of animating to a position
- Origin Pos: Origin Position (X:Y)
- Begin Pos: Begin Position (X:Y)
- End Pos: End Position (X:Y)
- Repeat: Choose how to Repeat the animation pattern.
- Speed: Moving speed in px/s.
If select Yes option
- Use Multi Frame Images: Yes/No option to use multi frame images. This will work only with multi-frame images such as flying Pumpkin which consists of over 45 frames, shown in rapid sucession to create the flying pumpkin effect
- Frame Size: while creating multi-frame images use fixed frame size. Enter the frame size value here.
- Frame Items: Number of frames in the Multi-frame image.
- Frame width: Width for each frame (when use multiple frame image )
- Frame Order: If the frames in your images are set vertical, then choose vertical. If your image frames are horizontal, choose horizontal here.
- Change Speed: Set frame speed in milliseconds
- Show description: Show tooltip on mouseover on the animated image.
- Tooltip offset : Tooltip offset (X:Y)
- Description Parameters: Limited HTML support
Screen and Image position settings:
- Set Module Position:
If set to absolute with the module position, the animated image would only be seen within the assigned module position and is in the focus of the user screen.
If set Absolute with the page: the animated image will be animated across the whole page as defined in the animation settings. Unlike above it will NOT be restricted to the module dimensions.
If set Absolute with User Screen: The animated object will auto scroll and stay in focus on user screen.
See how it works in demo site: