JavaScript

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

2016.04.19 / Notes

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

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

//TweenMax.to(要素, 秒数, プロパティ);
TweenMax.to("#box1", 1, {scale:2});

1 2	//TweenMax.to(要素, 秒数, プロパティ); TweenMax.to("#box1", 1, {scale:2});

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

var tl = new TimelineLite();
tl.to("#box2", 1, {scale:2}).to("#box2", 1, {rotation:90}).to("#box2", 1, {scale:1});

1 2	var tl = new TimelineLite(); tl.to("#box2", 1, {scale:2}).to("#box2", 1, {rotation:90}).to("#box2", 1, {scale:1});

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

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

TweenMax（GSAP）

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

2015.07.20 / Labs

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

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

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

$(function() {
	$("#test").on("load", function() { //object読み込み後に実行
		var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得
		var circle = rect.find("#circle"); //SVGの中の円を取得
		circle.on({
			"mouseenter": function() {
				$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に
			},
			"mouseleave": function() {
				$(this).css({opacity:1}); //マウスアウトで透明度を1に
			}
		});
	});
});

$(function() {

$("#test").on("load", function() { //object読み込み後に実行

var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得

var circle = rect.find("#circle"); //SVGの中の円を取得

circle.on({

"mouseenter": function() {

$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に

"mouseleave": function() {

$(this).css({opacity:1}); //マウスアウトで透明度を1に

}

});

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="circle" fill="#333333" cx="50" cy="50" r="50"/>
</svg>

</svg>

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

JavaScriptライブラリの読み込みにCDNを活用。

2015.07.17 / Notes

jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。

主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。

jQueryの最新版をそれぞれ読み込む場合、次のようになります。

<!-- Google Hosted Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Microsoft Ajax Content Delivery Network -->
<script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

<!-- jsDelivr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- cdnjs.com -->
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>

複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。

jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。

<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script>

1	<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script>

jQueryによる画像プリロード。

2015.02.02 / Notes

CSSを使ってボタンのロールオーバーで画像を差し替えなどの処理の際に、画像が読み込まれていない状態では一瞬ちらつきが発生することがあります。
ロールオーバー用の画像をあらかじめ読み込むために、jQueryを使って画像をプリロードするためのメモです。

//プリロードする画像を配列で渡します
priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]);

function preloadImages(images) {
	$.each(images, function(index, value) {
		$("<img>").attr("src", value);
	});
}

//プリロードする画像を配列で渡します

priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]);

function preloadImages(images) {

$.each(images, function(index, value) {

$("<img>").attr("src", value);

});

}

Drupal 7のテーマでIE向けのJavaScriptの読み込み。

2014.04.05 / Notes

Drupalのテーマで、古いIE向けに条件コメント付きのJavaScriptの読み込み方法です。

テーマディレクトリ内の「template.php」ファイルにプリプロセスとして次のように記述します。

<?php
function THEMENAME_preprocess_html(&$variables) {
	drupal_add_html_head(array(
		'#tag' => 'script',
		'#attributes' => array('src' => drupal_get_path('theme', 'THEMENAME').'/js/ie9.js'),
		'#prefix' => '<!--[if lt IE 9]>',
		'#suffix' => '</script><![endif]-->'
		),
		'ie9'
	);
}
?>

<?php

function THEMENAME_preprocess_html(&$variables) {

drupal_add_html_head(array(

'#tag' => 'script',

'#attributes' => array('src' => drupal_get_path('theme', 'THEMENAME').'/js/ie9.js'),

'#prefix' => '<!--[if lt IE 9]>',

'#suffix' => '</script><![endif]-->'

'ie9'

);

}

実際のレンダリングでは次のようになります。

<!--[if lt IE 9]>
<script src="sites/all/themes/THEMENAME/js/ie9.js" /></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->