はてなブックマーク

前書き WordPressの投稿画面でHTMLを記述しても消えてしまう時の対処法を掲載しています。 目次 対処 参考 対処 投稿画面で使用できるHTMLタグは制限されているので、使いたいHTMLタグの使用を許可する。 function.phpにコードを記述する。 例 YouTubeの埋め込みコードに関するHTMLタグ（iframe）と、その属性の使用を許可する。 //function.php add_filter( 'wp_kses_allowed_html', 'customKsesAllowedHtml', 10, 2 ); function customKsesAllowedHtml( $tags, $context ) { if ( $context == 'post' ) { $tags['iframe'] = array( 'width'=>true, 'height'=>tr

<div class="wrap"> <div class="item item01 js-311">いろは</div> <div class="item item02 js-312">いろは</div> </div> <div class="wrap"> <div class="item item01 js-321">にほへと</div> <div class="item item02 js-322">にほへと</div> <div class="item item03 js-323">にほへと</div> <div class="item item04 js-324">にほへと</div> </div> <div class="wrap"> <div class="item item01 js-331">ちりぬるを</div> <div class="item item02 js-33

前書き 文字に簡単な動きをつける方法（テキストアニメーション）を掲載しています。 目次 まとめて動きをつける 目隠し → 文字表示 複数行に線を引く 複数の線を引く 下から徐々に表示する 真ん中から開く 色を反転する 縁取り → 塗りつぶし 1文字ずつ動きをつける 飛び出す そっと置く 引き上げる 降ってくる 滑り込み 回転 ランダム アニメーションを繋げる その他 影を縞模様にして動かす 文字を円形に配置して回転させる 縁取りの線の色を変える 波のアニメーションを文字でマスクする 参考 まとめて動きをつける 目隠し → 文字表示 <div class="c01 active">犬も歩けば棒に当たる</div> .c01{ position: relative; color: transparent; &::before{ content: ""; position: absolute;

前書き うにょうにょ動かす方法を掲載しています。 目次 波線（平面） 波（平面） 丸 丸（重ねる） 波線（立体） 波（立体） 球 参考 波線 2つのパスを用意して、svgのanimate要素を使って動かしています。 <svg class="svg" width="720" height="10"> <path d="M 0 5 Q 10 10 20 5 Q 30 0 40 5" fill="none" stroke="#845080" stroke-width="2" /> </svg> <svg class="svg" width="720" height="10"> <path d="M 0 5 Q 10 0 20 5 Q 30 10 40 5" fill="none" stroke="#845080" stroke-width="2" /> </svg> .svg{ max-widt

前書き GSAPはGreenSock社が開発しているJavaScriptライブラリです。 アニメーションを設定するのにとても便利です。 その使い方を掲載しています。 目次 準備 Tween Timeline ScrollTrigger 一度だけ 繰り返し スクロール量に応じて動かす ピン留め クラスを付ける activeになった時に何かする ScrollTriggerの活用例 スクロールする度に何かする 複数箇所を同じ様に動かす 複数箇所を同じ様に動かす__batch 横にスクロールさせる 順番にスクロールさせる 異なる速度でスクロールさせる（パララックス） スクロールしたらパッと切り替える スクロールしたらパッと切り替える__observe 奥にスクロールしている様に見せる 参考 準備 こちらのページからダウンロード出来ます。 GSAP Installation 当ページでは、3つのファ

前書き 円を描くように要素を動かす方法を掲載しています。 目次 JavaScriptで動かす（平面） CSSで動かす（平面） SVGで動かす（平面） Canvasで動かす（平面） Canvasで動かす（立体） 参考 JavaScriptで動かす（平面） 下記の方法で動かしています。 CSSで要素を中央に寄せる 三角関数を使って要素の座標を決める 要素のstyle属性を変更する 一定時間毎に繰り返す 円座標を親要素の大きさに合わせて調整しているので、親要素が正方形であれば真円、長方形であれば楕円を描くように動きます。 また、Intersection Observer APIを使って、見えている時だけ動くようにしています。 <div class="wrap js-wrap"> <div class="item item-01 js-item" data-opt="0.3, 0, 0.25">