Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 6, 2018 at 5:30 pm #908694
    Guenni007

    i know how to animate addClass or removeClass but on enfold avia.js the transition from transparency header to non-tranparent header on shrinking header is defined i guess here a bit different than i know and ff
    function av_change_class() and function avia_header_size()

    f.e:

    if(st - 30 < el_height)
{
    av_change_class(header, 'remove', 'header-scrolled-full');
}
else
{
    av_change_class(header, 'add', 'header-scrolled-full');
}

    how to insert animation here on that style

    the reason: i have on tranparency header a gradient white to tranparent for header_bg
    when header-scrolled-full is added and transparency-header class is gone the transition is harsh.

    February 7, 2018 at 9:32 am #908977
    Victoria

    Hey Guenter,

    Do you have something like this in mind?

    
.header-scrolled.header-scrolled-full.header_color .container_wrap_meta {
  transition: background 5s ease;
  background: #f8f8f8;
}

    Best regards,
    Victoria

    February 7, 2018 at 10:15 am #908989
    Guenni007

    did you see the private content url?

    But you brought me to the right solution. Since the header-bg gradient was defined as background-image – I have to put the transition to all.
    And to have it to and fro – it has to be set on both

    .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
    #top .av_header_transparency .header_bg {
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 45%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 45%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 45%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,255,255,0.001)), color-stop(45, rgba(255,255,255,1)));
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 45%);
background-image: linear-gradient(to top, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 45%);
background-color: transparent !important;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out}

    and one important thing has now become clear to me – i had to set the background-image of the header_bg without transparency too – to the same values. Now it looks prettier and not so harsh

    Thanks – can be closed

    February 7, 2018 at 1:01 pm #909098
    Victoria

    Hi Guenter,

    Yes, this is much smoother. Great job!

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    • This reply was modified 6 years, 9 months ago by Victoria.
    February 7, 2018 at 2:11 pm #909155
    Guenni007

    no – thanks – can be closed

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