Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 16, 2019 at 2:28 am #1054465
    Josh

    Can you help me use this method to make the color section (av_section_1) background on my homepage scroll similarly? Is this effect possible using the Enfold Theme?

    codepen.io/subz/pen/GgPrJP

    • This topic was modified 5 years, 10 months ago by Josh.
    January 16, 2019 at 2:57 am #1054468
    Guenni007

    well everything is on your linked page!
    just make a color-section and give a custom class ( hero-bkg-animated ) to it. Place the code into your quick css.

    .hero-bkg-animated {
    background: #EEE url(//webers-testseite.de/wp-content/uploads/geometry2.png) repeat 0 0;
    width: 100%;
    margin: 0;
    -webkit-animation: slide 20s linear infinite;
    animation: slide 20s linear infinite;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}

    the 400px depends on the png you like to use – the height of the color-section can be different to that.

    https://webers-testseite.de/hostage-media/

    PS : and if you take a real png with transparency – the background-color can be changed here too !
    and i would include the animation ( not only the -webkit-animation to that rule

    PPS: if you change the keyframe to – you will have diagonal animation etc. pp

    @-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px -400px; }
}
    January 16, 2019 at 3:19 am #1054471
    Josh

    Hi, thanks for the reply! I’ve tried inserting it like so, but with no luck. My color section is named av_section_1

    .av_section_1 {
    background: #EEE url(/wp-content/uploads/2019/01/skycontentc.jpg) repeat 0 0;
    width: 100%;
    margin: 0;
    -webkit-animation: slide 20s linear infinite;
    animation: slide 20s linear infinite;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}
    January 16, 2019 at 3:24 am #1054472
    Guenni007

    is it realy a class that av_section_1 ? try #av_section_1
    but you should be more specific – otherwise all first color-section will do that

    January 16, 2019 at 3:28 am #1054473
    Josh

    i named the Color Section (Section ID) av_section_1, it would be okay if all first color sections did this on this website.

    • This reply was modified 5 years, 10 months ago by Josh.
    January 16, 2019 at 3:33 am #1054475
    Guenni007

    well all first color-section on enfold got that ID ( av_section_1 ) on default !
    Only if you fill the input field “For Developers: Section ID” – the ID will change to that custom one

    January 16, 2019 at 3:35 am #1054476
    Guenni007

    but if it is a feature that all first color-section should do that:

    #av_section_1 {
    background: #EEE url(/wp-content/uploads/2019/01/skycontentc.jpg) repeat 0 0;
    width: 100%;
    margin: 0;
    -webkit-animation: slide 20s linear infinite;
    animation: slide 20s linear infinite;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}

    by the way: this #EEE in the code can be overwritten by the color defined in color-section ALB – if your image is a transparent png.
    but i think you like to show a passing cloudy sky
    But – then the jpg has to be seamless otherwise you will see

    January 16, 2019 at 3:51 am #1054477
    Josh

    Yes, thank you. I have removed the av_section_1 ID from the Color Section (since it is already that by default). I have copied this code into the quick CSS but there has been no change.

    #av_section_1 {
    background: #EEE url(/wp-content/uploads/2019/01/skycontentc.jpg) repeat 0 0;
    width: 100%;
    margin: 0;
    -webkit-animation: slide 20s linear infinite;
    animation: slide 20s linear infinite;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}
    January 16, 2019 at 3:56 am #1054478
    Guenni007

    have you a live link for me ?

    January 16, 2019 at 6:32 pm #1054636
    Josh

    yes, dev.deckadence.com

    January 16, 2019 at 6:51 pm #1054641
    Guenni007

    nothing opens at all. Continous spinning wheel on top

    January 16, 2019 at 6:54 pm #1054643
    Josh

    sorry! http://dev.deckadenceinc.com/

    January 16, 2019 at 7:34 pm #1054655
    Josh

    Got it working. Im not sure which setting it was but it was working when i created a new page witha new color section to test with, so i applied all those same settings to the homepage color section.

    Thank you for your help.

    edit: the issue was that i had those sections using parallax on the BG image. once i changed them to “scroll” they all worked.

    Admin: you can close this issue.

    • This reply was modified 5 years, 10 months ago by Josh.
    January 17, 2019 at 12:30 am #1054805
    Josh

    Hey Guenni007, one other question perhaps you can help me with? I’ve had a post on the form for a number of days but still no answer;

    I’d like to center the av_section_1 background overlay that i’m using (the trees), at the bottom of the color section, and prevent it from repeating. Any chance you know how to do this using quick css?

    • This reply was modified 5 years, 10 months ago by Josh.
    January 17, 2019 at 10:32 am #1054916
    Guenni007

    to get rid of repeat – just put this to your quick css:

    #av_section_1 .av-section-color-overlay {
    background-repeat: no-repeat !important;
    background-position: bottom center;
}

    i would have done that all via custom-class.
    You know how to get the custom-class field in enfold? : it is on Enfold Options – Layout Builder – and check “Show element options for developers”

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