ホームページ > 記事 > ウェブフロントエンド > 受賞歴のあるHTML5モバイル端末のシームレスなスクロールアニメーションの実装

受賞歴のあるHTML5モバイル端末のシームレスなスクロールアニメーションの実装

不言オリジナル: 2018-06-26 09:26:404118ブラウズ

この記事では、受賞歴のあるHTML5モバイル端末でのシームレススクロールアニメーションの実装例を中心に紹介します。内容がとても良いので、参考にさせていただきます。

この記事では、受賞歴のあるHTML5モバイル端末でのシームレススクロールアニメーションの実装例を紹介したいと思います。詳細は次のとおりです:

要件分析

はは、とてもわかりやすいですね。動的図を見た後。

転がる、転がる、どうやって作るの？要約すると、

html スケルトン

は、最も外側の e388a4556c0f65e1904146cc1a846bee は移動を制御するために使用され、25edfb22a4f469ecb59f1190150159c6 はアニメーションを表示するために使用されます。

基本的な CSS スタイル

まず基本的な CSS スタイルを実装します

<p class="roll" id="roll">
    <ul>
         <li>第一个结构</li>
         <li>第二个结构</li>
         <li>第三个结构</li>
         <li>第四个结构</li>
         <li>第五个结构</li>
         <li>第六个结构</li>
         <li>第七个结构</li>
         <li>第八个结构</li>
    </ul>
</p>

一般的なスタイルを見てみましょう:

実装のアイデア

1. jquery のアニメーションアニメーションを使用します

アニメーション化する( )メソッド

$(selector).animate(styles,speed,easing,callback)パラメータ:

styles: 必須パラメータ、アニメーション用に生成する必要がある CSS スタイル (キャメルケースの命名を使用)

speed: アニメーションの速度を指定します
@数値:1000 (ms)
@文字列: "slow"、"normal"、"fast"
イージング: アニメーション速度 (スイング、リニア)
callback: 関数実行後のコールバック関数

*{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

効果を確認してください:

2. 使用します。 css3 アニメーション

css3 のキーフレームを通じて、ステップをジャンプする効果を得ることができます。まずそのアイデアを簡単に見てみましょう。

予備

1. 1枚ずつ巻いている場合は、前のものを後ろにコピーする必要があります。を選択し、1 つ目と 2 つ目をコピーします。

    $(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的最后一个元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

2. 次に、スクロールする回数と各回の秒数を計算します。例では 2 回のスクロールに 5 秒かかるため、CSS3 のアニメーション時間は 5 秒です。では、@keyframe はいくつの部分に分割する必要があるのでしょうか?一時停止なので、各スクロールには 2 つのコピーが必要で、最後のスクロールはジャンプする必要があるため、コピーは 1 つだけなので、5 * 2 - 1 = 9 つのコピーが必要になることがわかります。コードを見るとわかります:

<p class="roll" id="roll">
        <ul>
             <li>第一个结构</li>
             <li>第二个结构</li>
             <li>第三个结构</li>
             <li>第四个结构</li>
             <li>第五个结构</li>
             <li>第六个结构</li>
             <li>第七个结构</li>
             <li>第八个结构</li>
             <li>第一个结构</li>
             <li>第二个结构</li>
        </ul>
</p>

。

上級数値が不確かなため、動的に計算する必要がある場合は、jsを使用して@keyframesを動的に追加し、間隔と移動距離を計算するだけで済みます。

1. まず f7e19b4a6bb3f2d5ebf810418a86000a の 1 番目と 2 番目のタグを作成し、ff6d136ddc5fdfeffaf53ff6ee95f185 に追加します。

コードについてはあまり言うことはありません:

/*这里不做兼容性处理*/
.roll ul{
    list-style: none;
    animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{  
    0%{
        margin-top: 0;
    }
    12.5%{
        margin-top: 0;
    }
    25%{
        margin-top: -40px;
    }
    37.5%{
        margin-top: -40px;
    }
    50%{
        margin-top: -80px;
    }
    62.5%{
        margin-top: -80px;
    }
    75%{
        margin-top: -120px;
    }
    87.5%{
        margin-top: -120px;
    }
    100%{
        margin-top: -160px; /*最后是一个，这样可以打断动画*/
    }
}

3. Zepto+transition実装

モバイル側のZeptoにはアニメーション機能がありません。CSS3属性を使用しない場合は、jsで記述する方法です。 ?

   function addKeyFrame(){
       var ulObj = $("#roll ul"),  //获取ul对象
             length = $("#roll li").length,  //获取li数组长度
             per = 100 / (length / 2 * 2 );  //计算中间间隔百分比
       // 拼接字符串
       var keyframes = `\    
       @keyframes ani{`;
       for(var i = 0 ; i<=length ; i++ ){
           keyframes+=`${i * per}%{
                           margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px;
                       }`;
       }
       keyframes+=&#39;}&#39;;
       var liFirst = $("#roll li:first"),   //获取第一个元素
           liSec = liFirst.next();    //获取第二个元素
       ulObj.append(liFirst.clone()).append(liSec.clone());   //将两个元素插入到ul里面
       $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
       ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
   }
   addKeyFrame();

別の方法があれば次回も随時更新していきます。ただし、モバイルの場合はこれで十分です。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

受賞歴のあるHTML5モバイル端末のシームレスなスクロールアニメーションの実装

関連記事