9 months ago


web workshop Overlay

web workshop Overlay graphics on video backgrounds Inspired by Call to Action After the images have animated onto the screen, the text and call to action button appear on the screen enabling the user to go deeper into the experience. Main navigation The main navigation is available, hidden behind the main burger menu. Clicking this animates the overlay menu down from the top of the screen. Video background The site is set up to tell a story, very similar to a documentary, and the main background is a full screen video. Overlaid SVG images When the video starts to play,thecrispSVGimages spring forward and expand intoplaceinthecentreof the display. Keeping you orientated The bottom of the screen has three stages of the story and locatestheuserwheretheyare as a means of navigation to efficiently get around. 50 ____________________________________________workshop

Overlay graphics on video backgrounds DOWNLOAD TUTORIAL FILES EXPERT ADVICE Engage the user The Project Redspace site works so well because it engages the user with a strong narrative. Having a story at its core makes the user intrigued, wanting to know more as they are drawn deeper into the unfolding events. With the user actively engaged in the content, they will take time to explore all that the site offers. What our experts think of the site An easy to follow process Making use of video segments throughout the site shows the design process of the car in a very visual way that creates a compelling story to hook the user into the ideology of the project’s goals. Three main pages work together to tell different aspects of the story and make for easy navigation. Mark Shufflebottom, Professor of Interaction Design Technique 1. Creating graphics over video The first step in creating graphics over video background is to add the video to the document. The video placeholder here is an open source movie that will serve as a background. This is placed inside a div tag and appropriate classes are added for CSS control. 2. Adding the graphics Below the video in the body section, the content is added. In this case that content is going to be two SVG graphic elements and a heading. The content is placed over the top of the video and then the graphics will be stacked up through CSS. Journey 3. Creating your CSS In the heading section of the page, or in a separate style sheet, add the following code. The first rule sets all elements to have border-box sizing so that the border and padding are included in sizes. The body of the page is given the full height of the browser. * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } 4. Position the background video The background video is positioned absolutely over the full dimensions of the screen and given a minimum width and height so that they always completely fill the screen. This video element is centred vertically and horizontally in the browser. .fullscreen-bg_video { position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); } 5. Content positions The container for the video is given a fixed background position and is positioned to fill the entire screen, while being placed behind all other elements on the display. The content runs, by default, over the top of the other media and is told to be relatively positioned. .fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .content { margin: 0 auto; width: 100%; height: 100%; max-width: 960px; padding: 0 15px; position: relative; } 6. Positioning the graphics The graphics are placed over the top by placing them absolutely in the relatively positioned content box. This class is applied to graphics and heading so that it’s over the top. Finally the heading is styled up with the appropriate font and colours. .graphics { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } h1 { font-size: 8em; text-align: center; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; color: #fff; } workshop ______________________________________________51