1. ホーム
  2. Web制作
  3. html5

HTML5 モバイルポップアップアニメーション効果

2022-02-06 05:34:57

アイデア

1. 個々のコンテンツを編集し、自身の幅を計算し、初期位置を決定する

2. 画面幅に距離を移動させる

3. 高さ、アニメーション移動時間、アニメーション遅延時間を乱数で制御するCSSアニメーション関数をjsで動的に追加する。

コード

htmlスケルトン構造

(例として3つ、インターフェイスが長すぎて不親切だと感じる場合はjs動的生成)。

<div class="cute-barrage">
    <div class="barage-div">
        <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg"/>
        <span>January's chanting repayment period is here<i>hahaha</i></span>
    </div>
    <div class="barrage -div">
        <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg"/>
        <span>Sitting on the payroll<i>Ho-hum</i></span>
    </div>
    <div class="barrage -div">
        <img src="... /... /static/cutePresent/resource/avatar.png"/>
        <span>Become rich become rich<i>Yeah yeah yeah</i></span>
    </div>
</div>



cssスタイル

.cute-barrageは、表示の範囲と位置を決めるもので、幅は100%、高さはカスタム、その先の水平部分は非表示です。
.barage-div コンテンツセクション、長さはコンテンツによって決まり、親からの相対的な位置が決定されます。

html,body{
    width:100%;
}
.minute-barrage{
    width: 100%;
    height: 4rem; /* determine the length of the barrage*/
    position: absolute;
    top: 1.5rem; /*determine the height of the barrage*/
    left: 0;
    overflow-x: hidden; /* hide the horizontal part of the overflow*/
    .barage-div{
        position: absolute;
        top: 0;
        right: -100%; /*Make sure it starts on the outside of the interface, right is right from right to left, left is left from left to right*/
        height: 0.6rem;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 2rem;
        white-space: nowrap; /*make sure the content is displayed in one line, otherwise it will move to the end and break the line*/
        img{
            width: 0.5rem;
            height: 0.5rem;
            vertical-align: middle; //inline block element, center-aligned
            padding-left: 0.05rem;
            border-radius: 50%;
        }
        span{
            font-size: 14px;
            padding: 0 0.1rem;
            line-height: 0.6rem; //inline block element, center-align all four
            height: 0.6rem; //inline block element, one of the four missing elements must be centered
            display: inline-block; //inline block element, center-align all four missing elements
            vertical-align: middle; //inline block element, center-align four missing elements
            i{
                color: #fe5453;
                font-weight: 700;
            }
        }
    }
}

js動的アニメーション実装(zepto.js)

// popup
var winWidth = $(window).width(); //Get the screen width
$(".barage-div").each(function(index,value){ // iterate through each popup
    var width = $(value).width(); //Get the width of the current popup
    var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Get a random number of 0,1,2 that can be changed as appropriate
    $(value).css({"right":-width,"top":topRandom}); //move the popup to the outside of the screen, just beyond
    //spell out the animation frame function, remembering that each ani should be differentiated and the width moved a full screen distance from its own negative width    
    var keyframes = `\    
        @keyframes ani${index}{   
            form{
                right:${-width}px;
            }
            to{
                right:${winWidth}px;
            }
        }\    
        @-webkit-keyframes ani${index}{
            form{
                right:${-width}px;
            }
            to{
                right:${winWidth}px;
            }
        }`;      
    // Add to the page inside the head tag
    $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));      
    // Define the animation speed list
    var aniList = [3,5,7,9,11];
    //take the random number of the array, 0,1,2,3,4
    var aniTime =Math.floor(Math.random() * 5);
    // add animation to the css when the full front popup
    //delay the time with each of * 1.5 times, this variable
    $(value).css({"animation":`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`,"-webkit-animation":`ani${index } ${aniList[aniTime]}s linear ${index * 1.5}s`});
})

概要

以上、モバイルポップアップアニメーション効果のHTML5実装について少し紹介しましたが、お役に立てれば幸いです。これからもスクリプトハウスのウェブサイトをよろしくお願いします。

この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください、ありがとうございます。