CSS3を使った、テキストを波のようになめらかに動かすアニメーションです。
概要
Webページで h タグなどの見出しにも使えるよう、通常のテキストを1文字ずつ span タグで囲った文字に変換し、それらをインラインブロック要素としてそれぞれアニメーションさせています。
テキストの変換は jQuery の replaceメソッドを使っています。
実際に作成したデモのHTML、CSS、JS の3つのファイルで説明します。
See the Pen
テキストを波のように動かす by J. (@umvjcqzk)
on CodePen.
HTML
デモの demo.html の中身です。
headタグ内で demo.css を読み込み、bodyタグ内の最後にjQueryと demo.js を読み込んでいます。
bodyタグ内のコンテンツは p タグのテキストのみです。
HTML
<!doctype html> <html lang="ja"> <!-- headタグ部↓ --> <head> <meta name="robots" content="noindex"> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <!-- headタグ部↑ --> <body> <p>川の流れのように</p> <!-- スクリプト読み込み部↓ --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js?ver=1.4.1'></script> <script src='demo.js'></script> <!-- スクリプト読み込み部↑ --> </body> </html>
CSS
デモの demo.css の中身です。
CSS
@charset "UTF-8"; /*** アニメーションの定義 ***/ @keyframes textWave { 0% { top: 0; } 100% { top: -0.25em; /* top位置を4分の1上げる */ } } /*** フォント設定 ***/ p span { font-size: 200%; color: #29a2d4; display: inline-block; /* インラインブロック要素とする */ position: relative; /* 相対位置とする */ } p span { animation-name: textWave; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; /* 無限に繰り返す */ animation-direction: alternate; /* 再生・逆再生を繰り返す */ } p span:nth-of-type(2) { animation-delay: 0.5s; /* アニメーション開始までの遅延(以下、同じく) */ } p span:nth-of-type(3) { animation-delay: 1s; } p span:nth-of-type(4) { animation-delay: 1.5s; } p span:nth-of-type(5) { animation-delay: 2s; } p span:nth-of-type(6) { animation-delay: 2.5s; } p span:nth-of-type(7) { animation-delay: 3s; } p span:nth-of-type(8) { animation-delay: 3.5s; }
JS
demo.js には下記のコードが書かれています。
jQuery
//テキストの一文字ずつを span 囲みに置き換える $('p').each(function(){ var txt= $(this).html(); $(this).html(txt.replace("川の流れのように","<span>川</span><span>の</span><span>流</span><span>れ</span><span>の</span><span>よ</span><span>う</span><span>に</span>") ); });
以上、ご参考になれば幸いです。
コメント