TA-YouTube - Animations

TA-YouTube comes with a some great animations for your background image. Learn how to use these animations or design your own.

To right

Video Player

To change the animation to toright just change the class name of your background image to ta-youtube-anim-toright.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-toright"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

To left

Video Player

To change the animation to toleft just change the class name of your background image to ta-youtube-anim-toleft.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-toleft"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Rotate

Video Player

To change the animation to rotate just change the class name of your background image to ta-youtube-anim-rotate.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-rotate"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Ken Burns effect

Video Player

To change the animation to kenburns just change the class name of your background image to ta-youtube-anim-kenburns.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-kenburns"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Flight

Video Player

To change the animation to flight just change the class name of your background image to ta-youtube-anim-flight.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-flight"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Add you own animation to TA-YouTube

To create your own animation you have to add your own css class e.g. .ta-youtube-anim-example. In this class you can define animation params exactly for your new animation like the name of your new keyframe animation or transform-origin. In the next step you have to define your own keyframes -> 🌮

.ta-youtube-anim-example {
    animation-name: youtube-keyframes-example;
    transform-origin: right center;
}
@keyframes youtube-keyframes-example {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

Done with your new animation you have to add the new class e.g. ta-youtube-anim-example to your background image.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-example"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy