アニメーション

jQuery

jQueryで別ページの動的に生成した要素までページ内リンクを効かせる

jQueryで動的に、コンテンツを生成したページへ、別ページのaタグからリンクした時に、指定要素のidにまでページ内でスクロールさせたいが、できない問題の対策jQuery関連記事概要下記のようなページ1があったとする。htmlページ1はリン...
css

cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選

cssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。今回は、画像にアニメーションを付けたいのでim...
css

cssで要素に動きや変化をアニメーションでつける、keyframesの使い方

cssで要素に動きや変化をアニメーションでつける、keyframesの使い方css関連記事今回、imgタグにアニメーションを付けてみます。htmlkeyframesの使い方cssanimation_testがアニメーションの名前を任意でつけ...
css

SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する

SVG画像をhtmlに埋め込み、cssのプロパティで色や大きさなどのスタイルを変更する方法css関連記事svgのデータは「icooon-mono」さんからのデータをsvgでお借りしました。デモを用意しました。1.svgをhtmlに反映するダ...
jQuery

【jQuery】コピペでできる!クリックで開閉するアコーディオンメニューサンプル8選

jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、7種類実装しました。クリックしたときに開いたままにしておくものや、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール&該当アコーディオンメニューの開閉などのサンプルです。