この記事では、受賞歴のあるHTML5モバイル端末上でのシームレススクロールアニメーションの実装例を紹介し、皆さんに共有します。詳細は次のとおりです。
ニーズ分析
あはは、ダイナミックな写真をアップロードした直後は本当に鮮明です。
転がる、転がる、どうやって作るのでしょう？要約しましょう:
htmlスケルトン実際には非常に単純です。一番外側の <div> は固定ウィンドウとして使用され、内側の <ul> は動きを制御し、内側の <li> はアニメーションを表示します。
<div class=roll id=roll> <ul> <li>最初の構造</li> <li>2番目の構造</li> <li>3番目の構造</li> <li>4番目の構造</li> li> <li>5 番目の構造</li> <li>6 番目の構造</li> <li>7 番目の構造</li> <li>8 番目の構造</li> </ul></div>基本的な CSS スタイル
まず基本的な CSS スタイルを実装します
*{ マージン: 0; パディング: 0; }.roll{ マージン: 100 ピクセル; 幅: 200 ピクセル; 高さ: 40 ピクセル; ボーダー: 1 ピクセル ソリッド アクアマリン;}.roll ul{ リスト スタイル: なし;}ロールリ{行の高さ:20ピクセル;テキストの整列:センター;}一般的なスタイルを確認できます。
実装のアイデア1. jqueryのanimateアニメーションを利用するanimate() メソッド
$(selector).animate(styles,speed,easing,callback)
パラメータ:
スタイル: 必須パラメータ、アニメーション化する必要がある CSS スタイル (キャメルケースの名前を使用)
速度: アニメーションの速度を指定します。
@番号:1000(ミリ秒)
@string:遅い、通常、速い
イージング:アニメーション速度(スイング、リニア)
callback: 関数実行後のコールバック関数
$(document).ready(function(){ setInterval(function(){ // 1.5 秒ごとに変換するタイマーを追加 $(#roll).find(ul:first).animate({ marginTop:-40px //各移動の距離},500,function(){ //アニメーションの移動時間//$(this) は ul オブジェクトを参照します。 //ul がリセットされた後、最初と 2 番目の要素を //ul の最後の要素の位置に挿入 $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this) });効果を見てみましょう:
2.css3アニメーションアニメーションを使用するCSS3 のキーフレームを使用すると、ステップスキップの効果を得ることができます。まずそのアイデアを簡単に見てみましょう。
予備1. ハードコードされた特典の場合は、1 つずつロールされている場合は、最初の 1 つを後ろにコピーする必要があります。2 つずつロールされている場合は、1 つ目と 2 つ目をコピーします。 .個人。
<div class=roll id=roll> <ul> <li>最初の構造</li> <li>2番目の構造</li> <li>3番目の構造</li> <li>4番目の構造</li> li> <li>5 番目の構造</li> <li>6 番目の構造</li> <li>7 番目の構造</li> <li>8 番目の構造</li> <li>1 番目の構造</li> > <li>2 番目の構造</li> </ul></div>
2. 次に、スクロールする回数と一度に何秒かかるかを計算します。この例では 2 回のスクロールに 5 秒かかるため、CSS3 のアニメーション時間は 5 秒です。では、@keyframe はいくつの部分に分割する必要があるのでしょうか?一時停止なので、各スクロールには 2 つのコピーが必要ですが、最後のスクロールはジャンプする必要があるため、コピーは 1 つだけなので、5 * 2 - 1 = 9 つのコピーが必要になることがわかります。
/*ここでは互換性処理は行われません*/.roll ul{ list-style: none; anime: ani 5s line infinite /*アニメーション ani, 5s、ループ内で一定の速度で再生されます*/}@keyframes ani{ 0 %{ マージントップ: 0; } 12.5%{ マージントップ: 0; } 25%{ マージントップ: -40px; 50%{ マージントップ: -80px; } 62.5%{ マージントップ: -120px; 87.5%{ マージントップ: -120px; top: -160px; /*最後のものはアニメーションを中断する可能性があります*/ }}高度な数値が不明な場合は動的に計算してjsで動的に@keyframesを追加する必要がありますが、その際に移動する間隔と距離が計算できれば大丈夫です。
1. まず <li> の長さを取得します。
2. 次に、間隔のパーセンテージを計算します。一時停止があるため、秒数 × 2 を使用することを忘れないでください。
3. 次に、文字列を使用して @keyframes、0~長さ (長さを含む) を入力します。もう 1 つあるため、偶数と奇数は分離されます。
4. <ul> の最初と 2 番目の単語を <ul> の末尾に複製します。
5. <style> タグを作成し、<head> に追加します。
6. <ul>にアニメーション属性を追加します。
早速、コードについて説明しましょう。
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; } var liFirst = $(#roll li:first), //最初の要素を取得 liSec = liFirst.next(); // 2 番目の要素を取得します ulObj.append(liFirst.clone()).append(liSec.clone()); // 2 つの要素を ul $(<style>).attr(type,text/ css) に挿入します。 html(keyframes).appendTo($(head)); // ヘッドにキーフレームを挿入するためのスタイルタグを作成します ulObj.css(animation,ani 5s line infinite); // ul} addKeyFrame(); に css3 アニメーションを追加します。 3.ゼプト+トランジションの実装モバイル側の Zepto にはアニメーション機能がありません。CSS3 属性を使用しない場合、どうやって JS で記述することができますか?
var timer,top;function roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //最初と 2 番目を <ul> タグに追加しますclearInterval(timer); timer = setInterval(function(){ //タイマーを設定します var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ // 現在の高さが末尾にない場合は、上に移動します -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //最後まで到達するとすぐにゼロになります top = 0; {-webkit-transition:none,transition:none,margin-top:top}); // ここに遅延器を追加します。2 つのアニメーションが結合するのを避けるために、遅延器はキューの最後に実行される必要があります。 top -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,マージントップ :top}); },0) } },2000);}roll();また別の方法があれば次回から随時更新していきます。ただし、モバイルの場合はこれで十分です。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。