Menu
I'm trying to achieve this effect using this tutorial to dynamically add on images from a collection to a canvas to give the appearance of animation as you scroll past the canvas. There are three divs on the page top to bottom: div_1 is a full page static image, div_2 is the canvas, and div_3 is a full-page static image. After scrolling past div_1, the desired behavior is:
- Once div_1 is out of view, the scrolling action of the mouse/trackpad would cease scrolling down the page
- pause over div_2/canvas
- the mouse/trackpad would begin cycling through all of the images (displayed via the canvas) in the collection until the last image is displayed
- the scrolling action would resume to continue down the page to div_3.
I cannot figure out how to engage/disengage the mouseWheel event that I am tying into; from the very top of the page it's (understandably) tied into cycling the images, but I can't figure out a way to trigger it once div_1 is out of view and then disengage it once the scroll-based animation has completed.
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);
}
533
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 have just used a canvas to achieve the expected output, if you still want to use a div for the first and last check my second answer below
jsfiddle : https://jsfiddle.net/jvLk0vhp/2/
javascript (also using 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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
