Animate.css + inView.js 【サンプル】

wow.jsは1回オンリーに対し、inView.jsは描画域に入るたび動作します。

ただ、wow.jsはコードがシンプルなのに対し、 inView.jsにすると、少しコードが複雑化しちゃうので、 シンプルに使えるように書いてみました。

JavaScriptがよく分かってないので良い書き方があれば教えてください…。

※data-timeはミリ秒を入れることで実行を遅延できるようにしてます。

See the Pen Animate.css + inView.js [Sample] by inou-e (@inou-e) on CodePen.


使用方法:

animate.css

inview.js

を読みこみます。

任意のJSファイルを作成し、下記を記述 script.js

$(function(){
	var t;
	var ani;
	$('.iv').on('inview', function(event, isInView) {
		if (isInView) {
			t = $(this).attr("data-time") ? $(this).attr("data-time") : 0;
			$(this).delay(t).queue(function(){
				ani = $(this).attr("class").match(/iv\-([A-Za-z]+)/);
				$(this).addClass('animated '+ani[1]);
				$(this).css('opacity',1);
			});
		} else {
			ani = $(this).attr("class").match(/iv\-([A-Za-z]+)/);
			$(this).removeClass('animated '+ani[1]);
			$(this).css('opacity',0);
			$(this).dequeue();
		}
	});
});

アニメーションさせたいオブジェクトに以下のようにクラスを追加します。
class=”iv iv-【animate.cssのクラス名】”

例:Animate.cssのbounceを追加する場合
class=”iv iv-bounce”

例:1秒遅延させる場合
data-time=”1000″

<*** class=”iv iv-bounce” data-time=”1000″>

Photoshop 画像加工自動化 jsx

Photoshopの画像加工を自動化

いつも行ってる作業内容

元画像データ40枚(サイズ2種類)

アクションを使用して、元画像からの加工が6パターン

元画像→加工からの再加工が2パターン

ファイル名は元画像のままで、フォルダを変えて保存

アクションを使用してもパターンが多いので微妙に時間が取られるので、

1処理ですべてを完結させてみました。

var IN_FOl = Folder.selectDialog("画像フォルダを選択してください");
var OUT_FOL = Folder.selectDialog("出力先のフォルダを選択してください");
var images = IN_FOl .getFiles("*.jpg");

// 保存初期設定
var webOpt = new ExportOptionsSaveForWeb();
webOpt.format = SaveDocumentType.JPEG; //画像の形式
webOpt.interlaced = true; // インターレースにするか(プログレッシブJPGにするか)
webOpt.optimized= true; // 最適化
webOpt.quality = 70; // 画質(0~100)

// 一括処理設定
var pat = new Array("サイズA", "サイズB", "サイズC", "サイズD", "サイズE", "サイズF", "サイズG", "サイズH"); // 保存パス
var act = new Array("アクションA", "アクションB", "アクションC", "アクションD", "アクションE", "アクションF", "アクションG", "アクションH"); // アクション名

// ループ処理
for (var a=0; a<act.length; a++) {
if (a == 1) {
var OUT_FOL2 =new Folder(OUT_FOL + "/サイズA/");
images = OUT_FOL2.getFiles("*.jpg");
}
if (a == 6) {
var OUT_FOL2 =new Folder(OUT_FOL + "/サイズB/");
images = OUT_FOL2.getFiles("*.jpg");
}
for (var i=0; i<images.length; i++) {
var FN = images[i].name;
var OpenImage = app.open(images[i]);

// 保存フォルダ作成
var SavePath = OUT_FOL + '/' + pat[a];
if (!SavePath.exists) {
Folder(SavePath).create();
}

// アクション
var idPly = charIDToTypeID("Ply ");
var desc = new ActionDescriptor();
var idnull = charIDToTypeID("null");
var ref1 = new ActionReference();
var idActn = charIDToTypeID("Actn");
// サイズ違い用の別アクション処理
if (FN.match(/ファイル名一部/) && a<2) {
ref1.putName(idActn, act[a]+"_サイズ違い"); // サイズ違い専用アクション名
} else {
ref1.putName(idActn, act[a]);
}
var idASet = charIDToTypeID("ASet");
ref1.putName(idASet, "画像処理");
desc.putReference(idnull, ref1);
executeAction(idPly, desc, DialogModes.NO);

// 保存パス
var SaveImg = SavePath + "/" + FN;

// 書出し&破棄
var imgfile = new File(SaveImg);
activeDocument.exportDocument(imgfile, ExportType.SAVEFORWEB, webOpt);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
}
alert("処理を終了しました。");