HTML5畫布滾動式動畫的接合和分離

我試圖使用this tutorial從一個集合上的圖像動態地添加到畫布，你滾過畫布給動畫的外觀，實現this effect。頁面上有三個div，從上到下：div_1是整頁靜態圖像，div_2是畫布，div_3是整頁靜態圖像。滾動過去div_1後，所需的行爲是：
- 一旦div_1是拿出來看，鼠標/觸控板的滾動動作將停止向下滾動頁面
- 暫停超過div_2 /帆布
- 鼠標/觸控板會開始循環瀏覽集合中的所有圖像（通過畫布顯示），直到顯示最後一個圖像
- 滾動操作將繼續，以繼續將頁面下移至div_3。
HTML5畫布滾動式動畫的接合和分離

我不知道如何使用/脫離我正在綁定的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); 
}

來源

2015-11-23 Dan Klos

你是什麼意思的「搞/脫離」？你想讓事件處理程序不再有效果嗎？然後看看['removeEventListener']（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener）。但是如果你只是想讓它做一個動作，如果當前滾動位置是x，而其他動作是y，那麼看看[if語句]（https://developer.mozilla.org/en-US/docs /Web/JavaScript/Reference/Statements/if...else） – Kaiido

你能不只是在畫布上的所有圖像，並刪除'div_1'和'div_3'？如果您只想通過畫布滾動瀏覽圖像集合，則無需使用div – Canvas

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

我剛纔使用的畫布，達到了預期的輸出，如果你仍然想使用一個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();

來源

2015-11-24 12:27:35 Canvas

HTML5畫布滾動式動畫的接合和分離

回答

相關問題