Emotion Parallax Text Slider Banner
Description
Highlights
Features
About the Extension
Emotion Parallax Text Slider Banner
Emotion Element
With Parallax Banner you can add impressive Parallax Effect to your shopping world. In the parallax effect, various design objects are positioned at different levels. Scrolling down moves the layers in different speeds and toward each other. This creates an effect of space and movement. You can set up to three image layers and a text layer .
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
- including shopping world preset of the demo
- Real Parallax Effect
- Up to 3 Image-Levels
- Speed and direction for every level
- Vertical Offset for every level
- Text Slider
Parallax shift when scrolling
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
✓ 3 Levels ✓ Real Parallax Effect ✓ Many configurations ✓ Emotion Preset included
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Parallax Banner
The Parallax effect is one of the most popular effects in web design. Technically, this effect causes the background image to move at a slower speed compared to the foreground image when scrolling down the page. This effect creates a sense of depth and dynamism.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Understanding Parallax
With the Parallax effect, the image is fixed in a fixed position in the browser window, giving it the appearance that the content or images in the layers above it are pushed over the background image.(background-attachment: fixed) is therefore the basis for the parallax effect.
In addition, the fixed images and levels are moved up or down using Javascript when scrolling (configuration: speed) . So the pictures can be pushed past each other in different directions, like the shoes in our demo.
background-attachment: fixed is relative to the viewport. This means that the size of the image depends on the browser window and not on the size of the shopping world element in the grid.
- The effect is particularly suitable for full-scale shopping worlds.
- You can create multi-layered, but also simpler banner elements with just one image. There is no compulsion to use multiple images and layers.
- Shopping Worlds mode Fluid works best for this effect.
- The shopping world mode Resize does not allow fixed positioning of images for technical reasons. Therefore, the size of the images does not refer to the viewport of the browser, but to the size of the shopping world element.
Interesting: Smaller and side-by-side parallax banners are possible. The individual images can be accelerated or slowed down while scrolling through the configuration Speed while scrolling. - The images above image 1 (background image) should be images with a transparent background - file formats would be * .png or * .gif
Helpful:Use the shopping world template to create a banner.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Documentation
https://docs-sw5-parallaxbanner.zenit.design— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Support & Help
Found bugs or suggestions for improvement? Just open a Support Ticket in our Help Forum at www.zenit.design
Details
- Available: English, German
- Latest update: 3 May 2022
- Publication date: 18 January 2018
- Version: 2.2.1
- Category: Shopping Experiences
Resources
Reviews (4)
Nur zu empfehlen - Support spitze
Mehr geht nicht - P E R F E K T E R S E R V I C E *****
Wow-Effekt
Cooler Effekt!
About the Extension Partner
Zenit Design
Partner Status
-
Shopware
Premium Extension Partner
Details
- Ø-Rating: 5
- Partner since: 2015
- Extensions: 48
Support
- Based in: Germany
- Speaks: German, English
- Response time: Very quickly