Scribd Logo
Upload

Welcome to Scribd!

  • Code As Continuos Page

    Uploaded by

    Morpheu
    73 views1 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.

    Original Description:

    Code as Continuos Page

    Original Title

    Code as Continuos Page

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    73 views1 page

    Code As Continuos Page

    Uploaded by

    Morpheu
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 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