Hi everyone
I try to turn my static page to a WordPress theme, I have one image element come with animation, I try to use couple ways, but my image won’t load on scroll (move up), so I was wondering anyone has any solution? Big thanks!
Here’s my HTML element:
<div>
img src="images/pexels-photo-386151.jpeg" data-w-id="f56f7b61-5a1c-8912-469a-280339605312" style="-webkit-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);-moz-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);-ms-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0)"
class="image-3">
</div>
I turn them to WordPress theme using
<?php the_post_thumbnail('medium',array(
'class' =>'image-3',
'data-w-id' => 'c970815c-c99b-0b5b-602f-1df1d50b885dl',
'style' => '-webkit-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
-moz-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
-ms-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0)'
));?>
I try to just use class ‘image-3’ on my CSS, but the animation still not working.
Thank you guys for the help!