2016年3月20日

へそクリックでスムーズスクロール

ちまたでは1ページもののスクロールページがはやっているようなので、
それにのっかて新しいサイトを作成しています。
うにょぺそといったらやっぱりへそクリックでINだよね!
ということで、TOPにへそ画像をおいて、
へそクリックしたら次のセクションにスムーズスクロールするようにすることに。

へそクリックされる対象はAdobe FLASHでちょっとした動きをつけることにした。
swfはすたれてきてるようなので、HTML5 Canvasでパブリッシュ。
SVGアニメを使いたかったんだけど、どうもうまく動かなかったよ・・。

へそクリックINでスムーズスクロールできるようにjavascriptをちょこっといじった。

jquery.jsよみこんできてうごかしたのがこれ。

this.koti_peso.addEventListener("click", fl_MouseClickHandler_koti.bind(this));
function fl_MouseClickHandler_koti(){
var speed = 500;
var target = $("#about");
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
event.preventDefault();
};

動きがちょっと悪いので、jquery.easing.min.js追加でうごかしたのがこれ。
this.koti_peso.addEventListener("click", fl_MouseClickHandler_koti.bind(this));
function fl_MouseClickHandler_koti(){
$('html, body').stop().animate({scrollTop: $("#about").offset().top}, 1500, 'easeInOutExpo');
event.preventDefault();
};

とまぁ、自分のために覚書。
Javascriptいじったことないから色々つらいよね。

それはそうと、ソースコードのせるなら、なんかMTにプラグイン導入したほうがいいね。

コメントする