Scribd
Upload
120 views1 page

Code As Continuos Page

This document describes how to code a continuous page scrolling effect using JavaScript. It involves: 1. Setting up the HTML document structure with head and body sections. 2. Adding content sections to the body. 3. Initializing a JavaScript scroll object to track scrolling state. 4. Capturing all content sections on page load. 5. Detecting scroll direction and updating sections accordingly, either moving the top section to the bottom or vice versa. 6. Styling sections to be full screen blocks that scroll vertically.

Uploaded by

Morpheu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
120 views1 page

Code As Continuos Page

This document describes how to code a continuous page scrolling effect using JavaScript. It involves: 1. Setting up the HTML document structure with head and body sections. 2. Adding content sections to the body. 3. Initializing a JavaScript scroll object to track scrolling state. 4. Capturing all content sections on page load. 5. Detecting scroll direction and updating sections accordingly, either moving the top section to the bottom or vice versa. 6. Styling sections to be full screen blocks that scroll vertically.

Uploaded by

Morpheu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Li htBox

Oxymoron

Code a continuous page


content scrolling effect
Introduce a feature that will allow your page content to be repeatedly cycled

1. Initiate document var scroll = { past the section element is performed. If so, the
The document setup consists of an HTML container “index”: 0, referenced section is pushed to the end of the scroll
that’s used to store the head and body sections of “sections”: [], object’s sections array and the original top item is
the web page document. While the head section is “timestamp”: 0, removed via shift. Appending the section as a child of
used to load the external CSS and JavaScript “lastY”:0, its parent places the DOM element as the last section.
resource files, the content created in step 2 is stored “difference”: 0
inside the body section element. } section = scroll.sections[0];
window.addEventListener(“load”,function(){ if(window.scrollY > section.offsetTop +
<!DOCTYPE html> *** STEP 4 HERE section.offsetHeight){
<html> }); scroll.sections.push( section );
<head> scroll.sections.shift();
<title>Continuous Scroll</title> 4. Body section capture section.parentNode.appendChild(section);
<link rel=”stylesheet” type=”text/css” The querySelectorAll functionality is used to find all of }
href=”styles.css”/> the first level section elements inside the body
<script src=”code.js”></script> container. These are stored as an array in the scroll 7. Scroll up
</head> object created in step 3. A scroll event listener is applied A reverse of step 6 is performed for scrolling up.
<body> to the window, which will trigger a function during each Changes are performed if the window’s vertical scroll
*** STEP 2 HERE scroll interaction. Details about the scroll event will be position has moved close to the top of the first section.
</body> made available through the provided “e” parameter. In this case, the last section in both the DOM and the
</html> scroll object’s sections array are moved into first position.
scroll.sections = Array.from(
2. Body content document.querySelectorAll(“body > section”) section = scroll.sections[0];
The content consists of several section containers. Each ); if(window.scrollY < section.offsetTop + 250){
container will be used by the JavaScript to move their window.addEventListener(“scroll”,function(e){ var lastIndex = scroll.sections.length - 1;
content in response to the scrolling. By controlling the *** STEP 5 HERE var last = scroll.sections[ lastIndex ]
content through their container, there is no need to }); scroll.sections.unshift( last );
worry about their complexities. A background colour scroll.sections.pop();
has been applied to each section as part of the example 5. Scroll direction and updates section.parentNode.insertBefore(
— you should look at replacing this in your real projects. Scrolling direction is achieved by comparing the last,
window’s vertical “scrollY” position to the last section.parentNode.childNodes[0]
<section style=”background:red”> recorded position applied to the scroll object’s “lastY” );
<h1>Section A</h1> field. Step 6 is executed when the page is scrolling }
</section> down, while step 7 is executed when the page is
<section style=”background:green”> scrolling up. The scroll object’s “difference” and 8. CSS: sizing
<h1>Section B</h1> “lastY” are updated at the end of each scroll event to Create a new file called “styles.css”. The last step
</section> describe movement and last vertical position. defines the presentation settings. The HTML and
<section style=”background:blue”> body containers should have no padding or margin
<h1>Section C</h1> var section; to allow content to cover the full screen. Sections are
</section> if(window.scrollY > scroll.lastY){ sized to fit the full width and height of the screen
<section style=”background:purple”> *** STEP 6 HERE regardless of their content.
<h1>Section D</h1> }else{
</section> *** STEP 7 HERE html, body,h1{
} padding: 0;
3. JavaScript initiation scroll.difference = window.scrollY - scroll. margin: 0;
Create a new file called “code.js”. This step initiates lastY; }
the JavaScript with a scroll object that will be used in scroll.lastY = window.scrollY; section{
later steps to record details about the scrolling effect. display: block;
Page content can only be accessed after the page 6. Scroll down height: 100vh;
has completed loading, so code from step 4 The first element inside the scroll object’s sections width: 100%;
onwards is placed inside a “load” event listener array is assigned as the “section” reference. A check to overflow: auto;
attached to the browser window. see if the window’s vertical scroll position has moved }

lightbox������������������������������������������������ 27

You might also like