Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Study</title>
- <style>
- html,
- body {
- display: flex;
- width: 95%;
- height: 95%;
- min-width: 810px;
- min-height: 410px;
- align-items: center;
- justify-content: center;
- margin: 8px 15px;
- }
- .centered {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- padding: 50px;
- }
- #main {
- width: 100%;
- height: 50%;
- flex-direction: column;
- }
- #rgbContainer {
- width: 100%;
- height: 50%;
- background-color: grey;
- border: 2px solid black;
- }
- .colorBlock {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 30%;
- height: 95%;
- margin: auto;
- border: 4px solid white;
- }
- #red {
- background-color: red;
- }
- #green {
- background-color: green;
- }
- #blue {
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <div id="main" class="centered">
- <div id="rgbContainer" class="centered" tabindex="1">
- <div id="red" class="colorBlock">
- </div>
- <div id="green" class="colorBlock">
- </div>
- <div id="blue" class="colorBlock">
- </div>
- </div>
- </div>
- <script>
- 'use strict'
- let colorR = 0;
- let colorG = 0;
- let colorB = 0;
- function onWheelR(event) {
- event.preventDefault();
- const rgbContainer = document.getElementById('rgbContainer');
- colorR += event.deltaY * -0.1;
- colorR = Math.min(Math.max(0, colorR), 255);
- rgbContainer.style.backgroundColor = `rgb(${colorR}, ${colorG}, ${colorB})`;
- console.log(`${event.deltaY} <-> ${event.deltaY * -0.1} -> ${colorR}`);
- }
- function onWheelG(event) {
- event.preventDefault();
- const rgbContainer = document.getElementById('rgbContainer');
- colorG += event.deltaY * -0.1;
- colorG = Math.min(Math.max(0, colorG), 255);
- rgbContainer.style.backgroundColor = `rgb(${colorR}, ${colorG}, ${colorB})`;
- console.log(`${event.deltaY} <-> ${event.deltaY * -0.1} -> ${colorG}`);
- }
- function onWheelB(event) {
- event.preventDefault();
- const rgbContainer = document.getElementById('rgbContainer');
- colorB += event.deltaY * -0.1;
- colorB = Math.min(Math.max(0, colorB), 255);
- rgbContainer.style.backgroundColor = `rgb(${colorR}, ${colorG}, ${colorB})`;
- console.log(`${event.deltaY} <-> ${event.deltaY * -0.1} -> ${colorB}`);
- }
- function onWheel(event) {
- event.preventDefault();
- const rgbContainer = document.getElementById('rgbContainer');
- const targetId = event.target.id;
- if (targetId == 'red') {
- colorR += event.deltaY * -0.1;
- colorR = Math.min(Math.max(0, colorR), 255);
- } else if (targetId == 'green') {
- colorG += event.deltaY * -0.1;
- colorG = Math.min(Math.max(0, colorG), 255);
- }
- else if (targetId == 'blue') {
- colorB += event.deltaY * -0.1;
- colorB = Math.min(Math.max(0, colorB), 255);
- }
- rgbContainer.style.backgroundColor = `rgb(${colorR}, ${colorG}, ${colorB})`;
- //console.log(`${event.deltaY} <-> ${event.deltaY * -0.1} -> ${colorB}`);
- }
- //const red = document.getElementById('red');
- //const green = document.getElementById('green');
- //const blue = document.getElementById('blue');
- //red.addEventListener('wheel', onWheelR);
- //green.addEventListener('wheel', onWheelG);
- //blue.addEventListener('wheel', onWheelB);
- const rgbContainer = document.getElementById('rgbContainer');
- rgbContainer.addEventListener('wheel', onWheel);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement