[Resolved] featured image animation

[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

[jmarc]

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

[David]

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.

[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

[jmarc]

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

[Elvin]

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

[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

[Elvin]

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);
}

[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

[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 🙂

[Elvin]

Nice one. Glad you got it sorted. 🙂

[jmarc]

Thank’s 🙂
My pleasure, if it helps anyone …

[Author]

Posts