Egyéni animáció az interakciókhoz

Az interakciókhoz a Bricks beépített animációkat kínál. Ha saját mozgásra van szükséged, két lépésben bővítheted a listát: felveszed az új animációt a választólistába, majd megírod hozzá a CSS-t.

A feladathoz egy kis PHP-kód és CSS kell. A PHP-kódot a gyermektéma functions.php fájljába vagy egy saját bővítménybe tedd, a Bricks szülőtémát ne módosítsd, mert a frissítés felülírja.

1. lépés: az új animáció felvétele a választólistába

A bricks/setup/control_options szűrővel add hozzá az új animációt az animationTypes tömbhöz. A kulcsnak egyedinek kell lennie.

add_filter( 'bricks/setup/control_options', function( $options ) {
  // Az animáció kulcsa (myAnim1) egyedi legyen.
  $options['animationTypes']['myAnim1'] = esc_html__( 'Az én animációm 1', 'bricks' );
  return $options;
}, 10 );

Ezután az új animáció megjelenik az interakció Animáció legördülő listájában.

2. lépés: az animáció CSS-e

Amikor az interakció lefut, a Bricks egy osztályt rendel az elemhez az animáció kulcsából, brx-animate- előtaggal (a példában brx-animate-myAnim1).

Hozz létre egy CSS-osztályt, amely beállítja az animáció nevét, és add meg hozzá a kulcskockákat (@keyframes). A CSS-t a Bricks → Beállítások → Egyéni kód lap Egyedi CSS mezőjébe írhatod.

.brx-animate-myAnim1 {
  animation-name: my-anim-1;
}

@keyframes my-anim-1 {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateY(-250px);
  }
  38% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0);
  }
  55% {
    animation-timing-function: ease-in;
    transform: translateY(-65px);
  }
  72% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
  81% {
    animation-timing-function: ease-in;
    transform: translateY(-28px);
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
  95% {
    animation-timing-function: ease-in;
    transform: translateY(-8px);
  }
  100% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
}

Ezután az új animációt bármelyik elem Interakciók paneljén kiválaszthatod.