- This topic has 11 replies, 3 voices, and was last updated 3 years, 2 months ago by jmarc.
-
AuthorPosts
-
December 28, 2020 at 3:03 am #1596498jmarc
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
December 28, 2020 at 3:22 am #1596520jmarcAlso … the URL in the signature in this forum is wrong, how can I modify it ?
December 28, 2020 at 7:50 am #1596990DavidStaffCustomer SupportHi 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.
December 28, 2020 at 8:04 am #1597014jmarcHello David
It’s kind of you to answer…
I’ve updated my profile with a good URL… so you can see my site
JmarcDecember 28, 2020 at 11:09 pm #1597731jmarcHello
I’ll be glad to get your solution…
Thank’s a lot
JMarcDecember 29, 2020 at 1:21 am #1597826ElvinStaffCustomer SupportHi,
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#7557433Alternatively, 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-447324309December 29, 2020 at 1:31 am #1597842jmarcHi
I just want the featured image on a single page of the blog to appears with a fade in effect …
Thank youI’ve try to manage that but it’s too difficult for me
December 29, 2020 at 2:18 am #1597894ElvinStaffCustomer SupportThis 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); }
December 29, 2020 at 2:36 am #1597906jmarcThank 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 youDecember 29, 2020 at 2:54 am #1597919jmarcOk 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 π
December 29, 2020 at 8:46 pm #1598973ElvinStaffCustomer SupportNice one. Glad you got it sorted. π
December 30, 2020 at 7:50 am #1599663jmarcThank’s π
My pleasure, if it helps anyone … -
AuthorPosts
- You must be logged in to reply to this topic.