Member Avatar for hlamster

I have an image I would like to have it's transparancy change from 0 to 100% over about 5 seconds on page load. Any suggestions would be most appreciated. I just can't seem to get the css code right. Do I need to use javascript? Doesn't html5 do this easily?

Thanks/Hal

  • 2 Contributors
  • 3 Replies
  • 289 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short answer: you don't need jQuery for a smooth fade — pure CSS can do it. If you want only the background image to fade in (and not the text/content), put the image on a separate layer (a ::before pseudo-element or an absolutely-positioned <img>) and animate that layer's opacity. 's suggestion to use jQuery.fadeIn() is valid when you want the whole element to appear, but it will fade children too; layering avoids that.

Example (background on a pseudo-element — automatic on page load):

.container { position: relative; overflow: hidden; }

.container::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url('your-image.jpg') center/cover no-repeat;
  opacity: 0;
  animation: bgFade 5s ease forwards;
  z-index: 0;
}

.container > * { position: relative; z-index: 1; }

@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }

Alternative (use an <img> layer when the image is meaningful or you need responsive srcsets):

<div class="wrap">
  <img src="hero.jpg" alt="" class="bg-img">
  <div class="content">...</div>
</div>

.bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
         opacity:0; animation:bgFade 5s ease forwards; z-index:0; }

Troubleshooting / tips: do not use display:none if you want a fade — opacity animates, display does not. Avoid applying opacity to the parent if you want text to stay fully opaque. If the image might load slowly, preload it (or wait for its onload) and then add a class to trigger a transition so the fade happens after the bytes arrive. Also, , your earlier JS had a missing set of parentheses in the function declaration — use function fadeItIn() { ... } or better, use the CSS approaches above to keep it simple.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Yes, you can do this with javascript. However, its very easy to do with the jQuery library using the fadeIn() method.

Here's a simple example of using the fadeIn() method on a div. For an image, swap the div element for an image.

<!doctype html>
<html>
<head>
  <title>fadeIn</title>
  <style>
  span { cursor:pointer }
  #div1 {
    display: none;
    width: 100px;
    height: 100px;
    background: #ff0000;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<span id="clickMe">Click here...</span><br />
<div id="div1"></div>

<script>
$('#clickMe').click(function() {
  $("#div1").fadeIn(5000);
});
</script>

</body>
</html>
Edited by JorgeM
Member Avatar for hlamster

Thanks. But I am having trouble getting it to work. Probably because I am not familiar with jqueary. I want a div element to slowly fade in. I tried to put the function call in the body as an onload. Then I created the function with just the fadein part. Here is the basic idea of my code:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body onload='fadeItIn()'>

<div class="container">
  <div class="content">
  <div id='header'>
  ....
  </div>
  <div id='mainBody'>
  ....stuff to bring fadein....
  </div>
  <script>
function fadeItIn{
  $("#mainBody").fadeIn(5000);
};
</script>

Any help would be most appreciated.
Thanks/Hal

Member Avatar for JorgeM

You dont have to call a function onload for the body element. Try this...

<!doctype html>
<html>
<head>
  <title>fadeIn</title>
  <style>
  #div1 {
    display: none;
    width: 250px;
    height: 250px;
    background: #ff0000;
    padding:10px;
    color: #ffffff;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="div1">This is content in #div1</div>
<script>
$( document ).ready(function() {
  $("#div1").fadeIn(5000);
});
</script>
</body>
</html>

Here is an example on jsFiddle.net

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.