Efectos - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder

Efectos

Efectos
21 de julio de 2021
Oxigenados Tip del dia

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

VOLVER AL LISTADO COMPLETO