2013.11.11
WEB制作にパララックス効果を取り入れるべく、いろいろなJSを試しています。
まだ種類は少ないですが、下記は弊社で制作したサンプルです。
■Jarallax.js
http://www.jarallax.com/
要素を動かすのに特に強いJSです。
1つ1つの要素を細かく動かせて、記述もわかりやすい。
ただし、背景を動かしたりワイプするような動きは苦手なようです。
・サンプル1
・サンプル2
・サンプル3
■Parallax-JS
https://github.com/razorfish/Parallax-JS
http://razorfish.github.io/Parallax-JS/（デモ）
初期状態でパララックスの動きが設定されており、
背景が動くだけのような簡単なものならほぼクラスを当てるだけで作れる。
画像や文字などの要素も動かせるが、
動きを細かく設定するのは苦手。
・サンプル1
まだ種類は少ないですが、下記は弊社で制作したサンプルです。
■Jarallax.js
http://www.jarallax.com/
要素を動かすのに特に強いJSです。
1つ1つの要素を細かく動かせて、記述もわかりやすい。
ただし、背景を動かしたりワイプするような動きは苦手なようです。
・サンプル1
・サンプル2
・サンプル3
■Parallax-JS
https://github.com/razorfish/Parallax-JS
http://razorfish.github.io/Parallax-JS/（デモ）
初期状態でパララックスの動きが設定されており、
背景が動くだけのような簡単なものならほぼクラスを当てるだけで作れる。
画像や文字などの要素も動かせるが、
動きを細かく設定するのは苦手。
・サンプル1
2013.09.03
探していて気付いたのですが、
selectタグのデザインを自由に変更できるものって意外と少ないようです。
こちらは先日の記事とはまた違うJSになります。
プルダウン後のリストまでデザインでき、さらにIE6まで対応。
CUSTOM-SELECT：セレクトボックスをカスタマイズするJS（恐らくIE6も対応）
使い方は上記のページにありますので割愛ですが、
↓こんな感じのフォームが作れます。
初期表示部分は<dt>、
プルダウン後のリストは<dd>で囲んだ<ul>・<li>リストに置き換えられるようなので、
それぞれスタイルを当てることで自由にデザインすることができます！
細かいデザイン指定がある場合などに是非。
selectタグのデザインを自由に変更できるものって意外と少ないようです。
こちらは先日の記事とはまた違うJSになります。
プルダウン後のリストまでデザインでき、さらにIE6まで対応。
CUSTOM-SELECT：セレクトボックスをカスタマイズするJS（恐らくIE6も対応）
使い方は上記のページにありますので割愛ですが、
↓こんな感じのフォームが作れます。
初期表示部分は<dt>、
プルダウン後のリストは<dd>で囲んだ<ul>・<li>リストに置き換えられるようなので、
それぞれスタイルを当てることで自由にデザインすることができます！
細かいデザイン指定がある場合などに是非。
2013.08.13
グローバルメニューをssiなど、外部ファイルで管理したい時があるじゃないですか。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。
メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。
メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。
メニューの表示をページに対応して変えるの続きを読む
2013.06.12
久しぶりにJavaScriptを書いていて少し迷ったところ。
setInterval()やsetTimeout()についてです。
var sample = setInterval( intervalEvent, 1000);
例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、
var sample = setInterval( intervalEvent(data1), 1000);
と普段通り書いても上手くいきません。
次のように書くことで引数を渡すことができます。
1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。
var sample = setInterval( function(){ intervalEvent(data1); }, 1000);
2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、
var sample = setInterval('intervalEvent('+ data1 +')', 1000);
setInterval()やsetTimeout()についてです。
var sample = setInterval( intervalEvent, 1000);
例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、
var sample = setInterval( intervalEvent(data1), 1000);
と普段通り書いても上手くいきません。
次のように書くことで引数を渡すことができます。
1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。
var sample = setInterval( function(){ intervalEvent(data1); }, 1000);
2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、
var sample = setInterval('intervalEvent('+ data1 +')', 1000);
JavaScript , メモ
2013.05.21
最近はIE6、7に対応させることが減ってきました。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
