タグ「アニメーション」の付いた記事

ページ上部やページ内へのリンクをスクロールさせる

jQueryを使って、ページの上へ戻るボタンやページ内リンクをスクロールさせる方法です。基本的には簡単です。 準備 ページ内の特定の場所へ移動するリンクは、移動先のHTML要素にid属性を設定します。リンク元のhref属性には#(フラグメント識別子)に続くid … 続きを読む

source

<source>要素は、<video>や<audio>などメディア要素の中で、ファイルを指定するために使用します。 <video>などメディア要素のsrc属性を使った場合、異なるバージョンまたはフォーマットのファイルを用意していても一つのファイルしか示すことが出来ま … 続きを読む

video

<video>要素は、ビデオやムービー、キャプションを含むオーディオファイルの再生に使用します。 <video>要素に対応しているブラウザでは、要素の内容は表示されません。内容には、<video>要素に対応していない古いブラウザのためのコンテンツを入れることができま … 続きを読む

ページをフワッとフェードインさせる

タイトル通り、ウェブページを読み込んだ時にふわっとフェードインで表示させるやり方です。フェードインは、CSSだけで再現するのであればanimationでできますが、今回のはjQueryの話になります。たまたま jQuery でフェードインするのに「CSS で body を非表示にしておきます」み … 続きを読む

jQueryでCSSのtransform: rotate()を使った回転アニメーションする際のメモ

回転のアニメーションを実現するだけのシンプルなjQueryプラグインもあるようですが、それだけのためにプラグイン読み込むのもイマイチなので、もっと簡単にCSSのtransitionを使って回転させます。 2016.9.17 追記 動かないコードが載っていたので削除して加筆修正 … 続きを読む