Content area

Parallax

The parallax effect is an interactive effect in web design. Different design objects are positioned in front of each other on different levels. The objects are then moved towards each other at different speeds, simulating spatiality or movement.


 

This is a parallax

Parallax

1. Open the elemnt "Parallax"

  1. Insert a new column on the Website (Here you can see how. Chosse the settings zentriert mit fixer Breite (Container))
  2. Click on "Add Content"
  3. Add the element Parallax (by clicking on the button "Parallax")

 

2. The Parallax

In the menu bar you will find all the functions

2.1 Picture

In the Image section, you can select the image that you want to reproduce as a parallax effect.
If you press the plus sign, the picture selection opens. You can select an existing image or upload a new one.

Same procedure as for the Media Picker.

 

 

2.2 Title, Body

If you wish, you can insert a title and a text, although this is rather rarely used

 

If you wish, you can insert a title

If you wish, you can insert a text

 

2.4 Design settings

In addition, you can also integrate YouTube videos directly via the Rich Text Editor by copying the URL of the desired video and pasting it into the field of the embed function. This has the advantage that the video is streamed on your website with the YouTube player and thus the loading time of your website is not extended by a heavy video.

  1. Big Parallax: The Parallax gets shown in a larger way
  2. Fullheight Parallax: The Parallax gets shown in a much larger way
  3. If you don't choose any picture you can display a difrent color for your Parallax
  4. Here you can decide how the image moves when scrolling (we recommend that you leave this area empty. This way you already have the ideal setting)
  5. Here you can decide how fast the image moves when scrolling (we recommend that you leave this area empty. This way you already have the ideal setting)
  6. Here you can decide if you want to switch off the parallax effect for mobile devices. We recommend that you do not activate this button.

Weitere Artikel

Content area

Footer

This guide explains how to access and edit the footer.

Read more
Content area

Card

Here you will learn something about the function and handling of the "Card" element

Read more
Content area

Basic functions

In this instruction we will explain how to create, delete, move, copy, sort and more pages and subpages in your Umbraco.

Read more