Emotion Parallax Text Slider Banner

Emotion Parallax Text Slider Banner

by Zenit Design (4) Ratings 363 Downloads
Recommended by Shopware
Billing options:
To use the wish list, you must accept the necessary cookies. Accept cookies
Can be used in:
Not available
This extension cannot be used in a Shopware Cloud shop.
Cloud
Self-hosted
Shopware 6 status
There will be no Shopware 6 successor for this app.
Support
This Extension Partner responds very quickly to support requests
Details
  • zenit56559768828m
  • Zenit Design
  • 2.2.1
  • 3 May 2022
  • de_DE en_GB
  • 5.3.0 – 5.3.7
    5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.10
    5.7.0 – 5.7.19
Emotion Parallax Text Slider Banner Emotion Element With Parallax Banner you can add... more

Product information

Highlights

  • Emotion element → easy to use
  • incl. installable template → including shopping world preset of the demo
  • All shopping worlds modes are supported → Fluid, resize & row-based mode
  • Real Parallax Effect → reverse scrolling, parallax scrolling
  • Text Slider → Text on image as an animated slider

Features

  • Up to 3 Image-Levels
  • Speed and direction for every level
  • Vertical Offset for every level
  • many Settings

Description

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

Read, write and discuss reviews... more

Customer reviews

Average customer rating from 4 reviews:

Total
Functionality
Usability
Documentation
Support

Nur zu empfehlen - Support spitze

13 Feb 2023

Ich habe absolut keine Kritikpunkte, außer dass es nicht noch mehr Erweiterungen gibt. :)

Total
Functionality
Usability
Documentation
Support

Mehr geht nicht - P E R F E K T E R S E R V I C E *****

8 Dec 2020

Man denkt oft "Mehr geht nicht"... Ich wurde so eben eines besseren belehrt. Eine Fehlersuche und eine Problembehebung so wie die Ankündigung eine Aktualisierung im Plugin vorzunehmen ist das eine. Die Umsetzung innerhalb von 3 Stunden vorzunehmen, so daß nicht nur das Problem behoben ist und das Plugin eine zusätzliche Aufwertung von 100% erhält, das habe ich so noch nie erlebt. Wir betreiben 3 eigenständige Shops mit bis zu 150 Pluginlizenzen pro Shop und haben daher sehr viel Kontakt mit Herstellern und haben schon so manches erlebt. Dieses Team aber spricht die Sprache der Kunden! Von uns gibt es daher 5 ***** - Danke!

Total
Functionality
Usability
Documentation
Support

Wow-Effekt

6 Apr 2019

Danke für das tolle Plugin. Hat mir sehr dabei geholfen eine Startseite mit Wow-Effekt zu designen.

Total
Functionality
Usability
Documentation
Support

Cooler Effekt!

7 Mar 2018

Der Parallax Banner sieht echt schick aus und lässt sich auch sehr gut und einfach erstellen. Man kann einfache Parallax Banner, aber auch vielschichtigere Banner erstellen auf denen sich mehrere Ebenen auf einmal verschieben.

Total
Functionality
Usability
Documentation
Support

Configuration manual

Installation of the plugin

Basically, themes are installed the same way as other plugins from the Community Store. Only very few steps are necessary for this:

  1. Open the plugin manager under Configuration > Plugin Manager
  2. Under My Purchases the plugin will appear
  3. Install and enable the plugin


— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Hint

We recommend reloading the backend after installation.



— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Documentation

https://docs-sw5-parallaxbanner.zenit.design



— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Get started

Start with the template to get an easier introduction to the Parallax effect. The effect can best be visualized in the "fluid" mode of shopping worlds.



— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Usage of emotion element

Navigate in the backend under Marketing > Shopping Worlds. Create a new shopping world here or use an existing shopping world. When editing the shopping worlds, the installed emotion element is now available to you in the "Elements" tab.



— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Theme compiling

In some cases, there are settings in the plugin configuration, which will be updated by recompiling the theme. This is necessary so that the LESS files of the plugin are summarized with the theme.



— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

› We will help you!
quickly and free of charge

FAQ & Support: www.zenit.design
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Changelog

Version 2.2.1

  • Bugfix: Solves a display problem when using resize mode.

Version 2.2.0

  • Feature: New configuration-field to set the text slider font size;
  • Optimization: Improved calculation of the offset top value of the parallax element;
  • Optimization: Update of the bxSlider to version 4.2.14;
  • Optimization: Improvement of the text slider for shopping worlds in resize mode;

Version 2.1.0

  • Shopware 5.7 compatibility

Version 2.0.0

  • Optimization: Translatability of settings has been added

Version 1.4.1

  • Improved initialization of the JavaScript when displaying multiple and hidden shopping worlds, as load order is critical when loading with Ajax.;

Version 1.4.0

  • Optimization: Improvement of the initialization of the Javascripts if several shopping worlds exist, because the loading order is important when loading with Ajax.;
  • Optimization: Adaptation of the acceleration / positioning by incorporating the shopping world offset upwards. As a result, preceding shopping worlds no longer have to be considered in the offset of the elements.;
  • Attention: After the update it may be necessary to adjust the offset-Y configuration of the images in the shopping world elements. The offset value now refers to the area of the shopping world and not the entire page. This basically makes it easier to set the offset value.;

Version 1.3.0

  • Compatibility: Adjustments for the function "Deactivating recharge of shopping worlds" - ajaxEmotionLoading - SW 5.6;

Version 1.2.3

  • Optimization: Optimizes the subscribe to the loaded shopping worlds (plugin/swEmotionLoader/onLoadEmotionFinished);

Version 1.2.2

  • Optimization: Optimizes the initial loading of the slider for additional external fonts.

Version 1.2.1

  • Bugfix: background-attachment: fixed for mobile devices (iOS, Android) changed to background-attachment: scroll, because of issues with iOS, preventing background-attachment: fixed from being used with background-size: cover. More information at: https://caniuse.com/#search=background-attachment

Version 1.2.0

  • Feature: Shopware 5.5 compatibility
  • Feature: This plugin is now open source and dispenses with encryption using the encoding software ionCube.
  • Feature: Compatibility with PHP version > 7.0.0 by not using ionCube encryption.

Version 1.1.0

  • Adjustment of compatibility for SW 5.5
  • ComponentHandler added

Version 1.0.1

  • Javascript Plugin for Parallax Effect for Smartphone Portrait initialized

Version 1.0.0

Initial Release - Erstveröffentlichung

About the Extension Partner

Zenit Design Zenit Design Shopware Premium Extension Partner Shopware Premium Extension Partner 47 Extensions 5 Ø Rating
Current version:

Version:

€ 5.50* /month
Cancelable monthly

Free trial month

This app starts with a free trial month. The rent can be canceled at any time on a monthly basis or will be automatically renewed at the indicated prices.

Updates and support

To use the wish list, you must accept the necessary cookies. Accept cookies

Recently viewed