Archived topic
Style body_class() but not site header
3 replies · Started by Maria on May 29, 2018
I'm testing a page transition feature that will cause the page to fade in slightly on page load, which seems to work except the logo/site header/masthead is also fading in which I don't want. Any ideas how to exclude this from fading in? I've used the body_class, but can't figure out how to exclude certain elements. See below for my CSS and function.
My css:
@keyframes test-class-name {
0% {
/* transform: translatey(3%); */
opacity: 0;
}
100% {
/* transform: translatey(0); */
opacity: 1;
}
}
.test-class-name {
animation-duration: .75s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: test-class-name; /* the name of the animation we defined above */
}
Added to functions.php:
// Fading in Pages on Load
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'test-class-name';
// return the $classes array
return $classes;
}
//Add test class to the filter
add_filter('body_class','my_class_names');
Hi there,
So you only want the content area to fade in, while everything else on the page loads instantly?
If so, you can do this:
@keyframes test-class-name {
0% {
/* transform: translatey(3%); */
opacity: 0;
}
100% {
/* transform: translatey(0); */
opacity: 1;
}
}
.site-content {
animation-duration: .75s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: test-class-name; /* the name of the animation we defined above */
}
Thank you very much. That helped.
You're welcome :)