[Resolved] Style body_class() but not site header

Home Forums Support [Resolved] Style body_class() but not site header

Home Forums Support Style body_class() but not site header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #587409
    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’);

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #587548
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #588256
    Maria

    Thank you very much. That helped.

    #588309
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.