Web_Designer_UK__May_2018

Recommendations

Info

web workshop Create multiple fade background colours Inspired by https://rocka.co Page navigation Page navigation uses fixed positioning, always appearing in the same place regardless of how far down the page the user scrolls to. Go home logo link Alogoispresentedasa distinct part of the navigation, allowing users to return to the home page from any location and position. Changing background JavaScript event listening enables the colour of the background to change at specific scrolling locations generated by the user. Page content Thisisthepagecontentthatthe user can scroll through. The effect only works if there’s enough contenttoallowforscrolling. Navigation prompt A notification to help make sure that users of the website are aware of the additional content made available by scrolling the page. 60 ____________________________________________workshop
EXPERT ADVICE Using body labelling Using JavaScript to apply a status label to the body section is an easy way to keep code simple and allowing visual reactions to be controlled from CSS. Take this further by applying additional labels to describe specific events that have occurred relating to user interactions or other events. What our experts think of the site Create multiple fade background colours DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner Avoid complexity to avoid headaches It’s worth spending extra time to identify the simplest way to create effects like this. Placing too much responsibility within JavaScript increases scope for future changes breaking functionality, costing time to fix. This example avoids the problem by keeping JavaScript’s involvement to a minimum. Leon Brown, freelance web developer and trainer Technique 1. Initiate HTML document The first step is to initiate the HTML document that will be the framework for storing the content and loading external resources. This document contains a head section that loads CSS and JavaScript resources, along with a body section for defining the visible content in step 2. Scrolling Background Change *** STEP 2 HERE 2. Body content The main content can consist of any HTML, providing that it covers enough space to allow for scrolling. This example will use an article container that will be controlled via CSS to allow for scrolling. Content 3. JavaScript scrolling Create a new file called ‘code.js’. This JavaScript listens for a scrolling event, upon which it calculates a screen number based on the vertical scroll position and sets the DOM body’s ‘data-screen’ attribute as this value. Any visual changes to ‘data-screen’ can now be defined via some CSS. window.addEventListener(“load”,function(){ window.addEventListener(“scroll”,function(){ var screen = Math.round(window.scrollY/ window.innerHeight); document.body.setAttribute(“data-screen”, screen); }) }); 4. CSS screen definition Create a new file called ‘styles.css’. The ‘data-screen’ attribute applied to the DOM body via the JavaScript is used to define the default screen properties. Its background colour is set to white, while a transition is set to animate changes to the background colour over a duration of one second. [data-screen]{ background: #fff; transition: background-color 1s; } 5. Screen colour changes The JavaScript processing of scrolling events from step 3 allows CSS to define presentation rules for specific positions. Each count of ‘data-screen’ is the full height of the browser screen. This step sets different background colours as the user scrolls down the equivalent of a full screen height. [data-screen=”1”]{ background-color: red; } [data-screen=”2”]{ background-color: green; } [data-screen=”3”]{ background-color: blue; } 6. Example content size Due to this example not having five screen heights of content to produce the required scrolling, this step sets the article container to fit this size. This allows you to test the effect before committing to inserting the content. article{ display: block; min-height: 400vh; } workshop _____________________________________________ 61
Page 1:
29 PAGES OF EXPERT TUTORIALS FREE O
Page 4:
Meta Contributors This issue’s pa
Page 7 and 8:
FileSilo 96 Get the latest must-hav
Page 9 and 10: Header Inspiration Sites of the mon
Page 11 and 12: Header Opinion There is no excuse f
Page 13 and 14: Reader survey FREE The JavaScript H
Page 15 and 16: Li htBox Millennials Are Screwed #0
Page 17 and 18: LightBox Millennials Are Screwed Cr
Page 19 and 20: #5F9DCC #5A293E #0D738C #B6AEAB Abo
Page 21 and 22: LightBox Open Wear Create an animat
Page 23 and 24: #FF4B33 #151D1E #9403B4 #D5154A Abo
Page 25 and 26: NEW YORK | 25-27 APRIL 2018 DONNA L
Page 27 and 28: https://inculerate.com by RED COLLA
Page 29 and 30: ANGELIC AIRPLANES INTO THE FOLD So
Page 31 and 32: ANGELIC AIRPLANES “Well the site
Page 33 and 34: Subscription offer MOST GRE
Page 35 and 36: FORM AND FFUNCTION It was2005,andFF
Page 37 and 38: FORM AND FFUNCTION MAKING THE CONNE
Page 39 and 40: FORM AND FFUNCTION TIMELINE whythen
Page 41 and 42: AIGA Justified 2014 - Winner 2014 G
Page 43 and 44: GET PRO DESIGN SKILLS FONTS & TYPOG
Page 45 and 46: GET PRO DESIGN SKILLS RESOURCES GOO
Page 47 and 48: GET PRO DESIGN SKIL 5 USE A SCALE I
Page 49 and 50: GET PRO DESIGN SKILLS COLOUR PERSON
Page 51 and 52: Overlay graphics on video backgroun
Page 53 and 54: Tutorials There’s so much that ca
Page 55 and 56: Tutorials Code a dynamic SVG radial
Page 57 and 58: Tutorials Perspective is everything
Page 59: Tutorials Design isometric typograp
Page 63 and 64: GET PRO DESIGN SKILLS DESIGNING LAY
Page 65 and 66: GET PRO DESIGN SKILLS flow of the c
Page 67 and 68: GET PRO DESIGN SKILLS CREATING LAYO
Page 69 and 70: GET PRO DESIGN SKILLS WHAT NEXT FOR
Page 71 and 72: Tutorials Web designers have had ac
Page 73 and 74: Tutorials Shrink your code with CSS
Page 75 and 76: 10 BEST STATIC SITE GENERATORS STAT
Page 77 and 78: 10 BEST STATIC SITE GENERATORS 5. N
Page 79 and 80: CREATE THE IMPOSSIBLE www.photoshop
Page 81 and 82: Developer tutorials Intoday’swebd
Page 83 and 84: Developer tutorials Automate your w
Page 85 and 86: Special offer for readers in North
Page 87 and 88: Developer tutorials While TypeScrip
Page 89 and 90: Developer tutorials Deploy TypeScri
Page 91 and 92: Discover another of our great booka
Page 93 and 94: Get your listing in our directory T
Page 95 and 96: Get your listing in our directory T
Page 97 and 98: Thehomeofgreat home of downloads -
Page 100: 9000 1
show all

Web_Designer_UK__May_2018

Create successful ePaper yourself

Delete template?

Save as template?