スマホメニュー

Classを付けるだけで要素が画面上までスクロールした時に要素を動かすJavascriptライブラリ【ScrollEffect.js】

パララックスと言うか、ページをスクロールして、画面内に要素が現れたら要素を移動・変化させるプラグインは数あれど、使い方が良くわからなかったり何かと面倒です。
なので、classをつけるだけで動くライブラリを作って見ました。

スマホの検索バーの表示・非表示でもリサイズ判定されるので対処してみた。

Javascriptで動きをつけている時、ウィンドウのリサイズで動きをリセットしたい時もあるかと思います。
例えば、BREAK PANELもブラウザのサイズを変更すると、それに合わせてゲーム画面も変更するようにしています。

しかし、ただ単にリサイズされた時という判定をしているとスマホ等で予期せぬ動きをしてしまいます。

PHPで画面サイズを判断して分岐したかったので、Jsで取得した画面の横幅を、sessionに入れてみた。

HTMLが読み込まれる前に、画面サイズによって、要素にclassを付けたり付けなかったりしたかったので、どうにか出来ないか考えて見ました。
<input type=”hidden”>は使いたくなかったので、別の方法で試行錯誤してますが、言ってしまえばAjaxを使っているだけです。

スマホサイトで使う開閉メニューを3つ程作って試して見た

MVサイト製作日記 part.05
スマホ用のページを作っていて悩んだのがナビゲーション部分です。個人的に開閉式(ページを開いた時は見えなくて、ボタンを押すとメニューが開く)はあまり好きではなく、始めから全て画面に表示させていたのですが、メニューの数が多くなるとそうも言っていられません。
というわけで、3つほど開閉するメニューを作って比べてみました。

イベントバブリングを気にせずマウスイベントを使える関数を作ってみた【Javascript】

Javascriptでプラグラムをしていると、誰もが一度は引っかかるで有ろうイベントバブリング。独自でスライドショーなどを作ると、イベントバブリングしても影響が無いようコーディングしたり、コードを修正したりしているはずです!
と言う事で、イベントバブリングを気にせずにマウスクリック/オーバー/アウトを使えるような関数を作ってみました。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2024年4月
« 10月    
 123456
78910111213
14151617181920
21222324252627
282930  

タグ

Social