Views
7 months ago

Web_Designer_UK__May_2018

LightBox Millennials Are

LightBox Millennials Are Screwed Above As the user scrolls, the site animates the 'fall' of a pixelated character called Becky, who represents millennials Above Gladeye’s design incorporates eye-catching typography from Jason Wong, adding realstyletotheheadingspunctuatingthestory Above A myriad of image-based illustrations are also animated during scrolling, using frames and CSS transformations to implement 16 ________________________________________________lightbox

LightBox Millennials Are Screwed Create a scroll up panel to reveal more content Create an interactive content cover that fades to reveal page content in response to user scrolling 1. Initiate HTML The first step is to define the HTML document. All of the document is contained within the HTML container, which consists of the head and body sections. While the head section is responsible for loading the external CSS and JavaScript resources, the body section will store the content created in step 2. Scroll Fade *** STEP 2 2. Content definition The HTML content consists of a header and main section. The header section is responsible for the 'cover' content that will be displayed to initially cover the full screen. The following main section will be used to store content that will move into view after the user starts to scroll the page. Once Upon a Time... In a land far away... 3. Scroll listener Create a new file called 'code.js'. This JavaScript code must first wait for the page to load, upon which it will activate a page scroll event listener. When the user scrolls the page, a function will be triggered to search for the header section’s image, upon which some calculations will be performed to alter its size, positioning and opacity based on the current scroll position. window.addEventListener("load", function() { window.addEventListener("scroll", function(){ var img = document.querySelector("header img"); img.style.width = (100+(window. scrollY/20))+"%"; img.style.left = (0-(window. scrollY/50))+"%"; img.style.opacity = 1-(1/(window. innerHeight/window.scrollY)); }); }); 4. Body style Create a new file called 'styles.css'. The first part of the CSS sets the page to cover the full screen without any border spacing. This is achieved using the width and height attributes, along with margin and padding to eliminate any default spacing set by the browser. A black background and default font are also applied. html,body{ display: block; width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Trebuchet MS", Helvetica, sans-serif; background: #000; } 5. Main container The main content container is set to cover half of the available screen width. A minimum height of double the screen height is set to guarantee the ability to scroll, regardless of how much content is set. The auto settings in the margin attribute are used to centrally align the container so that the child content automatically appears in the middle of the screen. main{ width: 50%; min-height: 200%; font-size: 3em; color: #fff; margin: 10em auto 0 auto; } 6. Header container The header container is set to display with relative positioning so that any child items can be positioned in relation to its location. Its height is set to match the screen height so that it covers the full space available. Hidden overflow is also applied to avoid excess cover content conflicting with the main content. header{ display: block; position: relative; } height: 100vh; text-align: center; overflow: hidden; 7. Header’s heading The H1 element inside the header is set to have specific size, colour and shadow settings. Other unique settings can also be applied in this definition. The application of the text shadow helps to avoid any conflict in the background image where colours may be difficult for the user to distinguish the text from. header h1{ font-size: 6em; color: #c00; margin-top: 0; text-shadow: 2px 2px #000 } *** 8. Header’s children Settings for all first level children of the header are set to share properties. This approach avoids having to repeat settings for each unique item; keeping the CSS small and manageable. All children will used fixed positioning placed in the top-left corner. They will also have a width matching the header container, along with margining to centrally align them. header > * { position: fixed; top: 0; left: 0; margin: 0 auto 0 auto; width: 100%; } lightbox _________________________________________________17