Member Avatar for charisma

Hello everyone. I have a .gif image that I would like to put on a opening web page. I would like to make it fade in when a person first comes to the web site. I know it can be done in flash but never used it. can some one help me.

  • 3 Contributors
  • 3 Replies
  • 84 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

— short, practical plan that avoids pulling in a whole library for one effect. 's jQuery approach will work and is correct that jQuery must be included for it to run. An alternative that is simpler and up-to-date is to use a CSS transition for opacity and a tiny bit of vanilla JavaScript to wait until the image is fully loaded before starting the fade.

This keeps the user from seeing a partially-loaded GIF and is easy to copy into an existing page.

/* start hidden, smooth fade when .visible is added */
img.fade {
  opacity: 0;
  transition: opacity 600ms ease;
}

img.fade.visible {
  opacity: 1;
}
document.addEventListener('DOMContentLoaded', function () {
  var img = document.getElementById('yourPic'); // match your img id
  if (img.complete) img.classList.add('visible');
  else img.addEventListener('load', function () { img.classList.add('visible'); });
});

Notes and troubleshooting: large GIFs can still look jumpy while downloading — consider using a static poster image or a short video if you need frame-accurate control. Use loading="lazy" for offscreen images to save bandwidth and the Intersection Observer API if you want the fade to trigger only when the image scrolls into view. For CSS details see MDN: transition.

Recommended Answers

All 3 Replies

Member Avatar for Mbot

jQuery has a fadein function if you are using it. Not to difficult to add it to existing code. Function would look something like:

$(document).ready(function() {
    $('#yourPic').fadeIn(1000);
});
Member Avatar for charisma

Do I put this right into my HTML?

Member Avatar for JorgeM

You also need to have a reference to the JQuery library.

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.