Using jQuery to change opacity depending on the time of day

Question

Using jQuery to change opacity depending on the time of day

I've been developing an open source project named BitDay that originated from a Reddit thread some time ago.

In this project, I have 12 CSS classes representing different elements, each with its own unique background image.

Currently, the jQuery script I wrote fetches the current time and dynamically changes the background image based on the time of day. This means that every 2 hours, the background will transition to a new image.

$(function() {
  // JavaScript code here...
});

#container {
    // CSS styles here...
}

.bg {
    // Background styles here...
}

/* Define background images for various times of the day */

<div id="container">
    <div class="bg-splash"></div>
    <div class="bg-tobe" style="display: none;"></div>
</div>

Instead of instantaneously changing the background image depending on the hour, I'm looking to implement a gradual transition effect. For example, at 7am, bg-1 will be fully visible at 100% opacity. As time progresses, it will slowly fade into bg-2, reaching full opacity by 8am. This fading effect will continue throughout the morning, creating a smooth transition between backgrounds over the course of 2 hours.

Furthermore, I aim to make this transition persistent for all users accessing the start screen. This means that if a user logs in at 8:30am, they will see bg-1 displayed at 25% opacity, seamlessly blending into bg-2.

I'm grappling with the implementation details on this feature and would greatly appreciate any assistance or insights!

jquery html css fadeto

Answer 1

Answer №1

After careful consideration, I have decided to introduce a new solution while preserving the existing one above. The new approach offers a different functionality compared to the more intricate answer below.

In response to your request for a "kicker" feature, I have successfully integrated this enhancement. Now, when transitioning between two backgrounds (referred to as "time blocks" in the code comments), the fading will commence midway. Below is the revised code implementation:

It is important to note that due to technical constraints, I had to adjust the background timings to fixed 2-hour intervals (refer to the bottom of the JavaScript code). This alteration may result in the backgrounds deviating from real-life sunset and dawn durations. Creating variable background durations, ranging from 1 to 4 hours, would necessitate extensive coding efforts. I trust this compromise is acceptable.

The timer interval has been set at 7200000 milliseconds (2 hours). To verify its functionality, please inspect the console log and background images using Inspect Element. A sample log output illustrates the current status, indicating the opacity levels of the starting backgrounds:

CURRENT TIME IS: 14:59. STARTING BACKGROUNDS ARE: bg-6 (opacity 0.01, fading OUT); bg-7 (opacity 0.99, fading IN).

Three minutes later, the transition will progress to fade out bg-7 and fade in the subsequent background, bg-8:

CURRENT TIME IS: 15:02. STARTING BACKGROUNDS ARE: bg-7 (opacity 0.98, fading OUT); bg-8 (opacity 0.02, fading IN).

I am eager to witness the final outcome, and should you choose to acknowledge my contribution in the credits, I would be grateful. Best of luck with your project!

Additionally, here is the updated fiddle link: https://jsfiddle.net/LaurensSwart/2go9g5n5/1/

(JavaScript code block)

(CSS code block)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo">

</div>

Answer 2

After careful consideration, I have decided to introduce a new solution while preserving the existing one above. The new approach offers a different functionality compared to the more intricate answer below.

In response to your request for a "kicker" feature, I have successfully integrated this enhancement. Now, when transitioning between two backgrounds (referred to as "time blocks" in the code comments), the fading will commence midway. Below is the revised code implementation:

It is important to note that due to technical constraints, I had to adjust the background timings to fixed 2-hour intervals (refer to the bottom of the JavaScript code). This alteration may result in the backgrounds deviating from real-life sunset and dawn durations. Creating variable background durations, ranging from 1 to 4 hours, would necessitate extensive coding efforts. I trust this compromise is acceptable.

The timer interval has been set at 7200000 milliseconds (2 hours). To verify its functionality, please inspect the console log and background images using Inspect Element. A sample log output illustrates the current status, indicating the opacity levels of the starting backgrounds:

CURRENT TIME IS: 14:59. STARTING BACKGROUNDS ARE: bg-6 (opacity 0.01, fading OUT); bg-7 (opacity 0.99, fading IN).

Three minutes later, the transition will progress to fade out bg-7 and fade in the subsequent background, bg-8:

