olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(アクション)>
  4. ふわふわっと画像を出現させる

画像エフェクト(アクション)mootools.v1.11.js

ふわふわっと画像を出現させる

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript" src="mootools.v1.11.js"></script> 
<script type="text/javascript"> 
var SlideIn = {
  start: function () {
    var delay = 200;
    $$('.images').each(function (el) { 
      el.setStyles({
        'position': 'relative',
        'top': 20,
        'opacity': 0
      });
      var fx = el.effects({transition:Fx.Transitions.Back.easeOut});
      fx.start.delay(delay, fx, {
        'opacity': 1,
        'top': 0
      });
      delay += 200;
    });
  }
};
 
window.addEvent('domready', function () {
  SlideIn.start();
  $('startFx').addEvent('click', function (e){
    new Event(e).stop();
    SlideIn.start();
  });
});
</script> 
<style> 
* {
  margin:0;
  padding:0; 
}
img {
  margin:5px;
}
</style> 
</head> 
<body> 
  <a href="#" class="images"><img src="image1.jpg" /></a>
  <a href="#" class="images"><img src="image1.jpg" /></a>
</body> 
</html>

動作サンプルはこちら

mootoolsを使った画像エフェクトです。
このスクリプトを使用すると、指定した画像グループを時間差をつけてフェードしながら出現させることができます。
mootools.v1.11.jsを使用しています。

mootools.v1.11.jsのダウンロード

まずは下記のリンクからmootools.v1.11.jsをダウンロードしてきます。

mootools.v1.11.js

<head>への記述

ダウンロードしたらそれをアップし、適用させたいページへと読み込ませます。

<script type="text/javascript" src="mootools.v1.11.js"></script>　

次に動作の設定を行います。

<script type="text/javascript">
var SlideIn = {
  start: function () {
    var delay = 200;     $$('.images').each(function (el) {  // ターゲットに付加するクラス名
      el.setStyles({
        'position': 'relative',
        'top': 20,  //要素の開始位置
        'opacity': 0  //要素の最初のアルファ
      });
      var fx = el.effects({transition:Fx.Transitions.Back.easeOut});
      fx.start.delay(delay, fx, {
        'opacity': 1,  //要素の最後のアルファ
        'top': 0  //要素の終点の位置
      });
      delay += 200;
    });
  } };
window.addEvent('domready', function () {
  SlideIn.start();
  $('startFx').addEvent('click', function (e){
    new Event(e).stop();
    SlideIn.start();
  });
});
</script>　

HTML要素のマークアップ

上記で設定したターゲットのクラス名を適用させたい要素に付加するだけで動作設定が完了します。

<a href="#" class="images"><img src="image1.jpg" /></a>　

同じクラス名で指定した要素はグループとして扱われ時間差をつけて表示されるようになります。

 

関連スクリプト

感想

ちょっとした動作ですが、ページロード時に特別目立たせたい所に使えば、嫌味なく強調できるのではないでしょうか。
古いmootools使わないとだめですが。。。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。