PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • The parallax effect in the window editor
  • Overview
  • Defining the parallax effect in the window editor
  • Defining the parallax by programming
  • The parallax effect in the page editor
  • Overview
  • Defining the parallax effect in the page editor
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
The "Parallax" effects are used to scroll the elements found in the interface at different speeds when the scrollbar is used.
You have the ability to define:
  • a parallax of controls: In a window or in a page, the parallax animations are used to configure the speed at which the control is moved or reduced in relation to the scrollbar move in the window (or in the page).
  • a parallax of background image: In a page, a parallax animation can be used on the background images. When the user is using the scrollbar, the background image will use a specific move speed in relation to the scrollbar move in the page.
The Parallax effects are available:
Versions 22 and later
WEBDEV - Server codeWEBDEV - Browser code This feature is now available for the WEBDEV sites.
New in version 22
WEBDEV - Server codeWEBDEV - Browser code This feature is now available for the WEBDEV sites.
WEBDEV - Server codeWEBDEV - Browser code This feature is now available for the WEBDEV sites.
WINDEVWINDEV Mobile
The parallax effect in the window editor

Overview

The window editor proposes a parallax effect of control.
Some examples:
  • If no parallax is defined, the controls and the window scrollbar move at the same speed.
  • If the control is fixed, the control will not move even if the scrollbar is used.
  • The parallax is used to perform specific effects, for example by making the move speed of the control (or its reduction rate) change in relation to the move speed of the window scrollbar.

Defining the parallax effect in the window editor

To define the parallax effect of a control:
  1. Display the description window of control.
  2. In the "GUI" tab, expand the "Parallax" option.
  3. Choose the requested option:
    • No parallax: The control moves in height according to the scrollbar move in the window.
    • Material Design effect without reduction: The control moves in height proportionally to the move scrollbar in the window. In this case, the move speed is set to 50% and the reduction speed is set to 0%.
    • Material Design effect with reduction: The control is reduced in height proportionally to the scrollbar move in the window. In this case, the move speed is set to 50% and the reduction speed is set to 50%.
      For an Image control, the image follows the display mode.
      • If the image is stretched, it will be distorted to be entirely displayed in the height of the control.
      • If the image is homothetic centered, it will be reduced proportionally to the control height.
    • Fixed control: The control is fixed. It does not move in the window. It is always visible during the scrollbar move in the window. In this case, the move speed is set to 0% and the reduction speed is set to 100%.
    • Customize the effect: You have the ability to specify the Y parallax rate (move speed of control) and the Height parallax rate (reduction speed of control).
Note: The parallax effect is available for all types of controls.

Defining the parallax by programming

The following properties are used to define the parallax of a control by programming:
Versions 21 and later
ParallaxRateHeight
New in version 21
ParallaxRateHeight
ParallaxRateHeight
..ParallaxRateHeight is used to find out and specify the speed at which a control is reduced when the scrollbar found in the window, the internal window or the page moves.
Versions 21 and later
ParallaxRateY
New in version 21
ParallaxRateY
ParallaxRateY
..ParallaxRateY is used to find out and specify the speed at which a control moves when the scrollbar found in the window, the internal window or the page moves.
WEBDEV - Server codeWEBDEV - Browser code
The parallax effect in the page editor

Overview

The page editor proposes a parallax effect of controls and a parallax effect of background image.
These parallax effects are available for the following controls:
  • Cell.
  • Layout area.
  • Rich text area.
  • "Control template" control.

Defining the parallax effect in the page editor

To define the parallax effect of a control:
  1. Display the description window of control.
  2. In the "Style" tab, select the "Effects" element.
  3. To add a parallax effect of control:
    • Click the "Add an effect" button and select "Parallax".
    • The effect is added to the style. Click the "Details" button to configure the effect.
    • In the window that is displayed, choose the requested option:
      Configuring the parallax effect of control
      • Effect triggered by programming. In this case:
        • the Y and height parallax rates are set to zero. The effect is configured by the properties:
          Versions 21 and later
          ParallaxRateHeight
          New in version 21
          ParallaxRateHeight
          ParallaxRateHeight
          ..ParallaxRateHeight is used to find out and specify the speed at which a control is reduced when the scrollbar found in the window, the internal window or the page moves.
          Versions 21 and later
          ParallaxRateY
          New in version 21
          ParallaxRateY
          ParallaxRateY
          ..ParallaxRateY is used to find out and specify the speed at which a control moves when the scrollbar found in the window, the internal window or the page moves.
      • Material Design effect without reduction: The control moves in height proportionally to the scrollbar move in the page. In this case, the move speed is set to 50% and the reduction speed is set to 0%.
      • Material Design effect with reduction: The control is reduced in height proportionally to the scrollbar move in the page. In this case, the move speed is set to 50% and the reduction speed is set to 50%.
      • Fixed control: The control is fixed. It does not move in the page. It is always visible during the scrollbar move in the page. In this case, the move speed is set to 0% and the reduction speed is set to 100%.
      • Customize the effect: You have the ability to specify the Y parallax rate (move speed of control) and the Height parallax rate (reduction speed of control).
    • Validate.
  4. To add a parallax effect of background image:
    • Click the "Add an effect" button and select "Parallax on the background image".
    • The effect is added to the style. Click the "Details" button to configure the effect.
      Configuring the parallax effect of background image
    • In the window that is displayed, choose the requested option:
      • Fixed background in the browser: The image is fixed. It does not move in the window. It is always visible during the scrollbar move in the window. It is the container control that is moved along with the page. The image section displayed in the background changes according to the size of the container control. In this case, the move speed is set to 0% and the reduction speed is set to 100%.
      • Customize the effect: You have the ability to specify the Y parallax rate (move speed of control). In this case, the background image moves more or less faster according to the move of the associated control.
    • Validate.
Notes:
  • The parallax effect on background image can be viewed in the page editor (WYSIWYG). All you have to do is move the vertical scrollbar.
  • If the background image used is not big enough to get the expected effect, the image is enlarged in homothetic way.
  • The parallax effect on background image cannot be modified by programming.
  • Regardless of the options defined for the parallax effect of control, it can be configured by programming with the properties:
    Versions 21 and later
    ParallaxRateHeight
    New in version 21
    ParallaxRateHeight
    ParallaxRateHeight
    ..ParallaxRateHeight is used to find out and specify the speed at which a control is reduced when the scrollbar found in the window, the internal window or the page moves.
    Versions 21 and later
    ParallaxRateY
    New in version 21
    ParallaxRateY
    ParallaxRateY
    ..ParallaxRateY is used to find out and specify the speed at which a control moves when the scrollbar found in the window, the internal window or the page moves.
Minimum required version
  • Version 21
This page is also available for…
Comments
Click [Add] to post a comment