CURRENT TIME IS: 15:02. STARTING BACKGROUNDS ARE: bg-7 (opacity 0.98, fading OUT); bg-8 (opacity 0.02, fading IN).

I am eager to witness the final outcome, and should you choose to acknowledge my contribution in the credits, I would be grateful. Best of luck with your project!

Additionally, here is the updated fiddle link: https://jsfiddle.net/LaurensSwart/2go9g5n5/1/

(JavaScript code block)

(CSS code block)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo">

</div>

Answer 3

Answer №2

Here you go! Make the 2000ms into 7200000 to create a gradual fade effect over a span of 2 hours. Additionally, I've shared it on Fiddle: https://jsfiddle.net/pbfuauzg/3/

I've been experimenting with adjusting the timing between the setInterval() and fadeIn() periods. Currently, I found that setting the fade() duration slightly shorter than the setInterval functions (e.g. 500 milliseconds) yields optimal results. Check out the code below for reference.

I've also tidied up your CSS by eliminating repetitive code sections. Can I please have a cookie now? :D?

Please remember: the time interval between each background isn't precisely 2 hours in your script (e.g. you have backgrounds set for 15:00h and 16:00h). To achieve perfect execution, adjust these timings to have regular 2-hour intervals instead of alternating between 1-hour and 3-hour intervals!

var timeBetweenBackgrounds = 2000; // in milliseconds - modify this to 7200000 for 2 hours

var d = new Date();
var hour = d.getHours();
var bgNumber = getPicture(hour);

$(document).ready(function() {

  $('#backgroundOne').addClass('bg-' + bgNumber);

  setBackground();
  window.setInterval(setBackground, timeBetweenBackgrounds);

});

var activeBackground = bgNumber;
var activeDiv = 1;

function setBackground() {

  if (activeDiv == 1) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container One. Fading in container Two.');
    $('#backgroundTwo').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundOne').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 2;
    });

  }
  if (activeDiv == 2) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container Two. Fading in container One.');
    $('#backgroundOne').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundTwo').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 1;
    });

  }

}


//Determines the picture to use based on the hour
function getPicture(hour) {
  if (hour >= 23 || hour <= 2)
    return 11;
  else if (hour >= 22)
    return 10;
  else if (hour >= 21)
    return 9;
  else if (hour >= 19)
    return 8;
  else if (hour >= 16)
    return 7;
  else if (hour >= 15)
    return 6;
  else if (hour >= 13)
    return 5;
  else if (hour >= 12)
    return 4;
  else if (hour >= 10)
    return 3;
  else if (hour >= 7)
    return 2;
  else if (hour >= 5)
    return 1;
  else
    return 0;
};

body {
  overflow: hidden;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 0.7;
}

.bg-0 {
  background-image: url("http://i.imgur.com/qexylYA.png");
}

.bg-1 {
  background-image: url("http://i.imgur.com/cRvIYLJ.png");
}

.bg-2 {
  background-image: url("http://i.imgur.com/UusvZC8.png");
}

.bg-3 {
  background-image: url("http://i.imgur.com/URjIjZS.png");
}

.bg-4 {
  background-image: url("http://i.imgur.com/Fy7kANa.png");
}

.bg-5 {
  background-image: url("http://i.imgur.com/e2lvJ8q.png");
}

.bg-6 {
  background-image: url("http://i.imgur.com/JEslGSe.png");
}

.bg-7 {
  background-image: url("http://i.imgur.com/v2h0qzb.png");
}

.bg-8 {
  background-image: url("http://i.imgur.com/xyfqUsX.png");
}

.bg-9 {
  background-image: url("http://i.imgur.com/XbIlhvL.png");
}

.bg-10 {
  background-image: url("http://i.imgur.com/xDAIc6P.png");
}

