[Resolved] Adding CSS animated background on Header Element

Home Forums Support [Resolved] Adding CSS animated background on Header Element

Home Forums Support Adding CSS animated background on Header Element

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1293334
    Mireia

    Hi!

    I’m trying to figure out how put a css animated background on homepage element, for example this one: https://codepen.io/Mamboleoo/pen/BxMQYQ

    I suppose I can enter the css in the editor, but where does the html go? Is there another way to do it?

    Thank you very much!

    #1293368
    David
    Staff
    Customer Support

    Hi there,

    what is the Home page element you’re trying to add it to ? Can you share a link so i can see?

    #1293409
    Mireia

    Hi David!

    For our homepage we are using GP preumium, Elements – header element full screen.

    Right now our website is on maintenance mode, but I open it for you to check some minutes: https://misterio.studio/

    #1293426
    David
    Staff
    Customer Support

    Hi there,

    in your Hero content you will need to add some DIV wrappers like so:

    <div class="hero-background">
        <!-- add your codepen background markup here -->
    </div>
    <div class="hero-foreground">
        <!-- add your other content here eg title and button -->
    </div>

    then you can position the background behind the foreground with this CSS:

    .page-hero, .hero-foreground {
        position: relative;
    }
    
    .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #1307489
    Mireia

    We have put the code but I’m afraid we didn’t get it. We don’t see if it’s the animation code or something that really has to do with the header.

    Please, could you take a look to see if we have missed something??

    Thank you very much!

    #1307562
    David
    Staff
    Customer Support

    Try this CSS:

    .page-hero {
        overflow: hidden;
    }
    
    .page-hero .inside-page-hero {
        max-width: 100%;
    }
    
    .hero-foreground {
        position: absolute;
        top: 50%;
    }
    
    .background {
        width: 100vw;
        height: 100vh;
        background: #3E1E68;
    }
    
    .background span {
        width: 20vmin;
        height: 20vmin;
        border-radius: 20vmin;
        backface-visibility: hidden;
        position: absolute;
        animation-name: move;
        animation-duration: 6s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    .background span:nth-child(1) {
        color: #E45A84;
        top: 64%;
        left: 28%;
        animation-duration: 11.6s;
        animation-delay: -8.6s;
        transform-origin: -24vw -5vh;
        box-shadow: -40vmin 0 9.0982742695vmin currentColor;
    }
    
    .background span:nth-child(2) {
        color: #FFACAC;
        top: 73%;
        left: 82%;
        animation-duration: 10.6s;
        animation-delay: -0.4s;
        transform-origin: 13vw -6vh;
        box-shadow: -40vmin 0 14.664675849vmin currentColor;
    }
    
    .background span:nth-child(3) {
        color: #583C87;
        top: 82%;
        left: 41%;
        animation-duration: 11.7s;
        animation-delay: -5.2s;
        transform-origin: 20vw -12vh;
        box-shadow: 40vmin 0 7.7242551118vmin currentColor;
    }
    
    .background span:nth-child(4) {
        color: #E45A84;
        top: 14%;
        left: 70%;
        animation-duration: 12.7s;
        animation-delay: -12.5s;
        transform-origin: 18vw 2vh;
        box-shadow: 40vmin 0 12.6894088882vmin currentColor;
    }
    
    .background span:nth-child(5) {
        color: #E45A84;
        top: 80%;
        left: 26%;
        animation-duration: 15.1s;
        animation-delay: -6s;
        transform-origin: 2vw -12vh;
        box-shadow: 40vmin 0 8.0580043585vmin currentColor;
    }
    
    .background span:nth-child(6) {
        color: #E45A84;
        top: 51%;
        left: 48%;
        animation-duration: 12.5s;
        animation-delay: -9s;
        transform-origin: 2vw -8vh;
        box-shadow: 40vmin 0 10.6084008634vmin currentColor;
    }
    
    .background span:nth-child(7) {
        color: #583C87;
        top: 74%;
        left: 67%;
        animation-duration: 14.9s;
        animation-delay: -6s;
        transform-origin: -21vw -16vh;
        box-shadow: -40vmin 0 7.9985554337vmin currentColor;
    }
    
    .background span:nth-child(8) {
        color: #FFACAC;
        top: 35%;
        left: 62%;
        animation-duration: 13.9s;
        animation-delay: -7.2s;
        transform-origin: -1vw 17vh;
        box-shadow: 40vmin 0 14.9473729168vmin currentColor;
    }
    
    .background span:nth-child(9) {
        color: #FFACAC;
        top: 78%;
        left: 38%;
        animation-duration: 12.8s;
        animation-delay: -13.4s;
        transform-origin: -9vw -15vh;
        box-shadow: -40vmin 0 5.468786913vmin currentColor;
    }
    
    .background span:nth-child(10) {
        color: #583C87;
        top: 65%;
        left: 37%;
        animation-duration: 10.1s;
        animation-delay: -15.7s;
        transform-origin: 21vw -2vh;
        box-shadow: -40vmin 0 10.2966878003vmin currentColor;
    }
    
    .background span:nth-child(11) {
        color: #FFACAC;
        top: 92%;
        left: 38%;
        animation-duration: 13.1s;
        animation-delay: -6.5s;
        transform-origin: 8vw 0vh;
        box-shadow: 40vmin 0 5.6886634449vmin currentColor;
    }
    
    .background span:nth-child(12) {
        color: #E45A84;
        top: 33%;
        left: 94%;
        animation-duration: 15.8s;
        animation-delay: -6.3s;
        transform-origin: 15vw 12vh;
        box-shadow: -40vmin 0 5.5126499569vmin currentColor;
    }
    
    .background span:nth-child(13) {
        color: #E45A84;
        top: 90%;
        left: 71%;
        animation-duration: 10.1s;
        animation-delay: -7.5s;
        transform-origin: -13vw 12vh;
        box-shadow: -40vmin 0 14.0835114174vmin currentColor;
    }
    
    .background span:nth-child(14) {
        color: #E45A84;
        top: 72%;
        left: 70%;
        animation-duration: 15.6s;
        animation-delay: -6.8s;
        transform-origin: -7vw 8vh;
        box-shadow: -40vmin 0 6.8386562742vmin currentColor;
    }
    
    .background span:nth-child(15) {
        color: #FFACAC;
        top: 78%;
        left: 2%;
        animation-duration: 15.8s;
        animation-delay: -5.5s;
        transform-origin: -9vw 14vh;
        box-shadow: -40vmin 0 9.3385297753vmin currentColor;
    }
    
    .background span:nth-child(16) {
        color: #FFACAC;
        top: 96%;
        left: 65%;
        animation-duration: 13.2s;
        animation-delay: -9.7s;
        transform-origin: -2vw 11vh;
        box-shadow: -40vmin 0 10.464549728vmin currentColor;
    }
    
    .background span:nth-child(17) {
        color: #FFACAC;
        top: 71%;
        left: 59%;
        animation-duration: 11.7s;
        animation-delay: -1.1s;
        transform-origin: 24vw -8vh;
        box-shadow: 40vmin 0 8.6235907886vmin currentColor;
    }
    
    .background span:nth-child(18) {
        color: #E45A84;
        top: 63%;
        left: 14%;
        animation-duration: 15.9s;
        animation-delay: -1.4s;
        transform-origin: -8vw -19vh;
        box-shadow: 40vmin 0 12.8476037706vmin currentColor;
    }
    
    .background span:nth-child(19) {
        color: #E45A84;
        top: 87%;
        left: 3%;
        animation-duration: 10.3s;
        animation-delay: -9.2s;
        transform-origin: -18vw -13vh;
        box-shadow: -40vmin 0 14.1500077496vmin currentColor;
    }
    
    .background span:nth-child(20) {
        color: #583C87;
        top: 91%;
        left: 41%;
        animation-duration: 15.1s;
        animation-delay: -8.8s;
        transform-origin: 18vw 19vh;
        box-shadow: -40vmin 0 14.3134055532vmin currentColor;
    }
    
    @keyframes move {
        100% {
            transform: translate3d(0, 0, 1px) rotate(360deg);
        }
    }
    #1307955
    Mireia

    Thank you very much David! It worked! Best support ever.

    #1308542
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.