Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 2, 2019 at 7:41 pm #1124256
    brandpirate

    Hi!

    I try fade in an image and move it a bit from top to bottom when I scroll down. Could you pls tell me how I can achieve this by using the image from your media elements (portrait of the girl)?

    I repositioned it by using “transform: translate(5%, -15%);” so I think I cannot use the build in “top to bottom” animation. I also want to make this movement take “longer”. Could you pls help?

    Cheers
    Manu

    August 4, 2019 at 12:33 am #1124440
    Mike

    Hey Manuel,
    Thanks for the link, using your image’s class “portraittest” I believe this css will achieve what you are looking for:

    .portraittest {
    -webkit-animation: avia-ttb 3.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important; 
    animation: avia-ttb 3.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important; 
    opacity: 1;
}

    Please note the 3.8s at the beginning, this makes the animation slower/longer, by default it is 0.8s, so please adjust to suit.
    I recommend adding the css to WordPress > Customize > Additional CSS as it has priority, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.