WEB/JavaScript
[JavaScript] ์คํฌ๋กค ์ด๋ฒคํธ : ๋ฐฐ๊ฒฝ์, ๊ธ์จ์ ๋ณ๊ฒฝ
developer of the night sky
2023. 10. 12. 16:34
๐ป์คํฌ๋กค ์ด๋ฒคํธ๐ป
ํน์ ์์น๋ก ์คํฌ๋กค์ด ๋ด๋ ค๊ฐ๋ฉด ๋ฐฐ๊ฒฝ์๊ณผ ๊ธ์จ์์ ๋ฐ๊พผ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
transition: all 1.5s;
}
</style>
</head>
<body>
<h1>Title</h1>
<!-- (p>lorem)*50 -->
</body>
</html>
์คํฌ๋กค ์์น ํ์ธํ๊ธฐ
<script>
window.onscroll = function() {
console.log(window.scrollY);
};
</script>
window.scrollY : ํ์ฌ ๋ฌธ์๋ ์์์ ์ธ๋ก(์์ง) ์คํฌ๋กค ์์น๋ฅผ ๋ํ๋ด๋ ์์ฑ์ด๋ค.
document.getElementById('div1').getBoundingClientRect().topgetBoundingClientRect().top ์ผ๋ก ๋ฌธ์ ์ข์ธก ์๋จ ๊ธฐ์ค์ผ๋ก 'div1' ์ ์์น๋ฅผ ์ ์ ์๋ค.
div1 ์์๊ฐ ํ๋ฉด์ ๋งจ ์์ ์์นํ๊ณ ์๋ค๋ฉด, ์์ ์ฝ๋๋ 0์ ๋ฐํํ๋ค.
div1์ด ํ๋ฉด ์์ชฝ์์ ๋ด๋ ค๊ฐ ์์น์ ์๋ค๋ฉด, ์์์ ๊ฐ์ด ๋ฐํํ๋ฉฐ, div1์ด ํ๋ฉด ์๋์ ์๋ค๋ฉด, ์์์ ๊ฐ์ด ๋ฐํํ๋ค.
์ด๋ฒคํธ
<script>
window.onscroll = function() {
if (window.scrollY > 1500 && window.scrollY <= 2500){
document.body.style.backgroundColor = 'black';
document.body.style.color = 'white';
} else {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
}
};
</script>
์ ์ฒด์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
transition: all 1.5s;
}
</style>
</head>
<body>
<h1>Title</h1>
<!-- (p>lorem)*50 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam laudantium tenetur pariatur consectetur qui aliquid at voluptates consequuntur sed ipsam facere veritatis est quibusdam ab obcaecati, possimus fugiat omnis cum!</p>
<p>Voluptatum nesciunt explicabo officia, provident blanditiis doloribus beatae repudiandae numquam aspernatur eum ea dicta, voluptates iste, animi quod! Cum voluptatum explicabo fugiat ea repellendus consequuntur doloremque possimus dolores, temporibus magni.</p>
<p>Maxime, veniam? Ipsa illo animi in omnis! Qui repellat accusantium aut fugiat natus tempora error deserunt dolor eum modi autem aliquid, nemo fugit pariatur accusamus explicabo est. Totam, debitis numquam.</p>
<p>Assumenda vitae repudiandae, repellendus harum consequuntur odit? Nam unde ullam laudantium. Neque, earum nam. Quam eos, tempore quibusdam iste cum repellendus dolore reiciendis similique deleniti numquam maiores, consequuntur, non facilis?</p>
<p>Incidunt cumque dolor eos amet fugiat, sed distinctio. Similique eligendi iste iure itaque et, expedita aperiam. Sequi ullam excepturi soluta consectetur eos vel sit? Pariatur officia voluptatum recusandae nobis magni.</p>
<p>Sed deleniti assumenda, libero magnam eum officiis eligendi facere? Nesciunt sequi culpa reiciendis laudantium delectus explicabo accusamus esse, quos ad quam laboriosam inventore! Nemo inventore aspernatur quam quia non! Unde.</p>
<p>Ad sunt, ullam explicabo atque tempore dolores sapiente voluptatem quis aspernatur ipsa consequuntur at maxime quisquam velit animi vel eaque dignissimos, facere culpa nam in nihil incidunt. Optio, qui architecto.</p>
<p>Consequuntur eius quia, nam ea ut amet. Quod, consequatur quia aut necessitatibus provident ex amet, exercitationem tempore qui natus fugiat quos consequuntur voluptatibus? Quas id, fuga dolorem voluptatibus amet adipisci.</p>
<p>Neque veniam amet dolorum facere tempore vitae id rem deleniti quisquam sapiente sed a alias dolor eius, asperiores assumenda veritatis sit quam? Ipsa velit odit dignissimos veritatis quam deleniti incidunt.</p>
<p>In velit quis ipsam aut magnam amet totam blanditiis iusto, labore eligendi repudiandae fugit nulla voluptatem quae rem? Asperiores porro deleniti repudiandae quam excepturi consectetur, fuga sed incidunt nulla impedit?</p>
<p>Dicta vel quam rem velit ratione autem voluptatum quo hic, in neque ducimus nulla culpa molestias magni quidem ipsum et cumque consequatur accusamus suscipit amet voluptate necessitatibus? Iste, quaerat facilis!</p>
<p>Suscipit saepe consequuntur alias minus distinctio. Corrupti nam ducimus cum, minima nihil voluptas, hic culpa quis fugit doloribus odio ullam dolorem expedita. Delectus rem excepturi tenetur odio ab consectetur ipsa!</p>
<p>Ut, molestiae fugit adipisci sint soluta labore iste, at est molestias voluptate atque odio saepe possimus nesciunt. Ratione a aliquam ea vero vel, maiores magni necessitatibus dicta, ad doloribus voluptatum.</p>
<p>Labore optio quo numquam corporis reiciendis, nulla quod perferendis commodi, ullam unde libero expedita. Obcaecati quaerat ea, adipisci voluptas architecto inventore temporibus consectetur provident officia vero soluta, perspiciatis incidunt praesentium?</p>
<p>Voluptate earum sequi illum optio tempore, perspiciatis dolorem mollitia veniam quaerat iure quos qui hic, facilis facere possimus, cupiditate officiis quia est. Voluptates quas, reiciendis quibusdam dolore tempora voluptas impedit?</p>
<p>Aspernatur sit at maiores nam hic necessitatibus nulla provident beatae cum facere voluptas, saepe totam nihil consequuntur. Sunt veritatis ut non error, tempora suscipit quibusdam adipisci deleniti expedita dolorem vel.</p>
<p>Veritatis, libero repellat, quam id consequatur sit voluptates aspernatur possimus reprehenderit fugit voluptas, quod repellendus tempore consectetur consequuntur laborum facere est maxime a? Molestiae atque libero, voluptatum maxime modi placeat!</p>
<p>Eaque, quos obcaecati eligendi soluta facilis perferendis ab reiciendis dolorem iure voluptatibus laudantium doloremque veritatis! Distinctio praesentium unde laboriosam natus nulla quos, id in aspernatur itaque quod quia eaque eos.</p>
<p>Ipsam, quaerat? Quibusdam praesentium ab rem nihil quasi nulla quam ducimus voluptas error tempora beatae fugiat inventore iure, reprehenderit suscipit natus culpa. Amet ad, delectus exercitationem unde culpa deleniti doloremque.</p>
<p>Dolor officia ut ea iure, optio possimus nam accusamus atque neque, autem voluptatibus unde doloremque aliquam, amet rem tempore! Explicabo ab quia consectetur totam ipsam. Praesentium nulla vitae fugit quo.</p>
<p>Tempora neque excepturi officia ex est! Ea eveniet dignissimos tempora sunt iusto magni soluta aut? Eveniet pariatur soluta, voluptatibus enim culpa odit suscipit quae libero necessitatibus accusantium, maiores, dicta facilis.</p>
<p>Saepe aliquam unde sequi debitis eum doloribus dolorem, laudantium provident aliquid non alias est facere, cum commodi odio quam exercitationem adipisci ad harum obcaecati. Eius nisi ut totam commodi et?</p>
<p>Culpa porro reiciendis, harum maxime quis eum, quidem repellendus ad voluptatem id delectus? Dolores impedit quasi maiores saepe nam alias id eaque? Maxime omnis quo voluptatem officiis rerum eius temporibus.</p>
<p>Iste architecto nostrum eum inventore eveniet blanditiis quidem atque porro similique ullam, repellendus ad molestiae voluptatem! Culpa alias odit architecto, laboriosam perferendis assumenda non sint consequatur pariatur eaque eos commodi.</p>
<p>Beatae adipisci minus repudiandae ipsa similique! Voluptatibus est accusantium eaque voluptates, excepturi ducimus, quidem dolores quo numquam unde illo debitis amet reiciendis rerum maxime! Qui accusantium deleniti saepe est quaerat.</p>
<p>Fugit quam sit cumque! Perferendis, nihil quasi ea officiis magnam voluptate accusantium ipsum voluptatem facere quas atque veniam molestiae omnis explicabo molestias cumque corporis qui numquam? Dicta vero ducimus modi.</p>
<p>Nulla quo aspernatur vitae doloribus, voluptas excepturi dolores ad cum nobis iste blanditiis odit eveniet veritatis harum nemo deleniti nihil neque ipsum id natus, perspiciatis deserunt. Incidunt velit nostrum sequi!</p>
<p>Accusamus voluptatibus corporis a in quam non ut earum ex. Voluptatum eum cum ipsam adipisci, eos explicabo sequi, labore vel expedita quis ad ipsum harum iure neque quas sed ea?</p>
<div id="div1">ํ๊ธธ๋</div>
<p>Fugiat reprehenderit cupiditate doloremque rem deserunt odio id omnis voluptas consectetur tenetur qui cum dignissimos eum, minima veritatis. Blanditiis iure quae voluptatibus incidunt architecto commodi natus libero odit, possimus magnam.</p>
<p>Dolore aliquid iusto magni, ipsam voluptatem corporis quasi voluptas, harum, delectus laboriosam consequuntur omnis est explicabo numquam. Aliquid magni, esse impedit exercitationem modi fugiat repellat quae assumenda, dicta, ex in.</p>
<p>Facilis vero ipsam labore optio nisi velit vel recusandae tenetur, illum vitae beatae fugiat ex at quasi excepturi mollitia non eius cum dolorum esse officiis delectus doloremque. Aliquam, doloremque voluptates!</p>
<p>Nesciunt quod nemo ut libero architecto veritatis optio quam voluptates quas saepe consectetur aliquam at, nostrum facilis praesentium porro voluptate laborum voluptatem, sunt nisi ipsa, nulla harum magnam provident. Odio!</p>
<p>Quos omnis adipisci fuga veritatis, iure totam ex ullam sunt quaerat itaque porro tempore molestiae sed rerum dolorem tempora, quod eum praesentium aperiam distinctio dolores et ducimus. Consectetur, deleniti commodi!</p>
<p>Saepe aspernatur sit tempora at, nulla id similique animi praesentium ratione labore, fugiat cum, rerum accusantium dicta. Cupiditate reiciendis, alias suscipit totam aliquam voluptatem provident veniam nulla! Repellat, assumenda dolorum.</p>
<p>Voluptatibus libero deleniti consectetur unde doloremque quasi? Maxime, voluptatibus nemo laudantium enim optio eligendi minus eveniet quod distinctio repellendus reiciendis nam? Quasi ipsum id dolores. Dolor maiores quia enim qui!</p>
<p>Fuga, aliquam a magni cum minus nobis voluptates repellat dicta iusto? Beatae, sed, natus excepturi nihil aspernatur ad, quod minus autem laudantium consequuntur laboriosam! Est, assumenda! Eveniet voluptate iste beatae?</p>
<p>Labore, dolorum. Ratione id modi debitis labore atque nihil, ab culpa error nulla. Soluta voluptatibus optio, corrupti nam quam dolorum assumenda. Ipsum porro possimus maiores laudantium illum ad modi perspiciatis.</p>
<p>Quidem velit voluptatem, amet earum aspernatur ratione aut in numquam, dolores, autem voluptates cum eum incidunt. Odio eos beatae omnis hic sequi, dolor qui a consectetur aspernatur velit iste itaque!</p>
<p>Unde possimus impedit rem iusto fuga, hic modi qui omnis facere libero esse maiores eius eum repellendus iste aspernatur, tempore quod praesentium amet eaque. Consectetur maiores dolorum provident voluptate voluptatibus.</p>
<p>Illo, ducimus dignissimos error magnam voluptate quis placeat eum ea libero? Repellendus suscipit adipisci perspiciatis minus quo in, labore a omnis placeat debitis similique vitae totam accusamus dignissimos, laborum doloribus?</p>
<p>Unde odio fugiat hic expedita maiores eius officia molestias! Nulla commodi vitae placeat, quaerat et tempora magni ratione aliquam ad accusantium consectetur praesentium, inventore sint excepturi, libero rem aspernatur? Esse.</p>
<p>Voluptatibus, consectetur? Quasi, consequuntur! Dolorum, provident reprehenderit optio ullam praesentium pariatur, sit repellat quam vel unde incidunt commodi, voluptas reiciendis sapiente laudantium? Repellendus molestias dicta consectetur quae eveniet, ad incidunt.</p>
<p>Debitis temporibus vero asperiores inventore, aperiam aliquam modi error voluptatem vel corporis facilis impedit dolore similique molestias beatae, animi nam provident! Repudiandae placeat consequuntur beatae rerum libero. Quia, dolorum ipsa?</p>
<p>Corrupti fugiat necessitatibus recusandae sed eius voluptatibus velit at, sequi, molestias a saepe harum, dicta veniam! Repellendus ad minus illum vero numquam soluta, fugiat labore id, maxime ullam dignissimos laborum.</p>
<p>Doloribus odit unde quae sunt? Officia officiis animi veniam, perspiciatis provident quis dolorem ab? Debitis voluptate tempora similique quia quos, fuga quas deleniti in quae corporis deserunt fugiat ex rem?</p>
<p>Quibusdam repellendus sit autem nobis modi perferendis nostrum sed, amet doloremque corporis ad distinctio atque! Repellat quae dolore ut! Laboriosam dicta ab reprehenderit iste! Ullam qui praesentium consequatur aliquam temporibus.</p>
<p>Minus sequi eum architecto ipsa cum ab dignissimos officiis fugiat hic quod non facere a doloremque esse, perferendis rerum iure inventore vero. Tempora, ipsam a veniam atque odio illum pariatur?</p>
<p>Labore soluta magnam quas sunt laudantium asperiores maiores ut ipsam incidunt molestiae odio recusandae aut, temporibus voluptas quod. Eum necessitatibus animi quo itaque recusandae non maiores minima praesentium ullam est.</p>
<p>Dolores sint fuga distinctio provident nihil inventore blanditiis ullam maiores placeat! Velit natus laudantium, veritatis magni, explicabo soluta, quis dicta reiciendis minima doloribus nesciunt quidem ad quod eum quaerat beatae!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<p>Cumque, quo? Laboriosam quis laborum error voluptate nobis, autem aspernatur odio temporibus assumenda incidunt praesentium labore aut possimus deleniti veniam, expedita a. Cumque praesentium aliquam eius? Soluta iste beatae molestias!</p>
<script>
window.onscroll = function() {
if (window.scrollY > 1500 && window.scrollY <= 2500){
document.body.style.backgroundColor = 'black';
document.body.style.color = 'white';
} else {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
}
};
</script>
</body>
</html>