<!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">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
body {
transition: all 1.5s;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ipsa assumenda maiores quasi obcaecati possimus, illum nam laboriosam nulla excepturi sunt, placeat porro. Corrupti esse, odio perferendis reprehenderit eaque veniam nihil fuga ullam nulla accusamus doloremque neque corporis nostrum, quasi non possimus, officiis id. Quia eum ducimus esse architecto nostrum odio in quaerat vitae dolores magni, beatae possimus quasi libero alias sed commodi saepe rem facere aut! Aperiam, numquam. Atque dolore dolores vitae nulla sunt ad possimus, quasi, temporibus accusamus officiis molestias velit nostrum neque hic error dolorum veniam quae incidunt alias inventore quos ex itaque! Repudiandae amet ut veritatis.</p>
<p>Eos iste perferendis ipsa est necessitatibus, praesentium repellendus, placeat laboriosam iusto vitae, deserunt nisi fugiat corrupti repellat veniam neque ea delectus officiis facilis eaque voluptate et recusandae! Magnam, iste dolorem? Id, dolorem voluptatum accusantium harum fugiat, esse laboriosam dolor aliquid ipsam eaque numquam vitae aperiam quisquam commodi praesentium facilis omnis sunt rerum repellendus quos quia itaque? Pariatur inventore facere, recusandae molestias veritatis nesciunt sunt, magni veniam ducimus ullam reprehenderit deserunt quod itaque illum ipsa eos numquam illo exercitationem mollitia fuga labore voluptates fugiat aut maxime! Porro suscipit sequi esse sunt pariatur ipsum aliquid. Natus ea consequatur reiciendis id, quod praesentium.</p>
<p>Laborum, earum asperiores impedit totam itaque pariatur officia quae excepturi quos aut minima dicta mollitia maxime alias, magni maiores aspernatur iste harum temporibus debitis. Quam delectus accusamus esse repellendus quod eum facilis, ipsa inventore quas perferendis! Hic omnis nisi, in porro magni laboriosam mollitia, ipsum aliquid dolorem quos repellendus aspernatur officia. Quod, corrupti delectus! Animi soluta dicta aliquid, obcaecati repudiandae repellendus aut? Recusandae, quo officia. Eaque voluptatem animi suscipit totam accusantium sapiente repudiandae magni quae dignissimos, pariatur delectus modi fugit non ratione. Soluta porro odio optio quaerat distinctio unde iure voluptatibus id omnis molestiae? Sit quasi at atque. Consequatur, similique!</p>
<p>Facilis vitae maiores perspiciatis, quod, maxime asperiores, cum commodi officiis suscipit cumque iure ex. Praesentium repudiandae sunt blanditiis sapiente cum, necessitatibus commodi earum possimus consequatur tempore est vel quas accusamus harum quam illo porro quaerat corrupti! Alias non, laboriosam accusamus saepe eius commodi eveniet quis asperiores sint perspiciatis laudantium praesentium. Excepturi pariatur libero mollitia facere tempore dolore fuga sit aperiam culpa voluptate saepe necessitatibus ipsa deserunt eius cupiditate, nulla voluptas. Atque, iusto hic. Porro provident doloremque nisi quas numquam mollitia tempore fuga corrupti pariatur expedita eaque eos repellat temporibus voluptatum, eius asperiores? Aliquid autem saepe nemo ipsum maiores soluta quam?</p>
<p>Ratione reiciendis rerum hic dolore dignissimos, totam ipsam repellendus sunt aperiam autem blanditiis quidem assumenda qui rem illum aspernatur quaerat error eligendi similique, voluptates ad esse neque! Ratione sed ipsam veniam mollitia pariatur eum blanditiis sapiente excepturi quis tempore, nostrum iste facilis tenetur corporis provident exercitationem odio maiores nam? Animi reprehenderit nobis nostrum dicta voluptatibus mollitia vel quas voluptatem sed eos. Deleniti quidem accusantium possimus dignissimos quas labore maiores. Labore rerum sint natus sequi? Autem ab maxime nam omnis laudantium natus, sequi voluptas enim adipisci, blanditiis voluptates laboriosam repellat ut praesentium, atque totam optio quaerat inventore est officia corrupti sapiente?</p>
<p>Delectus nobis minima omnis tenetur distinctio aperiam maiores neque officiis maxime, repellendus esse impedit commodi repudiandae mollitia architecto doloremque debitis, ratione deserunt odit eligendi quisquam inventore excepturi veritatis. Hic ex aspernatur temporibus, ullam optio facilis aut omnis suscipit aperiam, soluta iste sequi mollitia possimus deserunt et tempore similique, repellat natus deleniti doloribus autem quia animi nemo? Velit nulla nobis possimus cumque ipsa ratione necessitatibus et repellat, deserunt quisquam facere! Doloribus obcaecati a, cumque saepe illo repellat, totam laudantium itaque similique ducimus porro, animi recusandae? Adipisci eum aliquam aperiam. Optio voluptates vel ab a? Doloremque iusto ut quaerat fugiat aspernatur eius.</p>
<p>Fuga repellat quas eveniet. Expedita harum nostrum impedit iste commodi excepturi officiis, praesentium voluptas ut explicabo. Earum nobis veritatis incidunt eum, ad consequatur excepturi voluptates sequi voluptatem, molestiae adipisci, possimus amet. Inventore aspernatur rem velit odit consequuntur voluptatem expedita. Itaque eaque, quia non, sequi velit voluptates placeat nemo consectetur iste, sed quasi odit. Aspernatur officia ipsam necessitatibus fuga ab mollitia magnam, unde sint ea non nemo totam porro eius temporibus molestias fugiat eos dolorem beatae nostrum. Consequuntur sit dolores, rem eius cupiditate pariatur ea magnam voluptate aspernatur! Fuga accusamus quasi tempora delectus est sint laudantium, nisi neque a eos alias.</p>
<p id="begin">Hic consequuntur nisi dolorem dicta maxime dolor fuga reiciendis nobis vel libero nemo molestiae doloribus, minima tempora, obcaecati earum nesciunt praesentium sequi delectus alias consequatur eos quis nulla? Accusantium atque inventore fuga nostrum accusamus dolores voluptate voluptatem optio placeat obcaecati commodi cumque necessitatibus fugit ipsum repellendus, earum ratione incidunt voluptas quis, corrupti delectus cupiditate natus! Earum sit repudiandae veniam quam facere nulla et iusto! Nesciunt eos itaque expedita repudiandae, natus, aspernatur, sit odit officiis quibusdam eius magni. Veniam distinctio optio corporis nobis facere error, cumque doloremque amet expedita deleniti sed nulla? Sed illum hic nemo odio! Architecto asperiores dicta culpa.</p>
<p>Magni tempore quod, eligendi placeat doloremque eius fuga totam iste omnis qui commodi, incidunt fugiat numquam optio repellat corporis? A eos non quaerat blanditiis ab eaque perferendis ipsa aliquam quos rem corrupti alias mollitia incidunt velit tempore dolores, tenetur enim at eum! Dolores soluta cum id voluptas, sit eos, facilis dicta cupiditate autem libero inventore architecto! Possimus culpa atque ullam voluptatem! Aperiam possimus dolores quas nulla ipsum, error est, ullam expedita consectetur dolor aspernatur. Rerum mollitia commodi distinctio at beatae repellat, excepturi nam exercitationem eaque. Quod iusto qui, aperiam reprehenderit nulla aspernatur ex natus doloribus saepe adipisci magnam, nesciunt explicabo!</p>
<p>Magnam quaerat, sapiente quis iusto totam, reprehenderit laboriosam suscipit quisquam dolores id dolor quam sit, numquam illum. Nemo excepturi nobis sunt animi laborum aliquid, iure consequuntur ut quidem adipisci tenetur dolorem obcaecati beatae accusantium, consectetur aspernatur inventore? Quod suscipit labore perspiciatis vel magnam accusamus itaque facere, harum quidem totam vitae consequuntur, earum optio eligendi inventore. Ad unde nostrum soluta maxime ratione autem sint quisquam sit, et perspiciatis asperiores optio alias aliquid libero minima veniam numquam laborum recusandae quo aut omnis. Cum mollitia blanditiis totam aliquam nostrum unde, amet corporis dignissimos! In nam suscipit quod doloribus vero laborum laboriosam omnis autem.</p>
<p>Ad qui vero impedit iure laudantium sunt dicta aliquid aperiam beatae amet earum animi quos optio rerum vitae nulla magni dignissimos facilis, ipsa error quae voluptas possimus sequi dolor? Molestias maiores vel numquam atque et. Architecto quam adipisci facere ullam, iste expedita ipsum consectetur alias, dignissimos libero dolores provident laborum exercitationem veritatis modi vitae quasi aperiam reprehenderit nesciunt recusandae error perferendis corporis? Ullam voluptate molestias aliquid ducimus sunt. Vel, architecto? Quod nisi reprehenderit ipsum soluta voluptatem sint nihil rerum dolorum quisquam enim optio asperiores illo ratione quibusdam, architecto obcaecati odio recusandae voluptas ipsa. Iusto nulla ullam quod hic, et praesentium!</p>
<p>Cum soluta quo, debitis, saepe dignissimos laudantium omnis eos error ipsam possimus fuga mollitia sapiente numquam atque alias quas sed qui odio magnam natus. Adipisci dignissimos pariatur accusamus non velit nihil incidunt assumenda dolores mollitia eligendi, dolore veritatis quod, commodi dicta iste consequuntur repudiandae, voluptatibus et. Fugit cumque autem rem possimus accusantium eveniet illo ipsa deserunt reiciendis quibusdam, quod quos nostrum perspiciatis aliquid at aliquam dicta odit! Ipsam eaque earum aperiam consequuntur tenetur ratione sint voluptas id doloremque. Architecto mollitia vero blanditiis eius aliquid doloribus totam consectetur perferendis fuga nobis, ut error consequuntur sunt inventore fugit alias rerum at dolorem.</p>
<p>Debitis, nesciunt. Expedita error dolores dolor pariatur nemo et! Quisquam nesciunt non velit excepturi, enim corporis tempora suscipit facilis perspiciatis! Dolores, deserunt? Eum, mollitia. Odit velit dolore quas neque. Voluptatum, aut! Quam exercitationem quibusdam accusamus illo cum minima quis dolores debitis sunt nam ipsum, expedita nihil assumenda! Aliquam soluta praesentium laborum. Minima ducimus vero dignissimos, soluta sint officia quia ut? Rem optio nihil, voluptates fugit in molestiae deleniti modi excepturi recusandae velit ipsam possimus fugiat earum at aliquid nisi est blanditiis ad, voluptatibus officia. Adipisci animi eveniet totam, deleniti quos ea sapiente eum non officia? Voluptates, tempora sunt? Officia, eum!</p>
<p>Itaque quae quaerat nisi numquam consectetur maiores, consequatur esse magni, architecto dolorum optio quisquam distinctio blanditiis libero aspernatur, debitis provident impedit voluptates suscipit modi earum hic? Dignissimos numquam voluptate dolores consequuntur assumenda quos, qui esse? Iusto magni tempore rem dolore obcaecati iure repudiandae, asperiores molestias doloremque fugit accusantium quia pariatur deleniti sequi delectus distinctio suscipit qui, ex nobis ipsam quibusdam et fugiat? At ad tempora eligendi vero? Voluptatem assumenda reiciendis suscipit nulla inventore animi voluptatum, sapiente autem iusto, incidunt quisquam ab quo natus a repellat facilis totam cumque quos aut dignissimos harum tempore asperiores hic in! Error eaque nihil cumque?</p>
<p>Quod earum, adipisci voluptatibus excepturi suscipit quisquam, eaque quae perferendis, nulla odit repellendus accusantium id nam incidunt. Odio minima dicta reprehenderit ducimus quia veniam repudiandae. Veniam tenetur minima odit maiores aliquid illo consequatur? Odio doloribus voluptates optio veniam esse vero, at necessitatibus maiores atque, excepturi omnis. Ex quo dolore suscipit fuga totam, magnam ducimus atque nobis libero. Sunt facilis sint consequatur quae exercitationem natus ab cupiditate, laboriosam est, magni voluptatum enim incidunt non voluptate praesentium saepe consequuntur! Magnam quidem quaerat nostrum sit obcaecati nemo assumenda. Pariatur quis consequatur beatae culpa. Cumque ab odit debitis ducimus dolorum, accusamus autem exercitationem alias?</p>
<p>Fugit in nobis labore ab optio fuga dolor impedit culpa velit quae ut, ipsum nisi maxime blanditiis rerum aliquam quasi, iure, placeat aliquid numquam cumque obcaecati mollitia? Non dolor odit quod officia porro eaque recusandae ipsa reiciendis molestiae ratione qui totam similique exercitationem autem repellendus sunt modi cum voluptas facere, vel odio accusamus minus blanditiis fuga. Facilis ad eos animi beatae amet dolores eveniet voluptatem dignissimos explicabo sint. Ipsam dolor harum hic. Fugiat voluptas quod dicta, earum qui eveniet quas dolorum quo voluptatibus ab ex cum blanditiis eum saepe rerum voluptatum beatae. Quaerat asperiores, architecto ipsum facere dolorum qui harum.</p>
<p>Ut autem minima vitae porro tempore in consequuntur modi reprehenderit, obcaecati iste aliquam, quam laboriosam nostrum magni nesciunt tempora ea. Voluptatem laboriosam cumque, vitae doloribus, officiis repudiandae blanditiis architecto temporibus, sit dolorem nobis similique perferendis atque aspernatur ex accusantium sunt expedita et. Molestias harum perferendis cumque neque ut doloremque vitae, voluptates hic in deserunt culpa enim velit aperiam nihil ab quis iure ex ad officiis, beatae optio, eligendi pariatur. Consectetur, eaque! Natus laborum deserunt sapiente nemo delectus aspernatur quod commodi distinctio qui molestias odio blanditiis corporis cum nostrum aut sint, dicta molestiae non, quibusdam incidunt nulla nisi ratione ipsa! Sequi!</p>
<p>Exercitationem laboriosam saepe reprehenderit iste, cum neque. Atque voluptatum optio a recusandae possimus. Beatae, iusto perferendis enim culpa nam ipsum suscipit eaque, odit saepe rem nihil. Culpa, quaerat quidem! Maxime aut vel consequuntur, temporibus, quod at assumenda corrupti ab nam qui velit similique. Aspernatur placeat voluptatem voluptas libero laboriosam laudantium ab, maiores qui nulla, dignissimos doloremque impedit? Sequi quasi facilis id nam eius eligendi voluptatibus quidem perspiciatis nesciunt quam! Fugiat quod excepturi suscipit aspernatur mollitia eaque beatae unde dolore exercitationem magnam voluptatem dolorem, praesentium, assumenda vitae, quas accusamus debitis dolorum. Fugiat, dolorem libero omnis enim laborum pariatur praesentium maiores voluptatum.</p>
<p>Voluptatibus eos recusandae placeat doloribus eum ut distinctio exercitationem adipisci unde? Mollitia perspiciatis, est quos officiis temporibus laudantium enim dolores porro itaque? Deleniti voluptas fugit voluptatibus corrupti aspernatur! Quas accusamus commodi consequuntur praesentium aliquam impedit sunt, facilis adipisci unde ullam laudantium est suscipit ex, exercitationem eos eveniet iure dolor fugit ab? Voluptatum officiis dicta perspiciatis alias eos deserunt neque rem placeat iusto doloribus, laboriosam culpa nobis accusantium ipsa? Atque facere ipsam debitis recusandae incidunt? Reiciendis atque quod exercitationem illo sequi quibusdam dolorem iusto tenetur quam, possimus vel ipsa rerum consectetur inventore omnis praesentium eaque eos? Repellendus officiis amet illum voluptatum!</p>
<p>Laborum nemo voluptas, accusamus quidem dolores dolorum dicta modi animi veritatis magni deserunt incidunt velit voluptatibus numquam temporibus! Tempora, facere quaerat dolorum labore exercitationem similique at provident aut maiores aspernatur voluptatum, magni, in commodi explicabo. Fugit quaerat similique facilis, sapiente, impedit adipisci tempora consectetur voluptate praesentium nesciunt qui, commodi quia corporis repudiandae inventore quidem suscipit eum ducimus! Expedita quibusdam sit repudiandae est quo, reiciendis, cupiditate deleniti pariatur facere officia fugiat aliquam qui. Quia repellat harum dolorem minima dolore itaque vel fugiat velit sequi, voluptate voluptates accusantium fuga eius voluptatem ad libero necessitatibus ipsa neque facere? Explicabo facilis possimus soluta? Repudiandae.</p>
<p>Molestiae reiciendis magni corporis eum recusandae quasi quod illo suscipit numquam incidunt voluptatum ad, sequi, cumque provident amet architecto cupiditate modi saepe. Ratione, ipsa! Sequi explicabo ducimus repellendus mollitia, quisquam nulla ratione velit quos praesentium veritatis doloribus eos consectetur consequuntur sed, laboriosam totam magni voluptatum architecto sunt quam! Rem quis a voluptatem commodi culpa quasi beatae, cumque veniam nihil, facilis explicabo aliquid perferendis in aut temporibus! Vitae numquam consectetur laborum ipsum quam, debitis explicabo recusandae, veniam ea ipsam saepe magnam laudantium cupiditate molestiae quos necessitatibus. Dignissimos distinctio, error fugit quidem, consectetur in expedita at nulla reprehenderit obcaecati atque doloribus adipisci.</p>
<p>Nostrum eos deleniti, modi cupiditate earum repudiandae totam minima eum velit cumque commodi dolore quas facere a dolorum. Animi dolores quod voluptatem laudantium iure, beatae autem iusto, provident mollitia ea veritatis? Facilis fugiat ipsa eveniet ut consequuntur inventore ducimus quis laboriosam. Ratione, tempore earum velit voluptatum corrupti, distinctio accusantium quod nobis asperiores atque exercitationem animi ducimus voluptatibus esse? Debitis tempora sapiente sit tempore obcaecati, numquam odio! Molestias nulla ipsum assumenda voluptatum tempora ullam nemo beatae, cum eum harum nisi officia modi necessitatibus perspiciatis adipisci, placeat aspernatur, recusandae commodi numquam nesciunt asperiores fugiat consectetur provident. Rem expedita rerum earum beatae repudiandae.</p>
<p>Quo, culpa iste laudantium commodi soluta unde sequi at aliquam sed ratione modi assumenda a debitis. Earum corporis deleniti optio, qui, suscipit impedit iusto ipsam a distinctio perspiciatis adipisci. Repellendus obcaecati quis, temporibus id esse debitis modi voluptas. Ratione nostrum necessitatibus nisi, doloribus, numquam praesentium, nesciunt aliquid consectetur exercitationem commodi natus. Voluptatum perferendis debitis est provident quam a, tempora impedit eaque ullam autem! Cum provident aut dolorum cupiditate, vitae quae non culpa quas quasi quisquam voluptas facilis, reiciendis deleniti eos iusto quis totam odit et magni! Ut fugit nam necessitatibus deleniti earum minima neque tempore, possimus id excepturi, est rerum?</p>
<p>Quis velit temporibus sunt nemo aperiam quas voluptate est voluptatibus amet libero laboriosam perferendis, molestias, sint accusamus doloribus explicabo quia vitae enim ratione error dolor corrupti laudantium! Expedita illo est voluptatum cupiditate temporibus velit adipisci asperiores nulla? Magni eius corrupti aliquam ipsa dolore pariatur deleniti accusamus, odio in illum animi explicabo laboriosam sunt ullam quae! Vero distinctio quasi sit quam id ea tenetur? Quisquam maiores dolores itaque veniam autem maxime esse dolor. Velit eos praesentium quibusdam at tempore quos, hic dolorem dolor fugit odio eaque nisi, iste distinctio aliquid nulla veritatis quisquam ea quam esse accusamus cum id? Vel, voluptate!</p>
<p>Amet recusandae fugiat nostrum nesciunt ex. Consequatur dolore saepe tempore sit veritatis non animi ducimus. Praesentium, facilis? Obcaecati hic libero cumque perspiciatis. Distinctio maxime odio similique expedita, debitis magni aspernatur? Voluptate numquam quisquam iusto! Minima inventore qui illum recusandae vel nobis aliquid omnis distinctio eligendi cum quibusdam quo, eaque est cumque ad quasi necessitatibus numquam? Dolor molestiae nostrum, illo voluptatem, delectus deleniti architecto voluptate aspernatur dolorum nihil quis reiciendis placeat, quia possimus aliquam ab vero repellat voluptas adipisci? Consequatur assumenda nesciunt quas aliquam ad vero impedit pariatur ducimus! Repellendus vero architecto possimus! Voluptate incidunt dolore nam veniam ut magnam architecto!</p>
<p>Quae repellat corrupti atque fuga quam quia sapiente, cupiditate deserunt nemo. Nihil incidunt, modi reprehenderit ipsum reiciendis velit deleniti pariatur, quia repellendus nostrum ipsa ut atque minima eligendi. Laborum magnam, at consectetur voluptatibus deleniti tenetur itaque doloremque dolorum eligendi asperiores nulla enim voluptates saepe reiciendis, tempora ea minima dolor qui consequuntur quisquam dolore id quos debitis nihil! Alias, doloribus quae culpa ea officia, nisi quidem eos vitae consequuntur fuga, ut quas repellendus modi aut dicta! Dolorum sunt, rem tenetur alias reprehenderit consectetur repudiandae temporibus quasi ad laboriosam eos accusantium facilis dolores odit magni itaque, saepe similique doloremque officia! Incidunt, eaque.</p>
<p>Accusantium quo, illum officiis magnam officia, tempora, atque molestiae id esse dignissimos consequuntur? Autem vero molestiae nam possimus animi accusamus, officiis modi cupiditate error nobis amet odit impedit maxime et obcaecati laboriosam consequuntur consectetur dolorum facilis quos. Voluptas voluptatum eius possimus doloribus repellendus, recusandae cupiditate temporibus architecto magnam amet excepturi neque sapiente, saepe, suscipit numquam quos distinctio dolorem consectetur consequuntur repellat reiciendis maiores quis mollitia ex! Enim et quos cum corrupti eveniet autem, ipsam impedit labore sed ullam, ut itaque ea fuga dolor, id odit eaque dignissimos aliquam! Doloribus molestias ex hic natus dolorum iste nam exercitationem necessitatibus officia fuga.</p>
<p>Id consectetur provident neque, vitae fugiat tenetur eligendi architecto corporis reiciendis mollitia aliquid quia veniam accusamus deleniti magnam quo porro ullam officia? Iste reiciendis ipsa aspernatur voluptatibus possimus excepturi incidunt a numquam quas dignissimos saepe ratione cumque, dolorum earum corporis error nostrum minus mollitia veritatis adipisci repudiandae sequi, molestiae inventore eaque. Corporis cum quis ea iste deserunt in debitis iure veniam voluptas consectetur vel vero maiores, itaque ipsam nam, repudiandae nobis fugiat rerum inventore! In quam ex facere, magnam dolorem quis id qui perferendis quod! Dolor odit officia inventore quaerat maxime quam accusamus quidem, sunt error sint nam, ab nihil?</p>
<p>Corporis, labore aliquam perferendis, molestias voluptate optio quaerat nostrum aspernatur facere officiis quas quisquam eius, tempora rem nemo voluptas reiciendis voluptates quasi explicabo nulla omnis in deleniti aperiam totam? Quis enim quam facere iusto hic, minima modi sequi in veniam animi recusandae officia pariatur eaque sed dolorum facilis praesentium esse veritatis obcaecati, fugit, omnis libero! Inventore quibusdam, tenetur repudiandae, sunt illo sapiente atque vel ad exercitationem quisquam veniam, nemo culpa? Cumque quia expedita nulla ab? Rerum, veniam soluta libero hic esse possimus repellat quisquam adipisci eum, laborum animi expedita minus molestiae asperiores dicta! Deserunt, nulla ea maxime culpa natus quas!</p>
<p>Officiis aperiam quam, omnis dolorum architecto qui quia sequi natus eligendi rem id, aspernatur labore consequuntur, perspiciatis expedita fugiat quis ad vitae mollitia laboriosam cum blanditiis! Voluptate animi voluptatibus impedit minus ullam numquam. Dolores eius esse cum debitis in excepturi modi perspiciatis? Doloremque error officia praesentium minima, dolorum consectetur veniam cumque optio, deserunt omnis rerum fugit cupiditate natus architecto similique autem deleniti temporibus unde? Unde ad sit optio, quibusdam neque quaerat consequatur officia expedita qui fugit natus? Corrupti, dolorum ad, obcaecati laboriosam ratione amet animi laborum, quidem ea enim nesciunt mollitia! Reprehenderit, autem iusto quo quis quaerat ab rerum perferendis.</p>
<script>
window.onscroll = function() {
console.log(new Date().getTime()); //현재 스크롤바가 내려가는 시점의 시간(?)
console.log(window.scrollY); //현재 스크롤바의 위치값
// console.log(document.getElementById('begin').getBoundingClientRect().top); // #begin의 Y좌표 값
// begin - 500 < 현재 스크롤바의 위치 < begin + 500 => 배경색 검정
// if (window.scrollY > document.getElementById('begin').getBoundingClientRect().top && window.scroll < document.getElementById('begin').getBoundingClientRect().top + 500 ) {
// document.body.style.backgroundColor = 'black';
// } else {
// document.body.style.backgroundColor = 'white';
// }
let y = document.getElementById('begin').getBoundingClientRect().top;
if(y < 0 && y >= -3000) { #begin의 y좌표값이 -3000~0까지면
document.body.style.backgroundColor = 'black'; 배경이 까매짐
document.body.style.color = 'white';
} else {
document.body.style.backgroundColor = 'white';
document.body.style.color = '#555';
}
};
</script>
</body>
</html>
'[HTML | CSS | JavaScript | jQuery] 정리 > JavaScript' 카테고리의 다른 글
| JavaScript - JSON, JavaScript Object Notation (0) | 2023.05.08 |
|---|---|
| JavaScript - 클래스, class (0) | 2023.05.08 |
| JavaScript - CSS 이미지를 연결시켜서 애니메이션 효과 주기 (0) | 2023.05.08 |
| JavaScript - CSS 체크박스 선택 시 이미지 이동 (0) | 2023.05.08 |
| JavaScript - CSS 접었다가 클릭하면 열기 (0) | 2023.05.08 |