HTML5 基于画布滚动的动画引人入胜和脱离关系

Question

HTML5 基于画布滚动的动画引人入胜和脱离关系

Dan*_*los 5 html javascript jquery canvas html5-canvas

我正在尝试使用本教程将图像从集合动态添加到画布来实现这种效果，以便在您滚动画布时提供动画外观。页面从上到下三个div：div_1是整页静态图片，div_2是画布，div_3是整页静态图片。滚动经过 div_1 后，所需的行为是： - 一旦 div_1 不在视野范围内，鼠标/触控板的滚动动作将停止向下滚动页面 - 在 div_2/canvas 上暂停 - 鼠标/触控板将开始循环浏览所有集合中的图像（通过画布显示），直到显示最后一个图像 - 滚动操作将恢复以继续向下到 div_3 页面。

我不知道如何参与/解除我正在绑定的 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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Can*_*vas 2

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();
};

Run Code Online (Sandbox Code Playgroud)

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

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

javascript（也使用div）

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();

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	3469 次
最近记录：	10 年，5 月前