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 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"
/>
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"
/>
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"
/>
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"
/>
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 are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com