Is it possible to change the background as I move the sun across the screen?

Question

Is it possible to change the background as I move the sun across the screen?

Recently, I developed a page that allows users to drag an image of the sun in an arc. The sun transitions from a bright sun to a darker version and eventually into a moon as it moves along the arc. Now, my goal is to have the background image also transition seamlessly.

I am seeking advice on how to smoothly fade the current sky background image into a tiled night sky image (similar to the one provided below) when the sun reaches the halfway point of its arc.

https://i.sstatic.net/8kI2q.gif

To visualize what I'm describing, you can check out the interactive demonstration at .

var width = 300,
  sun = $("#sun"),
  dark = $("#dark_sun"),
  moon = $("#moon"),
  total = $(window).width()
firstOfThree = (total / 3) * 0,
  secondOfThree = (total / 3) * 1,
  thirdOfThree = (total / 3) * 2;

// Drag functionality

// CSS styling for elements

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<img id="moon" src="http://i.imgur.com/VmFEwrH.png">
<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">

javascript jquery html css

Answer 1

Answer №1

Implement fixed layers with opacity transition.

The getOpacity function receives two parameters, Z (percentage) and the index of the div, using them (along with the element count) to compute opacity while ensuring each .bg is fully displayed at some point during dragging. The function determines and returns the values through the cosine operation.

opacity = A*Math.cos(P*0 + Z*Math.PI - (index*Math.PI)/L) + V

I have generated a visual representation here on desmos.com and included a code snippet to simplify understanding of its functionality.

$(function(){

    var bg = $(".bg"),
        drag = $(".drag"),
        sun = $("#sun"),
        csel = '#container'; // container selector

    _init();

    // hoistorzs

    function _init(){
        onDrag();
        sun.css({
            opacity:1
          })
          .draggable({
            axis: "x",
            containment: csel,
            drag:onDrag
        });
    }
  
    function getOpacity(Z,index){
        Z = 1 - Math.min(Math.max(0,Z),1); // ensure 0 < x < 1
        var len = bg.length;
        var A = 1,
            P = 1,
            V = -A + 1,
            x = 0, // we require y at x=zero
            L = len - 1, // resolves fencepost error calculating arc indices
            opacity = A*Math.cos(P*0 + Z*Math.PI - (index*Math.PI)/L) + V; // ranges from 0 to 1;
        return opacity;
    }

    function onDrag(){
        var len = bg.length,
            total = $(csel).width(),
            min=sun.width()/2+8,
            max=total-min,
            x = sun.offset().left + (min),
            p = (x-min)/(max-min),
            w = sun.width(),
            heightPct = Math.pow((total >> 1) - x, 2) / Math.pow(total >> 1, 2),
            rounded = Math.round(heightPct * 30) + "%";

        bg.each(function(i){
            var op = getOpacity(p,i);
            $(this).css({
                opacity:op
            });
        });
      
        drag.each(function(i){
            var op = getOpacity(p,i);
            $(this).css({
                opacity:op > .5 ? 1 : 0,
                left: sun.css("left"),
                top: sun.css("top"),
                marginTop: rounded
            });
          
        })
    }
})

#container{
  width:100%;
  height:100%;  
}
img.drag {
  position: absolute;
  opacity:-1;
  height:30%;
  bottom:10%;
  transition:opacity 1s;
}
div.bg {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-repeat: repeat;
  background-size:cover;
  animation: mymove 40s linear infinite;
}
@keyframes mymove {
  from { background-position: 0 0; }
  to { background-position: 300px 0; }
}

<div id="container">
  <!-- ADD AS MANY IMAGE AS YOU LIKE HERE IN REVERSE ORDER -->
  
  <!-- NIGHT -->
  <div class="bg" id="night" style="background-image:url(http://i.imgur.com/JK3hIxi.gif);"></div>
  <img class="drag" id="moon" src="http://i.imgur.com/VmFEwrH.png">

  <!-- EVENING -->
  <div class="bg" id="evening" style="background-image:url(http://i.imgur.com/9UqDlgv.png)"></div>
  <img class="drag" id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
  
  <!-- DAY -->
  <div class="bg" id="day" style="background-image:url(http://i.imgur.com/aZty7Mq.png)"></div>
  <img class="drag" id="sun" src="http://i.imgur.com/DGkZYZQ.png">  

</div>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Answer 2

Implement fixed layers with opacity transition.

The getOpacity function receives two parameters, Z (percentage) and the index of the div, using them (along with the element count) to compute opacity while ensuring each .bg is fully displayed at some point during dragging. The function determines and returns the values through the cosine operation.

