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

Basics

Access to and structure of Umbraco

In this guide, we explain how to access your Umbraco and show you the structure of your Umbraco.

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
Content area

Slider Half/Full-Page

In this instruction we explain the function and the handling of the elements "Slider Fullpage" and "Slider Halfpage". The only difference between these two is their size.

Read more