Making my slider smoother with parallax?

It seems quite jagged and to stutter a bit on computer when scrolling. Not how i expected parallax to look.

Also how can i make the header disappear the instant it starts scrolling down?

thanks again!

Hello,

Can you please provide a link to your website?

Kind Regards, Roman.
aThemes Support

Sorry for the late message!

At the moment the header changes only after scrolling a few frames down. Can i make the logo animate shrinking slightly with the header as it scrolls down instantly

Hello,

It seems quite jagged and to stutter a bit on computer when scrolling. Not how i expected parallax to look.

I’ve just checked your slider in Chrome and Firefox, it’s looks smooth. However, I also noticed that your slide images are huge, it might cause such issues on not very powerful devices. Try to compress your slider images, Full HD under one megabyte should be okay.

At the moment the header changes only after scrolling a few frames down. Can i make the logo animate shrinking slightly with the header as it scrolls down instantly

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

#masthead.fixed {
    background-color: rgba(0,0,0,0.9);
    padding: 5px;
}

.btn-menu {
    line-height: 1;
}

Kind Regards, Roman.
aThemes Support

Thanks Roman!

It made my header smaller when scrolling but i was expecting the logo to shrink slightly with the text when it moved away from the top.

The other thing.
I played around with the numbers but the header banner seemed to change only after scrolling down a little. I wanted it to be instant or at least a little low for it to change.

  1. can i ask how i can fix this. In the image to make the header take up less space on mobile but also look neat and to have the desktop the same but. Left, centre, right for top bar Screenshot_20191006-221134_Firefox|243x500

Hello,

It made my header smaller when scrolling but i was expecting the logo to shrink slightly with the text when it moved away from the top.

Try to add this CSS code as well:

#masthead.fixed .site-logo {
    max-height: 80px;
}

.site-logo {
    transition-duration: 0.5s;
}

I played around with the numbers but the header banner seemed to change only after scrolling down a little. I wanted it to be instant or at least a little low for it to change.

I’m not sure what you mean, can you please provide more details regarding this?

can i ask how i can fix this. In the image to make the header take up less space on mobile but also look neat and to have the desktop the same but. Left, centre, right for top bar

Please create a new topic for this issue to keep the forum in good order and make it easier to help you.

Kind Regards, Roman.
aThemes Support

this is perfect! thank you!

Could I have help with the number 3.? or should i make a new forum

Hello,

this is perfect! thank you!

You are welcome! :slight_smile:

Could I have help with the number 3.? or should i make a new forum

Please create a new topic in order to make it easier to help you.

Kind Regards, Roman.
aThemes Support