Skip to main content

Make an image appear gradually

  • 14 September 2021
  • 6 replies
  • 38 views

Charly_Elbaz

hello, I would like to know if you know how to make an image appear gradually, a kind of crossfade, when the prospect scrolls, or when the page loads.

Thanks for your help
Charly

6 replies

Oliver_Lord
Unbouncer
Forum|alt.badge.img
  • Launch Specialist @ Unbounce
  • 141 replies
  • September 16, 2021

Hey Charly_Elbaz,

Good question. This should be possible using some custom CSS. There are a couple of threads here in the Community with some instructions on how to add fade effects on-load, and on-scroll, which might be of use to you:


  • 15 replies
  • September 16, 2021

You are in quite the amount of luck!

I’m sorry that this is reaching you a couple days later, I only now got the email notification of the post. I happened to need the same effect for a page that I was working on, and in fact created a test page that has those elements in it.

The entire thing is controlled with CSS only, so no need to load any external scripts, and it’s pretty easy to configure just by looking at it and messing around with the animation timing settings, but let me know if you have any trouble or have additional questions.

I haven’t had a chance to do an on-scroll version of it, but looks like @Oliver_Lord already tackled that one!


Oliver_Lord
Unbouncer
Forum|alt.badge.img
  • Launch Specialist @ Unbounce
  • 141 replies
  • September 17, 2021

Thanks for sharing your test page @nlafakis - that fade in effect looks real smooth!

I made a test page for on-scroll animations, which you can find here. I hope that you find this useful.


Charly_Elbaz

Hi thx so much to answer me
But could u please explain to me where can i find the peace of CSS code ?


  • 15 replies
  • September 20, 2021

Yes, OMG, I’m SO sorry!!! I forgot that it was a page that I used for prior examples of making things work, lol.

I have stripped away all the unnecessary CSS (ignore any/all JS code, it isn’t needed to make this work).

I’ve highlighted the part of the css that is most important and controls the fade animation. You can play around with the parameters to customize it to your liking. Let me know if you have any other questions!!


  • 15 replies
  • September 20, 2021

The bare code:
.element {
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}

@-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}

/* Additional styles not required */
.pretty {
background: yellow;
font-family: helvetica, arial, sans-serif;
padding: 40px 20px;
text-align: center;
width: 100%;
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
}

All you need to do, is name any div within your setup with the class name of: element or you could rename that, doesn’t really matter so long as the class or ID that you want to fade is the same as what’s in the CSS controller.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings