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)