SMOOTH-GESTURES「先頭へ移動」「末尾へ移動」の復活方法

相変わらずChromeのマウスジェスチャーをSMOOTH-GESTURESにしています。

ただ、ずいぶん前にChromeの仕様が変わったせいで[先頭へ移動] [末尾へ移動]が動かなくなっておりました。

そこまで不便ではなかったので放置していたのですが、何となく復活させてみたので方法を紹介します。

しかし、未だに使っている人はいるのだろうか・・・?笑

 

前回の記事も参考にして頂きながら、smooth-gestures-0.15.4.crxを解凍します。

smooth-gestures

解凍したフォルダの中のJSフォルダに[background.js]があるので開きます。

smooth-gestures-0.15.4/js/

jsファイルを開く場合はTeraPadsakura editorを使用してください。

私は長年 sakura editor を愛用しています。

置換画面で、[document.body] を [document.scrollingElement] に書き換えます。

保存して、Chromeの拡張画面で『パッケージ化されていない拡張機能を読み込む』を選択し、解凍したフォルダを選択してください。

Chromeをいったんすべて閉じて、起動しなおすと[先頭へ移動] [末尾へ移動]が復活しているはずです。

これでまた快適なネットサーフィン環境が戻ってきますね!

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″>