[Resolved] Style body_class() but not site header

[Maria]

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

[Tom]

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 */
}

[Maria]

Thank you very much. That helped.

[Tom]

You’re welcome 🙂

[Author]

Posts