All geek questions in one place

Interacting and disabling HTML5 scroll based animation

I am trying to achieve this effect using this tutorial to dynamically add images from the collection to the canvas to give animation when scrolling through the canvas. There are three divs on the page from top to bottom: div_1 is a static image of a full page, div_2 is a canvas, and div_3 is a full-page static image. After scrolling div_1, the desired behavior is:
- After div_1 is out of sight, the mouse / trackpad scroll action will no longer scroll on the page
- pause over div_2 / canvas
- the mouse / trackpad will cycle through all the images (displayed through the canvas) in the collection until until the last image
is displayed - the scroll action resumes to continue the page to div_3.

I cannot figure out how to enable / disable the mouseWheel event that I am attaching to; from the very top of the page, which (for obvious reasons) is related to the cycling of images, but I can’t figure out how to start it after div_1 has left the field of view, and then turn it off after completing the scroll-based animation.

Any help is greatly appreciated.

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);
}
+4
source share
1 answer

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

I just used the canvas to achieve the expected result, if you still want to use the div for the first and last check of my second answer below

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

Source: https://habr.com/ru/post/1617096/

More articles:


All Articles