📌Requirements Q37: 스크롤 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../asset/question.css">
<title>Document</title>
<style>
body {
margin: 0;
transition: all 1s;
}
.section {
width: 800px;
margin: 0px auto;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 20px;
padding-bottom: 400px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<!-- 스크롤바 이동에 따라 배경색을 바꾸시오. -->
<div class="section">
<h1>Index</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, commodi, natus ex, iste fugiat provident doloremque mollitia numquam nulla perferendis ab. Repudiandae ullam veniam sit dolor quibusdam nemo excepturi impedit.</p>
</div>
<div class="section">
<h1>About me</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eius possimus recusandae repellat labore in officia eligendi quas sit non ipsum dolorem temporibus sed, enim omnis voluptas, dicta repellendus qui. Culpa, repellat. Earum doloremque neque ullam beatae quia iste id, facilis quos veniam sint similique asperiores culpa hic minus cupiditate maiores praesentium magnam dolorum inventore delectus. Natus, magni saepe doloribus architecto animi earum dolorem ipsam perferendis voluptates molestiae molestias nostrum ducimus. Consequatur, possimus voluptas sapiente iusto nostrum impedit mollitia velit quibusdam natus, accusantium, nobis laboriosam amet! Dolorum culpa, nihil sunt doloremque corrupti, reiciendis voluptatum cupiditate dicta, dolorem expedita similique pariatur.</p>
</div>
<div class="section">
<h1>Career</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil illum voluptas aut architecto similique quo accusantium deleniti assumenda impedit minima error repellat id, ad nisi accusamus deserunt enim numquam voluptatum esse iusto consequatur consequuntur labore. Asperiores repellat, quam, est iure laboriosam sit ea tempora beatae accusantium neque earum quod ab.</p>
</div>
<div class="section">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, pariatur. Dolorum voluptatibus enim magni ex. At amet rerum atque delectus? Veniam delectus sunt beatae. Est rem fugiat placeat suscipit vitae praesentium dolore. Tenetur itaque illum facere quaerat nulla eos animi! Eos deserunt saepe enim, ea laborum, velit obcaecati quisquam harum molestias minus laudantium maxime minima. Reiciendis minima at natus fugit. Officia, repudiandae? Amet ratione obcaecati voluptatibus cumque excepturi quis? Nemo tenetur odit deserunt mollitia beatae quas accusamus laudantium vero sequi, rem nostrum? Earum ipsum dignissimos ad nobis maiores accusantium officia perspiciatis aspernatur! Eos pariatur hic saepe dolor in itaque voluptate commodi. Maxime excepturi exercitationem culpa consequatur error tempora eum consectetur officia, voluptate voluptates doloremque. Fugit rerum molestiae, inventore quidem dolorum quibusdam nam tenetur sapiente libero quasi sequi perspiciatis cupiditate earum non nihil beatae sint in architecto, ipsa magni error qui placeat. Earum temporibus quam velit iste blanditiis tempore nam porro.</p>
</div>
<div class="section">
<h1>Education</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusamus numquam quis libero vel harum eligendi laboriosam, debitis, modi rem minus beatae eum, reiciendis obcaecati fuga similique. Qui quo beatae voluptate assumenda nostrum quidem nihil, est magnam debitis consectetur, sequi fuga repudiandae animi in quia molestias consequatur, reiciendis modi laudantium architecto hic amet a neque. Reiciendis ducimus excepturi suscipit repellendus. Minus, expedita earum quia quas amet cupiditate officia maxime ducimus enim a vero voluptatem fugiat omnis repellat ut quisquam laborum ipsam ipsa. Eius magni ipsa maiores aliquid deleniti distinctio, praesentium esse eos, optio officiis accusamus delectus. Mollitia temporibus minima, sit natus blanditiis nisi ipsum excepturi, ipsa magnam aperiam hic animi placeat! Consequuntur maiores suscipit accusantium nostrum ut architecto perferendis cum molestias, odit, aperiam quaerat illum molestiae asperiores soluta! Maxime adipisci quod eaque quibusdam illo? Totam ad cum quisquam suscipit magnam molestiae earum doloremque, numquam asperiores harum voluptate iusto quod exercitationem animi incidunt optio quaerat aliquid. Debitis id magnam quibusdam totam quam dicta minima eveniet nam labore temporibus, minus veniam sequi explicabo! Soluta quae, quos ab officia a, doloremque, culpa voluptas perspiciatis aliquam rem sit? Quo praesentium assumenda numquam libero in eius cupiditate debitis voluptates excepturi, ipsam distinctio dicta molestiae consequuntur.</p>
</div>
<script>
const list = document.getElementsByClassName('section');
const s1 = list[0].getBoundingClientRect().top;
const s2 = list[1].getBoundingClientRect().top - 100;
const s3 = list[2].getBoundingClientRect().top - 100;
const s4 = list[3].getBoundingClientRect().top - 100;
const s5 = list[4].getBoundingClientRect().top - 100;
window.onscroll = function() {
//console.log(window.scrollY);
if (window.scrollY < s2) {
console.log(1);
document.body.bgColor = 'white';
} else if (window.scrollY < s3) {
console.log(2);
document.body.bgColor = 'tomato';
} else if (window.scrollY < s4) {
console.log(3);
document.body.bgColor = 'gold';
} else if (window.scrollY < s5) {
console.log(4);
document.body.bgColor = 'cornflowerblue';
} else {
console.log(5);
document.body.bgColor = 'yellowgreen';
}
};
//좌표계와 상관없이 현재 좌표값 확인
//console.log(document.getElementsByClassName('section')[1].getBoundingClientRect().top);
</script>
</body>
</html>[JavaScript] Scroll Event
🍁Scroll Event 기본 코드 Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia veniam quisquam voluptatibus facilis iste ad sequi? Ducimus, optio fugiat. Tempora non fugiat nobis soluta a quia, aliquam mollitia eos. Soluta ma
isaac-christian.tistory.com
📌Requirements Q38: 클릭 위치에 이미지 이동 (기본)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
.main {
position: static;
}
#chromi {
position: absolute;
left: 0px;
top: 0px;
transition: all 1s;
width: 10em;
height: 10em;
}
</style>
</head>
<body oncontextmenu='return false;' ondragstart='return false;' onselectstart='return false;'>
<!-- 크로미를 마우스 클릭한 장소로 이동시키시오. -->
<img src="../../asset/images/chromi.png" id="chromi">
<script>
var chromi;
window.onload = function() {
chromi = document.getElementById("chromi");
};
window.onmousedown = function() {
chromi.style.left = event.clientX - 64 + "px";
chromi.style.top = event.clientY - 64 + "px";
};
</script>
</body>
</html>
📌Requirements Q39: 클릭 위치에 이미지 이동 (등속)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
.main {
position: static;
}
#chromi {
position: absolute;
left: 0px;
top: 0px;
width: 10em;
height: 10em;
transition-property: all;
transition-timing-function: linear;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
크로미를 마우스 클릭한 장소로 이동시키시오.
등속으로 이동시키시오.
-->
<img src="../../asset/images/chromi.png" id="chromi">
<script>
var chromi;
var oldX = 0;
var oldY = 0;
window.onload = function() {
chromi = document.getElementById("chromi");
};
window.onmousedown = function() {
var dis_x = Math.abs(oldX - event.clientX);
var dis_y = Math.abs(oldY - event.clientY);
oldX = event.clientX;
oldY = event.clientY;
//c^2 = a^2 + b^2
var duration = Math.sqrt(dis_x * dis_x + dis_y * dis_y);
//document.title = dis_x + ", " + dis_y + ", " + (duration / 1000);
chromi.style.transitionDuration = duration / 1000 + "s";
chromi.style.left = event.clientX - 64 + "px";
chromi.style.top = event.clientY - 64 + "px";
};
</script>
</body>
</html>
📌Requirements Q40: 마우스 경로를 따라 이미지 이동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>chromi
.main {
position: static;
}
#chromi {
position: absolute;
left: 0px;
top: 50px;
width: 10em;
height: 10em;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
크로미를 마우스 경로를 따라 이동시키시오.
왼쪽 Ctrl키를 누른채 마우스를 움직여 경로를 기록한다.
왼쪽 Ctrl키를 떼고 경로 기록을 중단한다.
시작 버튼을 눌러 크로미를 이동시킨다.
-->
<input type="button" value="시작" id="btn1">
<img src="../../asset/images/chromi.png" id="chromi">
<script>
var chromi;
var pathX = [];
var pathY = [];
var timer = 0;
window.onload = function () {
chromi = document.getElementById("chromi");
document.getElementById("btn1").onclick = function () {
console.log(pathX.length);
timer = setInterval(function () {
chromi.style.left = pathX[0] - 64 + "px";
chromi.style.top = pathY[0] - 64 + "px";
pathX.shift();
pathY.shift();
if (pathX.length == 0) {
clearInterval(timer);
}
}, 21);
};
};
window.onmousemove = function () {
if (event.ctrlKey) {
pathX.push(event.clientX);
pathY.push(event.clientY);
}
};
</script>
</body>
</html>
📌Requirements Q41: 마우스 궤적에 따라 이미지 이동 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
#main, .main {
position: static;
}
.chromi {
position: absolute;
left:0px;
top: 0px;
width: 10em;
height: 10em;
display: none; }
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
이동하는 마우스를 따라 크로미를 이동시키시오.
마우스의 궤적을 기록하는 큐 역할의 배열이 필요하다.
let pathX = [];
let pathY = [];
pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 크로미의 좌표로 지정한다.
-->
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<script>
var chromis;
var pathX = [];
var pathY = [];
window.onload = function() {
chromis = document.getElementsByClassName("chromi");
for (var i=0; i<chromis.length; i++) {
chromis[i].style.zIndex = (chromis.length-i);
}
};
window.onmousemove = function() {
pathX.push(event.clientX);
pathY.push(event.clientY);
if (pathX.length > chromis.length) {
pathX.shift();
pathY.shift();
}
movechromi();
};
function movechromi() {
for (var i=0; i<chromis.length; i++) {
if (pathX[i] != null) {
chromis[i].style.left = pathX[i] - 64 + "px";
chromis[i].style.top = pathY[i] - 64 + "px";
chromis[i].style.display = "block";
}
}
}
</script>
</body>
</html>
📌Requirements Q41: 마우스 궤적에 따라 이미지 이동 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
#main, .main {
position: static;
}
body { background-color: #444; }
#box {
border: 10px solid black;
width: 1000px;
height: 700px;
margin: 50px auto;
overflow: hidden;
position: relative;
left: 0px;
top: 0px;
background-color: white; }
.chromi {
position: absolute;
left:0px;
top: 0px;
width: 7em;
height: 7em;
display: none; }
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
이동하는 마우스를 따라 크로미를 이동시키시오.
마우스의 궤적을 기록하는 큐 역할의 배열이 필요하다.
let pathX = [];
let pathY = [];
pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 크로미의 좌표로 지정한다.
-->
<div id="box">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
<img src="../../asset/images/chromi.png" class="chromi">
</div>
<script>
var chromis;
var isDown = false;
var pathX = [];
var pathY = [];
var box;
window.onload = function() {
box = document.getElementById("box");
chromis = document.getElementsByClassName("chromi");
for (var i=0; i<chromis.length; i++) {
chromis[i].style.zIndex = (chromis.length-i);
}
};
window.onmousedown = function() {
isDown = true;
};
window.onmouseup = function() {
isDown = false;
};
window.onmousemove = function() {
pathX.push(event.clientX);
pathY.push(event.clientY);
if (pathX.length > chromis.length) {
pathX.shift();
pathY.shift();
}
movechromi();
};
function movechromi() {
for (var i=0; i<chromis.length; i++) {
if (pathX[i] != null) {
chromis[i].style.left = pathX[i] - 64 - box.offsetLeft + "px";
chromis[i].style.top = pathY[i] - 64 - box.offsetTop + "px";
chromis[i].style.display = "block";
}
}
}
</script>
</body>
</html>