AYUDA EN LÍNEA
 WINDEV, WEBDEV Y WINDEV MOBILE
Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Editores / Editor de ventanas y páginas
  • Overview
  • The parallax effect in the window editor
  • Overview
  • Defining the parallax effect in the window editor
  • Defining the parallax programmatically
  • The parallax effect in the page editor
  • Overview
  • Defining the parallax effect in the page editor
WINDEV
WindowsLinuxJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac Catalyst
Otros
Procedimientos almacenados
Overview
"Parallax" effects make it possible to scroll the elements in the interface at different speeds.
You can define:
  • field parallax: In a window or page, parallax animations let you set the speed at which the field is moved and reduced in relation to the movement of the window (or page) scrollbar.
  • a background image parallax: In a page, it's possible to use a parallax animation on background images. When the scrollbar is used, the background image will move at a specific speed relative to the movement of the scrollbar.
The Parallax effects are available:
WINDEVWINDEV Mobile
The parallax effect in the window editor

Overview

The window editor proposes a parallax effect of control.
For example:
  • 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. Open the control description window.
  2. On the "UI" tab, expand the "Parallax" option.
  3. Choose the requested option:
    • No parallax: Field moves in height according to window scrollbar movement.
    • Material Design effect without reduction: Field moves in height proportionally to window scrollbar movement. In this case, the movement speed is set to 50% and the reduction speed is set to 0%.
    • Material effect Design with reduction: Field reduces in height proportionally to window scrollbar movement. 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 field is fixed. It does not move in the window. It is always visible when the scrollbar moves in the window. In this case, the move speed is set to 0% and the reduction speed is set to 100%.
    • Customize effect: Y parallax rate (field movement speed) and Height parallax rate (field reduction speed) can be entered.
Note: The parallax effect is available for all field types..

Defining the parallax programmatically

The following properties are used to define the parallax of a control through programming:
ParallaxRateHeightEl ParallaxRateHeight Property se utiliza para determinar y especificar a qué velocidad se reduce un control cuando se mueve la barra de desplazamiento de la ventana, ventana interna o Page.
ParallaxRateYEl ParallaxRateY Property se utiliza para determinar y especificar la velocidad a la que se mueve un control cuando se mueve la barra de desplazamiento de la ventana, ventana interna o Page.
WEBDEV - Código ServidorWEBDEV - Código Navegador
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. Open the control description window.
  2. On 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 through programming. In this case:
        • the Y and height parallax rates are set to zero. The effect is configured by the properties:
          ParallaxRateHeightEl ParallaxRateHeight Property se utiliza para determinar y especificar a qué velocidad se reduce un control cuando se mueve la barra de desplazamiento de la ventana, ventana interna o Page.
          ParallaxRateYEl ParallaxRateY Property se utiliza para determinar y especificar la velocidad a la que se mueve un control cuando se mueve la barra de desplazamiento de la ventana, ventana interna o Page.
      • Material Design effect without reduction: Field moves in height proportionally to page scrollbar movement. In this case, the movement speed is set to 50% and the reduction speed is set to 0%.
      • Material effect Design with reduction: The field reduces in height proportionally to the movement of the page scrollbar.. In this case, the move speed is set to 50% and the reduction speed is set to 50%.
      • Fixed control: The field is fixed. It does not move in the page. It is always visible when the scrollbar moves in the page. In this case, the move speed is set to 0% and the reduction speed is set to 100%.
      • Customize effect: Y parallax rate (field movement speed) and Height parallax rate (field reduction speed) can be entered.
    • 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 browser: Image is fixed. It does not move in the window. It is always visible when the scrollbar moves 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 effect: Enter Y parallax rate (field movement speed). In this case, the background image moves more or less faster according to the move of the associated control.
    • Validate.
Remarks:
  • 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 programmatically.
  • Regardless of the field parallax effect options chosen, it can be programmed using the:
    ParallaxRateHeightEl ParallaxRateHeight Property se utiliza para determinar y especificar a qué velocidad se reduce un control cuando se mueve la barra de desplazamiento de la ventana, ventana interna o Page.
    ParallaxRateYEl ParallaxRateY Property se utiliza para determinar y especificar la velocidad a la que se mueve un control cuando se mueve la barra de desplazamiento de la ventana, ventana interna o Page.
Ver también
Versión mínima requerida
  • Versión 21
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 30/09/2024

Señalar un error o enviar una sugerencia | Ayuda local