如何在拖动太阳的同时转换背景？

Question

我创建了一个页面，您可以在其中以弧形拖动太阳图像。当你拖动太阳时，它会从明亮的太阳转变为深色的太阳然后进入月亮。现在我也想要转换背景图片。

如何让当前的天空背景图像逐渐淡入太阳弧中间的夜空（如下图所示）的平铺图像？

这是＆＃34;程序＆＃34;：http://whatisupson.tumblr.com/

＆＃13;

＆＃13;

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;

sun.draggable({
  axis: "x",
  containment: 'body',
  drag: function() {
    var x = sun.offset().left + (sun.width() / 2),
      heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);
    this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";

    dark.css({
      left: x - (sun.width() / 2),
      marginTop: heightPct * 30 + "%"
    });

    $(this).css({
      opacity: (1 - (x / thirdOfThree)) >= 0 ? (1 - (x / thirdOfThree)) : 0,
      marginTop: heightPct * 30 + "%"
    });
    moon.css({
      left: sun.offset().left,
      marginTop: heightPct * 30 + "%"
    });

    if (x > thirdOfThree) {
      dark_opacity = 1 - ((x - thirdOfThree) / (total - x - sun.width() / 2));
      dark.css({
        opacity: dark_opacity
      });
      moon.css({
        opacity: 1
      });
    } else {
      moon.css({
        opacity: 0
      });
      dark.css({
        opacity: 1
      });
    }
  }
});

＆＃13;

body {
  background: url(http://i.imgur.com/aZty7Mq.png);
  animation: mymove 4s linear infinite;
  -webkit-animation: mymove 4s linear infinite;
  -moz-animation: mymove 4s linear infinite;
}
@keyframes mymove {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 40% 0;
  }
}
#moon {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}
#dark_sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}
#sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用固定图层并转换固定图层的不透明度。

getOpacity函数接受两个参数 Z （百分比）和div的索引，并使用这些参数（以及元素数量）计算不透明度，同时确保每个{{ 1}}在拖动过程中的某个时刻完全可见。它设置并返回cos函数中的值。

.bg

我制作了一个可视化created a visualization @desmos.com并添加了一个代码段，让每个人都可以轻松了解其工作原理。

＆＃13;

＆＃13;

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

＆＃13;

$(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); // guarantee 0 < x < 1
        var len = bg.length;
        var A = 1,
            P = 1,
            V = -A + 1,
            x = 0, // we need 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; // 0-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
            });
          
        })
    }
})

＆＃13;

#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; }
}

＆＃13;

＆＃13;

＆＃13;