JavaScript

GSAPでアコーディオンメニュー作成のサンプル

2022.01.09 / Notes

JavaScriptライブラリのGSAPを使ったアコーディオンメニュー作成のサンプルです。
サンプルはこちら
HTMLは「div.menu」内に開閉用のボタンとリストのみを配置します。

初期表示で「height:0px; overflow: hidden;」として見えない状態にしておきます。
「pointer-events: none;」は閉じている時に、タブキー等でメニュー内の項目にフォーカスが当たらないようにしています。

開閉用のボタンがクリックされたら、「open」クラスの有無により開閉を行います。

YouTubeの埋め込みをレスポンシブに対応。

2020.04.22 / Notes

YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。

WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript(jQuery)で一括で処理を行っておくと便利です。

FullCalendarバージョン4の設置サンプル。

2019.08.14 / Labs

カレンダーの生成に便利なFullCalendarがバージョン4になり、ファイル構成や記述方法が大きく変わりましたので、簡単なサンプルを作成しました。
FullCalendarのJavaScript、CSSの各ファイル(計4点)はCDNから読み込んでいます。
サンプルはこちら

日本語化には標準で各言語に対応(ドキュメント)していますが、細かい調整のためにそちらはあえて使わず、個別に書き換えています。
イベント情報のJSONファイル(events.json)は次のように記述しています。外部ファイルではなく、直接記述でもOKです。

JavaScriptのアニメーション用ライブラリ「TweenMax」。

2016.04.19 / Notes

高機能アニメーション用ライブラリ「TweenMax」を使ってみました。
JavaScriptによるアニメーションのライブラリはいくつかありますが、その中でも「TweenMax」はパフォーマンスも高く、機能も豊富です。
サンプルはこちら

 

単純なアニメーションであれば、下記のように書くことができます。

もう少し複雑なアニメーションの場合には、TimelineLiteクラスを利用したほうが良いかもしれません。

TimelineLiteクラスでは、メソッドチェーンで連続したアニメーションを作成できます。

 

上記では「TweenMax」「TimelineLite」を使っていますが、その他に「TweenLite」「TimelineMax」があります。
名称の通りMaxが付く方が全機能版で、Liteは軽量版になります。
SVGやCanvasにも使えるので、アニメーションの作成には重宝しそうです。

 

TweenMax(GSAP)

jQueyで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

 

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

 

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

「test.svg」ファイルの中身はこちら

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。