Controla la opacidad, las transiciones, las sombras, los filtros y mucho más con los ajustes dentro de Advanced -> Effects.
ANIMATE ON SCROLL
Oxygen permite configurar animaciones que se activan al desplazarse utilizando la biblioteca Animate on Scroll library.
Cada elemento puede tener su propia configuración de animación definida. Cualquier configuración definida a nivel de elemento default global animation settings, anulará la configuración global de animación por defecto, pero sólo para ese elemento. Para habilitar las animaciones en un elemento, selecciónalo y ve a Advanced -> Effects -> Animate on Scroll en el Panel de Propiedades, luego marque la casilla "Enable Animation" . Una vez seleccionada, podrá definir la configuración de la animación para ese elemento específico.
- Animation Type - Determina el tipo de animación que se utilizará, como voltear, deslizar o desvanecer. (flip, slide, o fade)
- Animation Duration - Determina el número de milisegundos en los que se produce la animación.
- Anchor Placement - Define la posición del elemento, en relación con la ventana gráfica, que debe activar la animación.
- Animation Easing - Define la curva de velocidad de la animación. Por ejemplo, la animación será más lenta al principio y al final y más rápida en el medio.
- Animation Trigger Offset - Define el desplazamiento del punto de activación de la animación (en relación con la posición de desplazamiento de la ventana gráfica) en px. Un valor positivo puede usarse para asegurar que todo el elemento esté en la ventana gráfica antes de que se active la animación, mientras que un valor negativo puede usarse para activar la animación antes de que el elemento entre en la ventana gráfica.
- Animation Delay -Determina el tiempo que transcurre entre la activación de la animación y el comienzo de la misma.
- Anchor - Permite activar la animación basándose en la posición de otro elemento. Inserte el ID del elemento en este campo para disparar la animación cuando la posición del elemento objetivo alcance la ubicación designada de Colocación de Anclaje. (Anchor Placement location).
- Animate Only Once - Por defecto, un elemento que sale de la ventana gráfica reinicia la animación y hace que se vuelva a activar cuando el elemento vuelve a entrar en la ventana gráfica. Puedes desactivar este comportamiento eligiendo "Yes."
OPACITY
Controla la transparencia del elemento. Especifica un valor entre 0 y 1. Un valor de 0 hace que el elemento sea completamente transparente. Un valor de 1 hace que el elemento sea completamente opaco.
Mix Blend Mode
Determina cómo el contenido de un elemento debe mezclarse con el contenido del elemento padre y el fondo del elemento.
Más información y ejemplos de los efectos del modo de mezcla (blend mode): https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.
TRANSITION
Crea transiciones graduales entre los valores de las propiedades CSS. Cuando el valor de una propiedad CSS cambie, en lugar de cambiar instantáneamente, hará una transición gradual al nuevo valor.
Transition Duration
Tiempo, en segundos, para que se produzca la transición.
Timing Function
La curva de aceleración de la transición.
Mas Información: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
CSS Property
Por defecto, todos. De lo contrario, debes especificar el nombre de la propiedad CSS que será objeto de la transición.
Delay
Cuánto tiempo, en segundos, debe pasar antes de que se aplique la transición.
BOX SHADOW
Inset
Muestra la sombra dentro del elemento, en lugar de fuera del elemento.
Color
Establece el color de la sombra.
Horizontal Offset
Cuánto se desplaza la sombra horizontalmente.
Vertical Offset
La distancia a la que se desplaza la sombra verticalmente.
Blur
Cuánto desenfoque aplicar a la sombra.
Spread
Cuánto ampliar la sombra desde su tamaño inicial, que es el tamaño del elemento.
Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
TEXT SHADOW
Color
Establece el color de la sombra.
Horizontal Offset
Establece la distancia horizontal de la sombra del texto con respecto al texto original.
Vertical Offset
Establece la distancia vertical de la sombra del texto con respecto al texto original.
Blur
La cantidad de desenfoque que se aplicará a la sombra.
Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
FILTER
- blur - Desenfoca el elemento en el número de píxeles dado.
- brightness - Ajusta el brillo del elemento utilizando un valor porcentual.
- contrast - Aumenta o disminuye el contraste de los diferentes colores del elemento.
- grayscale - Ajusta la escala de grises del elemento. El valor más alto es el blanco y negro.
- hue-rotate - Cambia el matiz de los colores del elemento. Valores de 0 a 360°.
- invert - Invierte los colores del elemento. 0% para el original, 100% para la inversión completa.
- saturate - Ajusta la saturación del color del elemento.
- sepia - Ajusta los tonos sepia del elemento.
Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
TRANSFORM
- skew - Inclina el elemento horizontalmente (Skew x) o verticalmente (Skew Y).
- translate - Mueve el elemento en el eje X, Y o Z.
- rotate - Rota el elemento en los grados especificados.
- rotateX - Rota el elemento en el eje X en los grados especificados.
- rotateY - Rota el elemento en el eje Y en los grados especificados.
- perspective - Afecta a las transformaciones 3D de los elementos descendientes, permitiendo que tengan una perspectiva de profundidad consistente.
- rotate3d - Permite especificar un punto en el espacio 3D alrededor del cual girar el elemento.
- scale - Escala el elemento según su tamaño original. Por ejemplo, 2 es 2 veces el tamaño original del elemento, mientras que 0,5 es la mitad del tamaño original del elemento.
Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Última modificación: 20 de junio de 2020