I am fading in an image using your fadeIn code which works fine:<img data-animate="fadeIn" data-delay="1500 src= "....png "
but after the image has faded in I want to wait and then fade the same image back out (making it disappear) - so something likedata-animate="fadeOut" data-delay="2000"
How would I do this to the same image- make it fade in appear and then fade out disappear using your animation codes?
and similarly to above: I'd like to fadeIn image, wait 3 or 4 seconds and then slideOutRight
Hello,
This is Definitely Possible and already built into Canvas! Simply consider using the following code:
<img src="images/mac.png" alt="Image" title="Image" data-animate="fadeInLeft" data-animate-out="fadeOutRight" data-delay-out="3000" />This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank You!
OK - now I would like to get a little more complex with that. What I am doing is using that animation (fadein fadeout) over a background image.
So as an example- a picture of a t-shirt would be used as a background image.. and then an overlay of a transparent png would fade in with a t-shirt design, wait 2 seconds and then fadeout. So far the code above works perfect for that.
but then I would like a second overlay to fade in and out with as second design and then a third...all onto the same background image.
I know I can do this using keyframes in the head... just thought it may be easier to use your built in animation code.
Can do?
Hello,
This can be easily done with the existing codes by just playing with the data-delay and data-delay-out. You can simply add up the total duration and add this value by 3000 (taking into account the animation duration) in the data-delay attribute of the second image and so on. Example:
<img src="images/mac.png" alt="Image" title="Image" data-animate="fadeInLeft" data-animate-out="fadeOutRight" data-delay-out="3000" />
<img src="images/mac.png" alt="Second Image" title="Second Image" data-animate="fadeInLeft" data-delay="6000" data-animate-out="fadeOutRight" data-delay-out="3000" />
<img src="images/mac.png" alt="Third Image" title="Third Image" data-animate="fadeInLeft" data-delay="12000" data-animate-out="fadeOutRight" data-delay-out="3000" />This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard