Archive for the ‘Javascript’ Category

687474703a2f2f626f7765722e696f2f696d672f626f7765722d6c6f676f2e706e67

ちょっとウェブサイトのスクラッチをしようと思って、CMSフレームワークはGumbyを使おうと思ってスタート。

以前にもつかった事あるし〜と思いながらGumbyのDLサイトに行くとGumbyの開発が終了したとのおしらせ。
なぜ・・・。

結局CSSフレームワークはBootstrap一強時代に突入なのか。
Gumby使い勝手よかっただけに残念です。今後OSS化するらしい。
Bootstrapの学習面倒くさい・・・。

気を取り直してまだ下の方でDL出来たのでGumbyゲット(結局使うやつ)

さて、今回はParallaxを使いたかったのでBowerを使ってParallaxを導入としたところ、npmもbowerも環境がなかったので構築しようとしたところハマったのでメモです。

npmのインストール

# apt-get install npm
でOKです。

npmを使ってbowerのインストール

# npm install -g bower

でどうぞ。
ちなみに-gはグローバルにインストールという事でこれをつけるとpathが通るって事だと思います。

続いて、gumbyのディレクトリに移動してから

$ bower install gumby-parallax

としたところ、

との表示が。

bowerないじゃん!

という事で、解決策を探したところありました。

# ln -s /usr/bin/nodejs /usr/bin/node

をしたらいいとの事です。

/usr/bin/node を /usr/bin/nodejs にリンクさせてあげたらよかったんですね。

これでめでたく、parallaxのmoduleがゲットできました。

それでは、また。

jQuery_logo

マウスオーバーで画像を切替える方法はいくつかあります。
大別してCSSを使ってやる方法とJavascriptを使ってやるというのが主流かと思います。

CSSでやる場合、ボタンの切り替えはどうしても瞬間的に切り替わるものになってしまいます。
(ふわっと切り替える方法もあるのかな・・・)

でもやっぱり僕的には「ふわり」と切り替わるエフェクトの方が好みなんです。
そこで今回はJavascriptを使ってやる方法を選択してみました。

Javascriptを使って簡単にアニメーションを実装といえばもちろんjQueryさんの出番です。

と言う事で、HTMLのHEAD内にまずはjQueryをインポートしてしまいましょう。

<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="./scripts/smart-crossfade.js"></script>
</head>

2行目googleのライブラリからjQueryを引っ張ってきてインポート。
3行目でインポートしてる”smart-crossfade.js”が今回の肝にあたるライブラリです。

こいつを使うとどうなるのか。

こちらにサンプルを用意しました。
smart-crossfade demo

このとおりふわりと画像が切り替わるのですね!

使用するには色違いの画像を2枚用意して、それぞれのファイル名の末尾を”_on”,”_off”としてあげます。
“button_off.jpg”,”button_on.jpg”といった具合にですね。

_offをつけている方はマウスが画像から外れている時に表示する画像。
_onをつけている方がマウスオーバーした時に表示する画像となっています。

後はその画像をaタグで囲ってあげると自動的に、ふわっと画像が切り替わるマウスオーバーエフェクトが実装されています。

以下実装ソースです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>smart-crossfade demo</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/smart-crossfade.js"></script>
</head>
<body>
<a href="#"><img src="img/facebook_off.png"></a>
<a href="#"><img src="img/twitter_off.png"></a>
<a href="#"><img src="img/google_off.png"></a>
<a href="#"><img src="img/rss_off.png"></a>
</body>
</html>

ライブラリのソースも一応アップしときます。

function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");

		for(var i=0; i < images.length; i++) {
			if(images[i].getAttribute("src").match("_off."))
			{
				images[i].onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images[i].onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}

if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}


// cross fade

new function(){
  function setRollOver2(){
    if(!document.images){return;}
    var imgs = document.images;
    var insert = [];
    for(var i=0;i<imgs.length;i++){
      var splitname = imgs[i].src.split('_off.');
      if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
        var rolloverImg = document.createElement('img');
        rolloverImg.src = splitname[0]+'_on.'+splitname[1];
        var alpha = 0;
        rolloverImg.currentAlpha = alpha;
        rolloverImg.style.opacity = alpha/100;
        rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
        rolloverImg.style.position = 'absolute';


        addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
        addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});

        insert[insert.length] = {position:imgs[i],element:rolloverImg};
      }
    }
    for(var i=0;i<insert.length;i++){
      var parent = insert[i].position.parentNode;
      parent.insertBefore(insert[i].element,insert[i].position);
    }
  }


  function setFader(targetObj,targetAlpha){
    targetObj.targetAlpha = targetAlpha;
    if(targetObj.currentAlpha==undefined){
      targetObj.currentAlpha = 100;
    }
    if(targetObj.currentAlpha==targetObj.targetAlpha){
      return;
    }
    if(!targetObj.fading){
      if(!targetObj.fader){
        targetObj.fader = fader;
      }
      targetObj.fading = true;
      targetObj.fader();
    }
  }

  function fader(){
    this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
    if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
      this.currentAlpha = this.targetAlpha;
      this.fading = false;
    }
    var alpha = parseInt(this.currentAlpha);
    this.style.opacity = alpha/100;
    this.style.filter = 'alpha(opacity='+alpha+')';
    if(this.fading){
      var scope = this;
      setTimeout(function(){fader.apply(scope)},30);
    }
  }

  function addEvent(eventTarget, eventName, func){
    if(eventTarget.addEventListener){
      eventTarget.addEventListener(eventName, func, false);
    }else if(window.attachEvent){
      // IE
      eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
    }
  }

  addEvent(window,'load',setRollOver2);

}

ちなみにフェードインのスピードは87行目
setTimeout(function(){fader.apply(scope)},30);
の30という数字をいじる事で変更する事が可能です。

と言う事で、僕の知る限り最も簡単なマウスオーバーでのハイクオリティな画像切替方法でした。