Make an image appear gradually

  • 14 September 2021
  • 6 replies
  • 36 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
Rank
Userlevel 4
Badge

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:

N

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
Rank
Userlevel 4
Badge

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 ?

N

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!!

Screen Shot 2021-09-20 at 9.58.12 AM

Screen Shot 2021-09-20 at 10.00.33 AM

N

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.

Screen Shot 2021-09-20 at 10.05.29 AM

Reply


Terms & ConditionsCookie settings