HTML5 design page Dynamic banner ad (Banner)

Banner ad (Banner):

1. Banner advertising is a common form of online advertising, generally located in the eye-catching position of the Web page, when users click on these banner ads, usually can link to the corresponding ad page;

2. When designing banner ads, we should strive to be simple and clear, can reflect the main theme of the Central, bright and vivid expression of the most important advertising intentions;

3. Banner ads can make a static image, or it can be a dynamic image. In general, compared with static banner ads, dynamic banner ads more eye-catching, more to attract audience attention;

4. Of course, this is still appropriate to the premise (hate the kind of window-type and suspended advertising) improper use will cause unintended consequences, and even so the viewer's aversion to create a vicious circle, so that the role of advertising is greatly compromised;

5. When designing banner ads, it is either static or dynamic, depending on which form is able to convey the message to the viewer accurately and quickly.

Design process:

(i) Writing HTML5 code

1. Enter the site you want to link when you click Banner

<class= "banner"  href= "http://yamoo9.com">

2. Add pictures and text to banner and identify elements using the class attribute

    <aclass= "banner"href= "Http://yamoo9.com">        <imgclass= "Banner-logo"src= "Images/banner-logo.png"alt= "Yamoo9.com"width= "167"Height= "134" />        <Pclass= "Banner-desc">Open knowledge lectures, video cast!<BR/>Share the design experience of paradise!<BR/>        <Strong>-Yamoo9</Strong></P>    </a>

(ii) Writing CSS3 style sheets

1. Control body Style

body {    padding:20px;    Background: #333;}

2. Control Banner Style

{    display: block;     width: 728px;     height: 176px;     Border: 1px solid #555;}

3. Set logo logo for banner ads

{    position: absolute;     top: 20px;     Left: 270px;}

4. Apply a font to text on banner

{    font: 32px/1.1 "Nanumpenweb", "founder Static Rachel", "Nanum Pen Script";}

You also need to add the Web font service in the HTML5 code

< title > CSS3 Banner Design-animated Banner </title><href   rel/>

5. Set the position and color of the banner font

{    opacity: 0;     position: absolute;     top: 39px;     Left: 170px;     font: 39px/1.1 "Nanumpenweb", "founder Static Rachel", "Nanum Pen Script";     color: #4ec1cd;}

{    font-size: 23px

6. Set the mouse pointer not to move to the banner on banner

{    position: relative;     background:         url (... /images/banner-arrow.png) no-repeat-100px 140px,         url (.. /images/banner-photo.png) no-repeat-40px 220px,         url (.. /images/banner-09.png) no-repeat-20px-380px,        url (.. /images/banner-bg.png) no-repeat 0 0;}  {    background-position:         20px 140px,         -40px 20px,         -20px-90px,        0 0;    }

Use the transition function to complete a series of picture movement operations

A.banner{position:relative;background:URL (.. /images/banner-arrow.png) no-repeat-100px 140px, url (.. /images/banner-photo.png) no-repeat-40px 220px, url (.. /images/banner-09.png) no-repeat-20px-380px, url (.. /images/banner-bg.png) no-repeat 0 0;-webkit-transition:All . 2s ease-in. 2s;-moz-transition:All . 2s ease-in. 2s;-o-transition:All . 2s ease-in. 2s;-ms-transition:All . 2s ease-in. 2s;transition:All . 2s ease-in. 2s;}. Modern A.banner:hover, A.banner:focus{background-position:20px 140px, -40px 20px, -20px-90px, 0 0; }. Modern. Banner-logo{position:Absolute;Top:20px; Left:270px;-webkit-transition:All . 4s ease-out. 3s;-moz-transition:All . 4s ease-out. 3s;-o-transition:All . 4s ease-out. 3s;-ms-transition:All . 4s ease-out. 3s;transition:All . 4s ease-out. 3s;}. Modern A.banner:hover. Banner-logo,. Modern A.banner:focus. Banner-logo{ Left:540px; }. Modern. Banner-desc{Opacity:0;position:Absolute;Top:39px; Left:170px;Font:39px/1.1 "Nanumpenweb", "founder Static Rachel", "Nanum Pen Script";Color:#4ec1cd;-webkit-transition:All . 4s ease-out. 3s;-moz-transition:All . 4s ease-out. 3s;-o-transition:All . 4s ease-out. 3s;-ms-transition:All . 4s ease-out. 3s;transition:All . 4s ease-out. 3s;}

Finally play a sound file using jquery

/*banner.js-banner Design script, 2012©yamoo9.com----------------------------------------------------------------*/;(function($){    $(function() {//$ (document). Ready ();                varbanner_audio=NewAudio (),//Create audio.WEBM = ISSUPPORTWEBM ();//Check if WEBM format is supportedBANNER_AUDIO.SRC = ' Media/banner_sound.mp3 '; /*if (WEBM) {//supports WEBM format banner_audio.src = ' MEDIA/BANNER_SOUND.WEBM ';        } else {//does not support WEBM format banner_audio.src = ' Media/banner_sound.mp3 '; };*/        $('. Banner '). Bind (' MouseOver Focusin ',function() {//call Handler when Mouseover,focusin event occursBanner_audio.load ();//Load AudioBanner_audio.play ();//Play Audio}). Bind (' Mouseout focusout ',function() {//call Handler when Mouseout,focusout event occursBanner_audio.pause ();//Pause AudioBanner_audio.currenttime = 0;//Initialize audio playback location            }); });}) (window.jquery);//function to detect whether WEBM formatfunctionISSUPPORTWEBM () {varTester = document.createelement (' Audio '); return!! Tester.canplaytype (' AUDIO/WEBM ');};

Final completed works:

HTML5 design page Dynamic banner ad (Banner)