Created
May 16, 2018 21:19
-
-
Save mmansion/bdd8fed4dcc8f7e7c7a37b37020624da to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/ralokuh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #output { | |
| height: 100px; | |
| width: 300px; | |
| background:green; | |
| font-size: 48px; | |
| } | |
| img { | |
| position: absolute; | |
| width: 1000px; | |
| left: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="output">0</div> | |
| <img id="rainbow" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDuiEY4tQ4CY8wDZdiK7cwTZhS2zOfQqIFgaWzebu2LQgwVh4EFA"></img> | |
| <script id="jsbin-javascript"> | |
| $( document ).ready(function() { | |
| window.addEventListener("wheel", myFunction); | |
| var img = $('#rainbow'); | |
| var pos = 0; | |
| var dir = 0; | |
| var spd = 10; | |
| function myFunction(e) { | |
| spd = (e.deltaY > 20) ? 20 : e.deltaY; | |
| spd = Math.abs(spd); | |
| pos = e.deltaY; | |
| dir = (pos > 0) ? 1 : -1; | |
| //console.log(dir); | |
| scrollImage(dir); // mock socket.io to front-end | |
| } | |
| // ------------------------------ | |
| // FRONT END CODE | |
| function scrollImage(dir) { | |
| var pos = parseInt(img.css('left')) + (dir * spd); | |
| //if(pos > 300) pos = 300; | |
| if(pos < 0) pos = 0; | |
| img.css('left', pos); | |
| console.log(pos); | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">#output { | |
| height: 100px; | |
| width: 300px; | |
| background:green; | |
| font-size: 48px; | |
| } | |
| img { | |
| position: absolute; | |
| width: 1000px; | |
| left: 0; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$( document ).ready(function() { | |
| window.addEventListener("wheel", myFunction); | |
| var img = $('#rainbow'); | |
| var pos = 0; | |
| var dir = 0; | |
| var spd = 10; | |
| function myFunction(e) { | |
| spd = (e.deltaY > 20) ? 20 : e.deltaY; | |
| spd = Math.abs(spd); | |
| pos = e.deltaY; | |
| dir = (pos > 0) ? 1 : -1; | |
| //console.log(dir); | |
| scrollImage(dir); // mock socket.io to front-end | |
| } | |
| // ------------------------------ | |
| // FRONT END CODE | |
| function scrollImage(dir) { | |
| var pos = parseInt(img.css('left')) + (dir * spd); | |
| //if(pos > 300) pos = 300; | |
| if(pos < 0) pos = 0; | |
| img.css('left', pos); | |
| console.log(pos); | |
| } | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #output { | |
| height: 100px; | |
| width: 300px; | |
| background:green; | |
| font-size: 48px; | |
| } | |
| img { | |
| position: absolute; | |
| width: 1000px; | |
| left: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( document ).ready(function() { | |
| window.addEventListener("wheel", myFunction); | |
| var img = $('#rainbow'); | |
| var pos = 0; | |
| var dir = 0; | |
| var spd = 10; | |
| function myFunction(e) { | |
| spd = (e.deltaY > 20) ? 20 : e.deltaY; | |
| spd = Math.abs(spd); | |
| pos = e.deltaY; | |
| dir = (pos > 0) ? 1 : -1; | |
| //console.log(dir); | |
| scrollImage(dir); // mock socket.io to front-end | |
| } | |
| // ------------------------------ | |
| // FRONT END CODE | |
| function scrollImage(dir) { | |
| var pos = parseInt(img.css('left')) + (dir * spd); | |
| //if(pos > 300) pos = 300; | |
| if(pos < 0) pos = 0; | |
| img.css('left', pos); | |
| console.log(pos); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment