HTML5 canvas 基于滚动的动画吸引和脱离

Question

我正在尝试实现 this effect using this tutorial 将图像从集合中动态添加到 canvas 以在您滚动经过 canvas 时呈现动画效果。页面从上到下共有三个div：div_1是整页静态图，div_2是canvas，div_3是整页静态图。滚动过去 div_1 后，所需的行为是：
- 一旦 div_1 不可见，mouse/trackpad 的滚动操作将停止向下滚动页面
- 暂停 div_2/canvas
- mouse/trackpad 将开始循环浏览集合中的所有图像（通过 canvas 显示），直到显示最后一张图像
- 滚动操作将继续向下滚动到 div_3。

我不知道如何 engage/disengage 我绑定的 mouseWheel 事件；从页面的最顶部开始，它（可以理解）与循环图像相关联，但是我想不出一种方法来在 div_1 不在视图中时触发它，然后在基于滚动的动画出现时脱离它完成。

非常感谢任何帮助。

html.erb

<body>

  <div class="div_1">
    <!-- Full screen image to  scroll past -->
  </div>

  <div class="div_2">
    <canvas id="background" width="1280" height="720"></canvas>
  </div>

  <div class="div_3">
    <!-- Full screen image to scroll to once animation is complete -->
  </div>

</body>

Javascript

var totalImages = IMAGE_URLS.length; 
var images = new Array();
for(var i = 0; i < totalImages; i++) {
    var img = new Image;
    img.src = IMAGE_URLS[i];
    images.push(img);
}


var currentLocation = 0;
var canv;
var context;
$(document).ready(function(){
  canv = document.getElementById('background');
  context = canv.getContext('2d');
  mouseWheel();

  // See above for where this gets called

});

var mouseWheel = function() {
  window.addEventListener('mousewheel', function(e) {
    e.preventDefault(); // No scroll

    // The following equation will return either a 1 for scroll down
    // or -1 for a scroll up
    var delta = Math.max(-1, Math.min(1, e.wheelDelta));

    // This code mostly keeps us from going too far in either direction
    if(delta == -1) currentLocation += .5;
    if(delta == 1) currentLocation -= .5`;
    if(currentLocation < 0) currentLocation = 0;
    if(currentLocation > images.length)
      currentLocation = images.length;

    // See below for the details of this function
    setImage(currentLocation);
  });
}

var setImage = function(newLocation) {
    // drawImage takes 5 arguments: image, x, y, width, height
    context.drawImage(images[newLocation], 0, 0, 1280, 720);
}

Answer 1

jsFiddle : https://jsfiddle.net/jvLk0vhp/1/

javascript :

var images = new Array();
var currentLocation = 0;
var totalImages = 7;

for (var i = 0; i < totalImages; i++) {
    var img = new Image;
    switch (i) {
        case 0:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/mewtwo.png";
            break;
        case 1:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/keldeo-ordinary.png";
            break;
        case 2:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/darkrai.png";
            break;
        case 3:
            img.src = "http://floatzel.net/pokemon/black-white/sprites/images/5.png";
            break;
        case 4:
            img.src = "http://vignette1.wikia.nocookie.net/capx/images/0/03/001.png/revision/latest?cb=20140322003659";
            break;
        case 5:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/absol.png";
            break;
        case 6:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/dewgong.png";
            break;
        case 7:
            img.src = "http://orig05.deviantart.net/e770/f/2013/008/c/6/froakie_by_baconboy914-d5qvrjo.gif";
            break;
    }

    images.push(img);
}

var c = document.getElementById("background");
var ctx = c.getContext("2d");

var mouseWheel = function () {
    window.addEventListener('mousewheel', function (e) {
        e.preventDefault(); // No scroll

        // The following equation will return either a 1 for scroll down
        // or -1 for a scroll up
        var delta = Math.max(-1, Math.min(1, e.wheelDelta));

        // This code mostly keeps us from going too far in either direction
        if (delta == -1) currentLocation += 1;
        if (delta == 1) currentLocation -= 1;
        if (currentLocation < 0) currentLocation = 0;
        if (currentLocation >= (totalImages - 1)) currentLocation = (totalImages - 1);
        console.log("Current location " + currentLocation);

        // See below for the details of this function
        setImage(currentLocation);
    });
}

var setImage = function (newLocation) {
    // drawImage takes 5 arguments: image, x, y, width, height
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(images[newLocation], 0, 0, 150, 150);
}

images[0].onload = function () {
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(images[currentLocation], 0, 0, 150, 150);
    mouseWheel();
};

我刚刚使用 canvas 来实现预期的输出，如果您仍想在第一个和最后一个中使用 div，请检查下面我的第二个答案

jsfiddle : https://jsfiddle.net/jvLk0vhp/2/

javascript（也使用 divs）

var images = new Array();
var currentLocation = 0;
var totalImages = 7;
var div1 = document.getElementById("id_1");
var div2 = document.getElementById("id_2");
var div3 = document.getElementById("id_3");

div2.style.display = "none";
div3.style.display = "none";

for (var i = 0; i < totalImages; i++) {
    var img = new Image;
    switch (i) {
        case 1:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/keldeo-ordinary.png";
            break;
        case 2:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/darkrai.png";
            break;
        case 3:
            img.src = "http://floatzel.net/pokemon/black-white/sprites/images/5.png";
            break;
        case 4:
            img.src = "http://vignette1.wikia.nocookie.net/capx/images/0/03/001.png/revision/latest?cb=20140322003659";
            break;
        case 5:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/absol.png";
            break;
        case 6:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/dewgong.png";
            break;
    }

    images.push(img);
}

var c = document.getElementById("background");
var ctx = c.getContext("2d");

var mouseWheel = function () {
    window.addEventListener('mousewheel', function (e) {
        e.preventDefault(); // No scroll

        // The following equation will return either a 1 for scroll down
        // or -1 for a scroll up
        var delta = Math.max(-1, Math.min(1, e.wheelDelta));

        // This code mostly keeps us from going too far in either direction
        if (delta == -1) currentLocation += 1;
        if (delta == 1) currentLocation -= 1;
        if (currentLocation < 0) currentLocation = 0;
        if (currentLocation >= (totalImages - 1)) currentLocation = (totalImages - 1);
        console.log("Current location " + currentLocation);

        // See below for the details of this function
        setImage(currentLocation);
    });
}

var setImage = function (newLocation) {
    // drawImage takes 5 arguments: image, x, y, width, height
    if (newLocation == 0) {
        div1.style.display = "block";
        div2.style.display = "none";
        div3.style.display = "none";
    } else if (newLocation == (totalImages - 1)) {
        div1.style.display = "none";
        div2.style.display = "none";
        div3.style.display = "block";
    } else {
        div1.style.display = "none";
        div2.style.display = "block";
        div3.style.display = "none";

        ctx.fillRect(0, 0, c.width, c.height);
        ctx.drawImage(images[newLocation], 0, 0, 150, 150);
    }
}


ctx.fillRect(0, 0, c.width, c.height);
ctx.drawImage(images[currentLocation], 0, 0, 150, 150);
mouseWheel();

HTML5 canvas 基于滚动的动画吸引和脱离

HTML5 canvas scroll-based animation engaging and disengaging

html

javascript

jquery

canvas

html5-canvas