Emotion Parallax Text Slider Banner

Emotion Parallax Text Slider Banner

Source Available
259 Downloads
Responsive
Available bundles
Emotion Bundle
Google Schriften / Fonts Changer
Einkaufswelt Parallax Text Slider Banner
Einkaufswelt Parallax Banner
€ 74.70 * Instead of € 103.00 *
Shopware 6: Plugin status Shopware 6 Signet
This plugin will not be developed for Shopware 6
This manufacturer responds very quickly to support requests
    zenit56559768828
  • 1.4.1
  • 28 Oct 2019
  • de_DE en_GB
  • from Zenit Design
  • 5.3.0 – 5.3.7
    5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.2

Bundles

No bundles available for the selected variant. Please select another variant for bundle offers.
Emotion Bundle
Bundle for your Emotion Shopping World
Bundle for your Emotion Shopping World read more »
Close window

Emotion Bundle

Bundle for your Emotion Shopping World
Google Schriften / Fonts Changer
Einkaufswelt Parallax Text Slider Banner
Einkaufswelt Parallax Banner
€ 74.70 * Instead of € 103.00 *
Open bundle
An error occurred while saving the bundle configuration.
Google  Fonts Changer
1x Google Fonts Changer
Zenit Design   € 19.00 *
Emotion Parallax Text Slider Banner
1x Emotion Parallax Text Slider Banner
Zenit Design   € 45.00 *
Emotion Parallax Banner
1x Emotion Parallax Banner
Zenit Design   € 39.00 *
Emotion Parallax Text Slider Banner Emotion Element With Parallax Banner you can add... more

Product information

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://zenitdesign.freshdesk.com/support/solutions/folders/9000183429/

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

Support & Help

Found bugs or suggestions for improvement? Just open a Support Ticket in our Help Forum at www.zenit.design

Show full description

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
Read, write and discuss reviews... more

Customer reviews

Average customer rating from 2 reviews:

Total (2)
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

Installation 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://zenitdesign.freshdesk.com/support/solutions/folders/9000183429



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

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 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 manufacturer

Zenit Design Zenit Design 30 Extensions
1 7 4
5 Ø Rating

Recently viewed