From Uncode 2.5.0, it's possible to take advantage of a new type of animation for the Heading module, named Marquee. The Marquee option is designed to display custom headings that slide from left to right or vice versa, with an automatic or triggered on scroll animation. Marquee is an excellent solution for conveying an important message or vitalize a web page. It can be used to display a successful commercial message or for creative solutions.
Please find below some examples of Marquee on our demo site:
The Marquee option can be activated from the Heading module → Animation tab, and there are two different types of animation presets:
- Marquee Auto: automatic and independent from the interaction with the page;
- Marquee Scroll: activated and progressive with the scroll of the page.
You can choose the direction for each of these modes, whether from right to left or vice versa. You can also enable the Marquee Edge To Edge option to have text with an infinite repeating effect.
Marquee options
Starting with version 2.9.0, Uncode has introduced several enhancements to the Marquee feature. These updates now allow for the inclusion of basic HTML tags within the Heading text, providing enhanced customization options. This improvement not only enhances the visual appeal but also permits the integration of clickable links, further enriching the user's interactive experience.
Among the newly added options, please note:
- Marquee Space: This option allows you to adjust the spacing between repetitions;
- Marquee Speed: You can set new speed values for the 'Marquee Auto' feature;
- Marquee Hover Slow Down: This feature reduces the speed of the Marquee when hovering over an element. It is especially useful when creating links within the Marquee that need to be clicked on.
- Marquee Trigger: This setting defines the starting point of the Marquee. It is useful when the Marquee is not set to 'Edge To Edge' and you aim to synchronize Marquees with the page scroll.
- Marquee Freezed: If you want an edge-to-edge Marquee that remains stationary without any movement effect, you can apply the special class
marquee-freezed
to the Heading module.
Marquee of images
Please note that by integrating the 'Headings with Inline Images' options with the Marquee animation, it's possible to create image-based Marquees, screenshot . These can include Marquees of logos with links that scroll automatically, offering a dynamic alternative to the traditional Carousel created with the Media Gallery.
Notes
- The Marquee Scroll at the moment it comes activated needs to be positioned at the center of the viewport. Therefore, if the Marquee is inserted in the header of a page or in a section above the folder, it is advised to apply an animation to the Column container to hide the initial moment when the effect is created and positioned by the JavaScript engine.
- The Marquee supports only one line, it is impossible to create a Marquee heading with more text lines (no line breaks allowed).
Comments
0 comments
Article is closed for comments.