Hi,
On my webpage, www.arcticlegacy.store , I use a one-image hero slideshow as a starting image.
On load, there is a small slide-in effect from right to left that I want to remove. I just want to keep the quick fade-in effect.
Is this an easy fix? I can see this is solved on https://kappa-usa.com/ and they are using the same theme.
Thanks in advance
Johan
I’m using the same theme. In the “customize theme” section you will see “Hero Slider”. You will see underneath a place for at least two hero slides (and you can add more). Just move your cursor over the blank hero slides and you will see an eyeball. Just click the eyeball. A line will be drawn through it and the unwanted image will disappear. Hope this helps. Good luck.
Thanks! But I only have one slideshow image and everything works just fine besides the fact that there is a small slide-in effect where the image comes in from right to left. I just want the image to load without moving at all.
The question is how https://kappa-usa.com/ solved this on their first hero image. It just fades in.
Hi @Arcticlegacy ;
I see that the image slide to the left when first loaded. If that is the issue, please follow the following instructions.
.slideshow__slide .hero__image-wrapper, [data-aos=hero__animation] .hero__image-wrapper {
transform: translateX(0) !important;
}
Kindly dm I willl help you
Wow that totally fixed it, thanks a million! Do you know where/how to set the fade duration, it’s quite long now.
Please choose the solution so the thread will show resolved for future visitors to see
I’m trying to find the fade CSS parameters via inspect but can’t find it. Please let me know if you have an idea of how to set the duration. Thanks.
Hi @Arcticlegacy ,
I think you’re talking about the opacity. It is 0.7s as you can see in the transition. You can find this code under the theme.css file
.loaded .slideshow__slide.is-selected .hero__image-wrapper, [data-aos=hero__animation].loaded .hero__image-wrapper {
opacity: 1;
transform: translateX(0px);
transition: transform 0.7s ease,opacity 0.7s ease;
}
You can actually change it to 0.5s by adding the code to the theme.css
.loaded .slideshow__slide.is-selected .hero__image-wrapper, [data-aos=hero__animation].loaded .hero__image-wrapper {
transition: opacity 0.5s ease !important;
}
Thanks a lot, really appreciate your help!
There is actually still a slide-in effect when viewing the page on mobile, can I remove that as well?
Hi did you see my question regarding the fix not working on mobile? Any ideas on how to fix in the CSS?
Hi @Arcticlegacy ,
Sorry about the delay. Here try to replace the code with this instead.
.hero__image-wrapper {
transform: translateX(0px) !important;
transition: opacity 0.5s ease;
}
So replace:
.slideshow__slide .hero__image-wrapper, [data-aos=hero__animation] .hero__image-wrapper { transform: translateX(0) !important; }
.loaded .slideshow__slide.is-selected .hero__image-wrapper, [data-aos=hero__animation].loaded .hero__image-wrapper { transition: opacity 0.5s ease !important; }
with only:
.hero__image-wrapper { transform: translateX(0px) !important; transition: opacity 0.5s ease; }
This does not work in safari mobile and on chrome mobile the slide in is gone but the opacity is not fading in, it’s black for 0.5 second then it instantly switches to the hero image.
Hi @Arcticlegacy ,
The browser has to get the images at first load.. You are seeing the black background first and then the image when it loads. That is why some browser do some animation transitions to help out with loading. Btw, your code for opacity is missing the “s” that is why it does not work. See image below
I added the s but it didn’t change the opacity transition. If you have the possibility, check our webpage on chrome on your phone. The black background stays for 0.5 second then it instantly switches to the hero image. The hero text is loaded before the switch to the hero image so it looks a bit strange with the text against black background. Also the slide in is still present in Safari mobile browser. Maybe this is as good as it gets :-).
Hi
do you think you can help us with this as well?
