HTML5를 활용한 배너 제작 사례 공유-H5 튜토리얼-php.cn

HTML5를 활용한 배너 제작 사례 공유

零下一度

풀어 주다： 2017-05-19 14:08:13

원래의

10554명이 탐색했습니다.

배너:

1. 배너 광고는 일반적으로 사용자가 웹페이지에서 눈길을 끄는 위치에 게재되는 일반적인 온라인 광고 형태입니다. 광고를 디자인할 때 일반적으로 해당 광고 페이지로 링크할 수 있습니다.

2. 배너 광고를 디자인할 때는 단순하고 명확하게 노력하고 주요 중심 주제를 반영할 수 있으며 주요 광고 의도를 명확하게 표현할 수 있습니다.

3. 배너 광고는 정적 이미지일 수도 있고 동적 이미지일 수도 있습니다. 일반적으로 정적 배너 광고에 비해 동적 배너 광고가 더 눈길을 끌고 청중의 관심을 끌 수 있습니다.

물론 이는 적절하고 적합한 경우에만 해당됩니다(팝업 싫어함; 플로팅 광고를 부적절하게 사용하면 예상치 못한 결과가 초래될 수 있으며, 심지어 시청자들에게 혐오감을 불러일으키는 악순환을 초래하여 광고 본연의 효과를 크게 떨어뜨립니다.

5. 배너 광고를 디자인할 때 채택하는 것이 좋을까요? 정적 방식인가, 동적 형태인가는 어떤 형태가 표현하고자 하는 정보를 시청자에게 정확하고 빠르게 전달할 수 있느냐에 따라 달라진다.

디자인 과정:

(1) HTML5 코드 작성

1. 배너

<a class="banner" href="m.sbmmt.com">

로그인 후 복사

클릭 시 링크할 웹사이트 입력 2. 배너 에 사진과 텍스트를 추가하고 class 속성을 사용하여 요소를 식별합니다.

    <a class="banner" href="http://yamoo9.com">
        <img class="banner-logo" src="images/banner-logo.png" alt="yamoo9.com" width="167" height="134" />
        <p class="banner-desc">开放知识讲座, 视频Cast!<br /> 分享设计心得的乐园!<br />
        <strong>- Yamoo9</strong></p>
    </a>

로그인 후 복사

(2) CSS3 스타일 시트 작성

1. 본문 스타일 제어

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

로그인 후 복사

2 .배너 스타일 제어

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

로그인 후 복사

3. 배너 광고 로고 설정

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

로그인 후 복사

4. >

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

로그인 후 복사

동시에 HTML5 코드에 웹 글꼴 서비스를 추가해야 합니다

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

로그인 후 복사

5. 배너 글꼴의 위치와 색상을 설정합니다

.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. 설정 마우스 포인터가 배너의 배너로 이동하지 않았습니다

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;    
}

로그인 후 복사

전환 기능을 사용하여 일련의 이미지 이동 작업을 완료하세요

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;
}

로그인 후 복사

마지막으로 JQueryPlay sound files

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

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

로그인 후 복사

[관련 권장사항]

무료 h5 온라인 동영상 튜토리얼

HTML5 완전 버전 매뉴얼

php.cn 원본 html5 동영상 튜토리얼

4. >H5 비디오 태그가 소리만 재생되고 비디오가 재생되지 않는 문제에 대한 해결

IIS의 MIME은 MP4 형식을 등록하지 않아 비디오가 재생되지 않는 문제를 해결합니다. 태그를 인식할 수 없습니다

위 내용은 HTML5를 활용한 배너 제작 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!