thumbnail image animation

  • 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 WordPressworpress using

    <?php the_post_thumbnail('medium',array(
        'class' =>'image-3',
        '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!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,
    your wordpress function and its attributes are correct even css also apply correct but the css which you are using for animation that is not correct, make sure its correct then it will work.
    2018-01-15_0910

    Thanks

    Thread Starter madebymt

    (@madebymt)

    Hi @leadsoft
    Thank you for your response, it works on my regular index.html page, so I don’t know why it won’t show up, even I tried other css, it won’t have animation.

    Like this:

     transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/

    Thank you.

    i have checked the css is also working i have create small video which shows css is working.
    https://www.screencast.com/t/YycamRY7yxmV

    Thanks

    Thread Starter madebymt

    (@madebymt)

    Hi @leadsoft
    Thank you for that awesome video, really appreciated that, super helpful!
    My transition work, but not working on scroll view with my original setup.

    Thank you so much for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘thumbnail image animation’ is closed to new replies.