Web_Designer_Issue_262_2017

More documents

Recommendations

Info

LightBox VOL.4 Create an animated colour palette selector Use JavaScript and CSS to change your webpage colour palette in response to user interactions 1. HTML document template The first step is to initiate the HTML structure of the webpage. A head section is used to contain document description information and links to resources such as the CSS stylesheet. The body section will contain the visible content. The HTML content will be placed inside the body section in step 2. Take note how the body container also has a ‘data-palette’ attribute describing the default palette to use. Palette Change *** STEP 2 2. Control and content The webpage consists of a drop-down list of available colour palette options, along with a visible content section. The drop-down list will be used as a control to trigger JavaScript functionality that will in turn trigger changes via the CSS style rules. This approach is highly useful for maintainability – hence keeping functionality to JavaScript and visual presentation within CSS. Palette 1 Palette 2 Palette 3 In a galaxy far away... 3. CSS initiate With the page HTML now complete, the next step is to create a new file called ‘styles.css’. This file is initiated with a set of rules to set the HTML document and body UX and visuals This type of feature can be used as both a visual efect and also to help visually impaired people – such as for colour blindness. container to cover the full screen without border spacing. Default font and colour settings are also set in this stage. html,body{ display: block; width: 100%; height: 100%; margin: 0; padding: 0; font-family: Helvetica, sans-serif; background: #fff; color: #000; } 4. Palette initiation The changing colour feature is made possible through the ‘data-palette’ attribute applied to the document body in step 1. This attribute can be applied to any element to control a specific area of the page. The default palette settings make sure that a transition of one second is applied and the background and colour changes so that they appear animated. [data-palette]{ transition: background 1s, color 1s; } 5. Palette definitions The final part of the CSS is to define the colours for each available palette option. The diferent palettes are identified by the ‘data-attribute’ value – options for 1, 2 and 3 are defined in this example, but you can use text names and other numbers too. Take note how these data values correspond to the options in the drop-down menu defined in step 2. [data-palette=”1”]{ background: #fff; color: #000; } [data-palette=”2”]{ background: #9C27B0; color: #FFEB3B; } [data-palette=”3”]{ background: #9E9E9E; color: #E91E63 } 6. JavaScript event listener Finally, create a new file called ‘code.js’ to store the JavaScript interaction code. First, the JavaScript waits for the page to load before applying an event listener to the drop-down list defined in step 2. This allows for the value of the drop-down menu to be applied to the ‘data-palette’ attribute applied to the body – hence triggering the CSS presentation when it is changed. window.addEventListener(“load”, function() { document.querySelector(‘[name=”palet te”]’).addEventListener(“change”, function(){ document.body.setAttribute(“datapalette”, this.value) }); }); 26 ___________________________________________________________________ lightbox
SAN FRANCISCO 9 JUNE <strong>2017</strong> 14 speakers, two tracks, one amazing day TICKETS ON SALE NOW www.generateconf.com
Page 1: 33 PAGES OF EXPERT TUTORIALS FREE 7
Page 4: contributors This issue’s panel o
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 Real-world UX and fa
Page 13 and 14: Header Opinion Web design - art or
Page 15 and 16: LightBox Three Cents #FFFFFF #ADC7D
Page 17 and 18: LightBox Three Cents Create animate
Page 19 and 20: #89FFFF #4668B4 #F472C6 #2B2529 Abo
Page 21 and 22: LightBox Alcanyte Create an article
Page 23 and 24: #BEA47D #FFFFFF #000000 #E0D4C2 Abo
Page 25: #E73D1A #FFFFFF #111111 #2341BE Abo
Page 29 and 30: WalkinG on Water WalkinG on Water C
Page 31 and 32: WalkinG on Water them about the dan
Page 33 and 34: WalkinG on Water There was a lot to
Page 35 and 36: Choose from our best-selling magazi
Page 37 and 38: The level of concentration is inten
Page 39 and 40: AGENCY BREAKDOWN 2x Tech Director 1
Page 41 and 42: wild extensively used WebGL to deli
Page 43 and 44: INDUSTRY INSIGHT Thomas Ragger Tech
Page 45 and 46: NEW GENERATION CSS CSS, just like e
Page 47 and 48: NEW GENERATION CSS Queries library
Page 49 and 50: UPDATE CSS CUSTOM PROPERTIES WITH J
Page 51 and 52: new generation CSS 5 key propertieS
Page 53 and 54: Animate multiple elements simultane
Page 55 and 56: Tutorials A ugmented reality has be
Page 57 and 58: Tutorials Code augmented reality ma
Page 59 and 60: Create a draggable left and right n
Page 61 and 62: Tutorials S ocial media is a huge p
Page 63 and 64: Tutorials Code social media buttons
Page 65 and 66: Create an interactive navigation di
Page 67 and 68: Which front-end frameWork? FRAMEWOR
Page 69 and 70: Which front-end frameWork? This req
Page 71 and 72: Which front-end frameWork? FRAMEWOR
Page 73 and 74: Which front-end frameWork? MAKING T
Page 75 and 76: GETTING STARTED WITH VUE.JS WHAT IS
Page 77 and 78:
GETTING STARTED WITH VUE.JS UP CLOS
Page 79 and 80:
CREATE THE IMPOSSIBLE www.photoshop
Page 81 and 82:
Developer tutorials W ith web frame
Page 83 and 84:
Developer tutorials What’s new in
Page 85 and 86:
Special offer for readers in North
Page 87 and 88:
Developer tutorials A fter you have
Page 89 and 90:
Developer tutorials Create a dashbo
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:
The home of great downloads - exclu
Page 100:
9000 9021
show all

Web_Designer_Issue_262_2017

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?