Time delay function to reveal image over several days

Question

I am wondering if it is possible to reduce the opacity of an image/element over time to reveal something under it.

For example, using a jquery timer to countdown to a time 3 days ahead, can we use that time to show a 3 day long animation or opacity to reveal the underlying image when the timer runs out?

Any thoughts on how we could go about building this?

Yes (no cookies required), but if you're doing something like a product reveal, remember that anyone with minimal technical knowledge can skip the timer and reveal the underlying image instantly. — JJJ, Jun 16 '15 at 20:33

score 1 · Answer 1 · answered Jun 16 '15 at 20:37

Your question is quite broad, so I will assume that the animation is supposed to run for three days starting from page load. Assuming that the page will be open for three days, you can have a long-running CSS animation. No JavaScript is required.

If the page is going to be closed, then JavaScript is required to persist the running value either in Web Storage or a cookie. Then the opacity could be calculated the next time the page is loaded and the animation would continue from there.

Here is a demo of the CSS animation:

img {
  opacity: 0;
  -webkit-animation-name: reveal;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 259200s;
  animation-name: reveal;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 259200s;
}
@-webkit-keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<img src='https://placekitten.com/g/200/300' alt='kitten'>

score 0 · Answer 2 · answered Jun 16 '15 at 20:38

You can use jQuery .fadeOut to fade an element out, however this would only work in a single page instance. In other words, it would start over each time someone refreshed the page. Is this what you want?

If you want it to face the same for anyone who visits the site at a given time, then you can create a date element in javascript and calculate based on that. It'll take a little work but it should be possible.

Create a new date object on load of the page using

var currDate = new Date();

then calculate how long until the end "reveal" time and take that as a percent of the total time from start (when this fading "started") and assign that as the current opacity.

Next look at how much time is left and start a new jquery .fadeOut animation with that amount as the duration.

You'll want to place the "hider" over the top of what ever is being revealed using position:absolute.

This is a pretty high level description of one possible solution.

Time delay function to reveal image over several days

2 Answers2