opacity = A*Math.cos(P*0 + Z*Math.PI - (index*Math.PI)/L) + V

I have generated a visual representation here on desmos.com and included a code snippet to simplify understanding of its functionality.

$(function(){

    var bg = $(".bg"),
        drag = $(".drag"),
        sun = $("#sun"),
        csel = '#container'; // container selector

    _init();

    // hoistorzs

    function _init(){
        onDrag();
        sun.css({
            opacity:1
          })
          .draggable({
            axis: "x",
            containment: csel,
            drag:onDrag
        });
    }
  
    function getOpacity(Z,index){
        Z = 1 - Math.min(Math.max(0,Z),1); // ensure 0 < x < 1
        var len = bg.length;
        var A = 1,
            P = 1,
            V = -A + 1,
            x = 0, // we require y at x=zero
            L = len - 1, // resolves fencepost error calculating arc indices
            opacity = A*Math.cos(P*0 + Z*Math.PI - (index*Math.PI)/L) + V; // ranges from 0 to 1;
        return opacity;
    }

    function onDrag(){
        var len = bg.length,
            total = $(csel).width(),
            min=sun.width()/2+8,
            max=total-min,
            x = sun.offset().left + (min),
            p = (x-min)/(max-min),
            w = sun.width(),
            heightPct = Math.pow((total >> 1) - x, 2) / Math.pow(total >> 1, 2),
            rounded = Math.round(heightPct * 30) + "%";

        bg.each(function(i){
            var op = getOpacity(p,i);
            $(this).css({
                opacity:op
            });
        });
      
        drag.each(function(i){
            var op = getOpacity(p,i);
            $(this).css({
                opacity:op > .5 ? 1 : 0,
                left: sun.css("left"),
                top: sun.css("top"),
                marginTop: rounded
            });
          
        })
    }
})

#container{
  width:100%;
  height:100%;  
}
img.drag {
  position: absolute;
  opacity:-1;
  height:30%;
  bottom:10%;
  transition:opacity 1s;
}
div.bg {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-repeat: repeat;
  background-size:cover;
  animation: mymove 40s linear infinite;
}
@keyframes mymove {
  from { background-position: 0 0; }
  to { background-position: 300px 0; }
}

<div id="container">
  <!-- ADD AS MANY IMAGE AS YOU LIKE HERE IN REVERSE ORDER -->
  
  <!-- NIGHT -->
  <div class="bg" id="night" style="background-image:url(http://i.imgur.com/JK3hIxi.gif);"></div>
  <img class="drag" id="moon" src="http://i.imgur.com/VmFEwrH.png">

  <!-- EVENING -->
  <div class="bg" id="evening" style="background-image:url(http://i.imgur.com/9UqDlgv.png)"></div>
  <img class="drag" id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
  
  <!-- DAY -->
  <div class="bg" id="day" style="background-image:url(http://i.imgur.com/aZty7Mq.png)"></div>
  <img class="drag" id="sun" src="http://i.imgur.com/DGkZYZQ.png">  

</div>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Is it possible to change the background as I move the sun across the screen?

Answer №1

Similar questions

if the input field is empty, eliminate the class

What is the process for importing JSON from an NPM package in Angular version 15?

Unable to display an image element in fullscreen within a modal that is already fullscreen

I'm looking for a way to showcase tasks in Fullcalendar that don't have a set end date

Exploring different options for parsing HTML content and extracting text from strings that do not contain HTML/XML tags

Troubleshooting multiple element visibility problems with jQuery

Positioning a Three.js static CSS2DObject with respect to the camera's perspective

Tips for showcasing a restricted amount of data with Angular.js

Retrieving nested array elements in MongoDB using parent ID element (JavaScript)

Is there a way to showcase interactive HTML content similar to an ePub or eBook without the need to convert the HTML into ePub

How can one manage styling choices in R Markdown while creating a PDF document?

Trap mistakes while utilizing async/await

Saving a JavaScript array as a Redis list: A step-by-step guide

Text field in React's material-ui causes the screen to shake

Is there a way to prevent the omission of zeros at the end in JavaScript when using Number.toString(2)?

Even though I have successfully compiled on Heroku, I am still encountering the dreaded Application Error

Leveraging jQuery to determine the overall number of images within the specified <id>

Activating the Submission of a File in a JQuery Form Plugin

Preserve numerous inputs in local storage

What is the best way to troubleshoot substrings for accurately reading URLs from an object?