[Resolved] featured image animation

Home Forums Support [Resolved] featured image animation

Home Forums Support featured image animation

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1596498
    jmarc

    Hello

    I can’t make it so I ask help please.
    How can I make a fadein entrance of the featured image on a single page of my blog please ?
    I would like that the .single .attachment-full appears slowly with a fadein effect …

    Thank you

    #1596520
    jmarc

    Also … the URL in the signature in this forum is wrong, how can I modify it ?

    #1596990
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to your site so i can see the markup – as there a few custom ways of doing this.

    You can edit your Profiles biography by clicking the Forum Profile button at the top of this page and then clicking Edit.

    #1597014
    jmarc

    Hello David
    It’s kind of you to answer…
    I’ve updated my profile with a good URL… so you can see my site
    Jmarc

    #1597731
    jmarc

    Hello
    I’ll be glad to get your solution…
    Thank’s a lot
    JMarc

    #1597826
    Elvin
    Staff
    Customer Support

    Hi,

    Can you explain a bit more on how it will behave? Does the animation have to repeat when the element is not visible within the viewport?

    Usually, you’ll to write a script that checks if the element is in viewport and add an if condition that toggles fade-in class.

    You can use this discussion as a reference:
    https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433

    Alternatively, you can use well-known animate libraries like AOS:
    https://michalsnik.github.io/aos/

    You can implement AOS on your site and try to animate your targets w/ only unique CSS selector classes using this snippet:
    https://github.com/michalsnik/aos/issues/412#issuecomment-447324309

    #1597842
    jmarc

    Hi

    I just want the featured image on a single page of the blog to appears with a fade in effect …
    Thank you

    I’ve try to manage that but it’s too difficult for me

    #1597894
    Elvin
    Staff
    Customer Support

    This is somewhat out of our scope but to help you out, Try this:

    Add animated class to the image you want to animate.

    You then insert this script on your wp_footer.

    var el = document.querySelector('.animated');
    
    function isElementInViewport (el) {
    
        var rect = el.getBoundingClientRect();
    
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
        );
    }
    
    function onVisibilityChange(el, callback) {
        var old_visible;
        return function () {
            var visible = isElementInViewport(el);
            if (visible != old_visible) {
                old_visible = visible;
                if (typeof callback == 'function') {
                    callback();
                }
            }
        }
    }
    
    var handler = onVisibilityChange(el, function() {
    	if(isElementInViewport(el)){
    		if(!el.classList.contains('fade-in')){
    			el.classList.add('fade-in');
    		}else{
    			return;
    		}
    	} if(!isElementInViewport(el)) {
    		if(el.classList.contains('fade-in')){
    			el.classList.remove('fade-in');
    		}else{
    			return;
    		}
    	}
    });
    
    if (window.addEventListener) {
        addEventListener('DOMContentLoaded', handler, false);
        addEventListener('load', handler, false);
        addEventListener('scroll', handler, false);
        addEventListener('resize', handler, false);
    } else if (window.attachEvent)  {
        attachEvent('onDOMContentLoaded', handler); // Internet Explorer 9+ :(
        attachEvent('onload', handler);
        attachEvent('onscroll', handler);
        attachEvent('onresize', handler);
    }
    #1597906
    jmarc

    Thank you but where and how can I add this “animated” class ?!? same thing for the code in the footer ?!? where and how ?

    Where can I find the lign of code of “featured image” for the single blog page ? that’s my problem
    Thank you

    #1597919
    jmarc

    Ok I found a solution ! I just put this piece of css in the cuqstom css and I works fine …
    Here it is :

    .page-header-image-single {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
    -ms-animation: fadeIn ease 5s;
    }

    @keyframes fadeIn{
    0% {
    opacity:0;
    }
    100% {
    opacity:1;
    }
    }

    @-moz-keyframes fadeIn {
    0% {
    opacity:0;
    }
    100% {
    opacity:1;
    }
    }

    @-webkit-keyframes fadeIn {
    0% {
    opacity:0;
    }
    100% {
    opacity:1;
    }
    }

    thank’s for your help anyway πŸ™‚

    #1598973
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted. πŸ™‚

    #1599663
    jmarc

    Thank’s πŸ™‚
    My pleasure, if it helps anyone …

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