.bg-11 {
  background-image: url("http://i.imgur.com/kaCxCBi.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo" style="display: none;">

</div>

Answer 4

Here you go! Make the 2000ms into 7200000 to create a gradual fade effect over a span of 2 hours. Additionally, I've shared it on Fiddle: https://jsfiddle.net/pbfuauzg/3/

I've been experimenting with adjusting the timing between the setInterval() and fadeIn() periods. Currently, I found that setting the fade() duration slightly shorter than the setInterval functions (e.g. 500 milliseconds) yields optimal results. Check out the code below for reference.

I've also tidied up your CSS by eliminating repetitive code sections. Can I please have a cookie now? :D?

Please remember: the time interval between each background isn't precisely 2 hours in your script (e.g. you have backgrounds set for 15:00h and 16:00h). To achieve perfect execution, adjust these timings to have regular 2-hour intervals instead of alternating between 1-hour and 3-hour intervals!

var timeBetweenBackgrounds = 2000; // in milliseconds - modify this to 7200000 for 2 hours

var d = new Date();
var hour = d.getHours();
var bgNumber = getPicture(hour);

$(document).ready(function() {

  $('#backgroundOne').addClass('bg-' + bgNumber);

  setBackground();
  window.setInterval(setBackground, timeBetweenBackgrounds);

});

var activeBackground = bgNumber;
var activeDiv = 1;

function setBackground() {

  if (activeDiv == 1) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container One. Fading in container Two.');
    $('#backgroundTwo').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundOne').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 2;
    });

  }
  if (activeDiv == 2) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container Two. Fading in container One.');
    $('#backgroundOne').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundTwo').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 1;
    });

  }

}


//Determines the picture to use based on the hour
function getPicture(hour) {
  if (hour >= 23 || hour <= 2)
    return 11;
  else if (hour >= 22)
    return 10;
  else if (hour >= 21)
    return 9;
  else if (hour >= 19)
    return 8;
  else if (hour >= 16)
    return 7;
  else if (hour >= 15)
    return 6;
  else if (hour >= 13)
    return 5;
  else if (hour >= 12)
    return 4;
  else if (hour >= 10)
    return 3;
  else if (hour >= 7)
    return 2;
  else if (hour >= 5)
    return 1;
  else
    return 0;
};

body {
  overflow: hidden;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 0.7;
}

.bg-0 {
  background-image: url("http://i.imgur.com/qexylYA.png");
}

.bg-1 {
  background-image: url("http://i.imgur.com/cRvIYLJ.png");
}

.bg-2 {
  background-image: url("http://i.imgur.com/UusvZC8.png");
}

.bg-3 {
  background-image: url("http://i.imgur.com/URjIjZS.png");
}

.bg-4 {
  background-image: url("http://i.imgur.com/Fy7kANa.png");
}

.bg-5 {
  background-image: url("http://i.imgur.com/e2lvJ8q.png");
}

.bg-6 {
  background-image: url("http://i.imgur.com/JEslGSe.png");
}

.bg-7 {
  background-image: url("http://i.imgur.com/v2h0qzb.png");
}

.bg-8 {
  background-image: url("http://i.imgur.com/xyfqUsX.png");
}

.bg-9 {
  background-image: url("http://i.imgur.com/XbIlhvL.png");
}

.bg-10 {
  background-image: url("http://i.imgur.com/xDAIc6P.png");
}

.bg-11 {
  background-image: url("http://i.imgur.com/kaCxCBi.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo" style="display: none;">

</div>

Using jQuery to change opacity depending on the time of day

Answer №1

Answer №2

Similar questions

Creating visuals from written content

Using jQuery each, the output is an undefined Object or HTMLElement

Display subpages of WordPress site in a dropdown menu on the navigation bar

The button will remain inactive until a selection is made from the drop-down menu, following Material

"Major issues arise as CSS3 Animation fails to function properly across all web

What is the best way to ensure a div stays inline with the main product box?

Is it possible to implement jQuery events on all elements belonging to a specific class

CSS division style not being properly implemented across entire form

Combining arrays into an Object with zipped keys and values

Ways to ensure that input text is fully cleared, even if it is set to empty

Utilizing JSON to enhance Jquery Autocomplete with custom parameters

Placing an icon and a title on the same baseline

Angular - The connections between deeply nested object models are established

Tips on changing the outline color by clicking

Tips for showing an inline <span> within <div> elements

Dropping down with Twitter Bootstrap's navbar menu

A guide on creating a clickable polygon in Vue.js using Konva

Adjusting Position for Parallax Effect using Jquery

Acquiring the PayPal callback variable with PHP

The TypeAhead feature fails to display any search results for the entered query