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

• Date：2017-06-14
• Category：Javascript
• Tags：HTML, css, jQuery, Javascript
• Response：Comments 0

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

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

• Date：2016-05-05
• Category：Javascript
• Tags：jQuery, Javascript
• Response：Comments 0

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

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

数字をクリックするミニゲーム – BREAK PANEL

• Date：2016-05-03
• Category：Free Game
• Tags：Javascript
• Response：Comments 0

前回のBREAK 25 PANELはHTMLのDOMを操作して制作しました。
今回のバージョンはHTML5から登場したcanvas要素を操作して制作しています。
あと動きを少しリッチにしたり、難易度設定を出来るようにしてあります。

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

• Date：2015-05-13
• Category：PHP, Javascript
• Tags：jQuery, Javascript, PHP
• Response：Comments 0

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

YouTubeの動画をレスポンシブに対応させて貼り付けて見ました。

• Date：2015-03-08
• Category：Javascript
• Tags：YouTube, Javascript
• Response：Comments 0

会社紹介の動画をホームページに貼り付けたり、個人のブログでYouTubeの動画を紹介したりしたい時があると思います。
でもただ単に貼り付けるだけだと、スマホで見た時に、画面内に収まらず見きれていたりして格好悪くなっているサイトとか結構あったりします。
別でスマホページを用意している場合は良いかもしれませんが、メディアクエリ等でいろんなブラウザサイズに対応させている場合は困ります。
そんな時に役たつ、YouTubeの設置方法をメモしておきます。