Share examples of making banners using HTML5

Banner:

1. Banner ads are a common form of online advertising, generally located in prominent locations on web pages; when users click on these banner ads When designing, you can usually link to the corresponding advertising page;

2. When designing banner ads, strive to be simple and clear, be able to reflect the main central theme, and express the main advertising intention clearly and vividly;

3. Banner ads can be static images or dynamic images. Generally speaking, compared with static banner ads, dynamic banner ads are more eye-catching and can attract the audience's attention; Improper use of floating advertisements will cause unexpected consequences, and even cause a vicious circle of disgust among viewers, thus greatly reducing the original effect of the advertisement;

5. When designing banner ads, should static Form or dynamic form depends on which form can accurately and quickly convey the information to be expressed to the viewer.

Design process:

(1) Write

HTML5 code

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

<a class="banner" href="www.php.cn">

2. Add pictures and text to the Banner

anduse the class attribute to identify the element

    <a class="banner" href="http://yamoo9.com">
        <img class="banner-logo lazy"  src="/static/imghwm/default1.png"  data-src="images/banner-logo.png"    alt="yamoo9.com"    style="max-width:90%"  style="max-width:90%" />
        <p class="banner-desc">开放知识讲座, 视频Cast!<br /> 分享设计心得的乐园!<br />
        <strong>- Yamoo9</strong></p>
    </a>

(2) Writing CSS3 style sheet

1. Control body style

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

2 .Control the Banner style

a.banner {
    display: block;
    width: 728px;
    height: 176px;
    border: 1px solid #555;
}

3.Set the logo of the banner ad

.modern .banner-logo {
    position: absolute;
    top: 20px;
    left: 270px;
}

4.Apply the font to the text on the Banner

.modern .banner-desc {
    font: 32px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
}

At the same time, you also need to add the Web font service in the HTML5 code

<title>CSS3 Banner Design - 动画Banner设计</title>
<link href=&#39;api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb&#39; rel=&#39;stylesheet&#39; />

5. Set the position and color of the Banner font

.modern .banner-desc {
    opacity: 0;
    position: absolute;
    top: 39px;
    left: 170px;
    font: 39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
    color: #4ec1cd;
}

.modern .banner-desc strong {
    font-size: 23px;
}

6.Set The mouse pointer has not moved to the Banner on the Banner

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;

}
.modern a.banner:hover, a.banner:focus {
    background-position: 
        20px 140px, 
        -40px 20px, 
        -20px -90px,
        0 0;    
}

Use the transition function to complete a series of image moving 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", "方正静蕾简体", "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 use

JQueryPlay sound file

/* banner.js - Banner设计脚本, 2012 © yamoo9.com    
---------------------------------------------------------------- */
;(function($){
    $(function() { // $(document).ready(); 文档准备好后运行
        
        var banner_audio= new Audio(),        // 创建Audio.
             webm = isSupportWebM();    // 检查是否支持webm格式
        banner_audio.src = 'media/banner_sound.mp3';
        /*if(webm) {   //支持webm格式
            banner_audio.src = 'media/banner_sound.webm';
        } else {    // 不支持webm格式
            banner_audio.src = 'media/banner_sound.mp3';
        };*/
        $('.banner')
            .bind('mouseover focusin', function() { // 当发生MouseOver，FocusIn事件时调用处理函数
                banner_audio.load(); // 加载audio
                banner_audio.play(); // 播放audio
            })
            .bind('mouseout focusout', function() { // 当发生MouseOut，FocusOut事件时调用处理函数
                banner_audio.pause();             // 暂停audio
                banner_audio.currentTime = 0;    // 初始化audio播放位置
            });
        
    });
})(window.jQuery);

// 检测是否webm格式的函数
function isSupportWebM() {
    var tester = document.createElement('audio');
    return !!tester.canPlayType('audio/webm');
};

【Related recommendations】

1.

Free h5 online video tutorial

2.

HTML5 Complete Edition manual

3.

php.cn original html5 video tutorial

4.

Solution to the problem that the H5 video tag can only play sound but not video

5.

The MIME of IIS does not register the MP4 type, resulting in the solution that the vidoe tag cannot be recognized

The above is the detailed content of Share examples of making banners using HTML5. For more information, please follow other related articles on the PHP Chinese website!