読者です 読者をやめる 読者になる 読者になる

N-takデザインブログ

WEBで培った作品や技術を公開しています。

しつこく。gifアニメーション

続き。

f:id:r4m0khksticiibypvp4k:20140605114035g:plain

まだやるよー。

 

チュートリアルが欲しい方はコメント下さいね。

Photoshopでループアニメーション

ちょっとはまってしまったので、第2弾

f:id:r4m0khksticiibypvp4k:20140604165807g:plain

 

チュートリアルは要望があれば公開します。

 

結構おもしろい。

 

 

Photoshopでまわる地球を制作してみた!

Photoshopのアニメーションフレームを使ってアニメーションgifをつくってみました。

 

もとは2Dの世界地図から作っています。

f:id:r4m0khksticiibypvp4k:20140604131935g:plain

 

でも尻が割れたような切れ目が・・・汗

 

チュートリアルは希望があれば公開します。

 

では。

CSSだけでリンクをふわぁっとさせる方法

作業メモ

デモ

 ↑マウスを重ねてみてね。

 

このCSSだけで、リンクにマウスが重なったときゆっくり切り替わります。

/*--テキストリンクはゆっくり色が変わる--*/

 

a:hover{

-webkit-transition: 0.4s ease-in-out;

  -moz-transition: 0.4s ease-in-out;

    -o-transition: 0.4s ease-in-out;

       transition: 0.4s ease-in-out;

 

}

 

 

以上

 

追従するサイドバーでしかもページ内をスムーズにリンクするjQuery

作業用メモです。

 

1.jQ/Js

①ヘッド内もしくはリンクを設置

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

②ヘッド内もしくはリンクを設置

$(function(){

   // #で始まるアンカーをクリックした場合に処理

   $('a[href^=#]').click(function() {

      // スクロールの速度

      var speed = 1000; // ミリ秒

      // アンカーの値取得

      var href= $(this).attr("href");

      // 移動先を取得

      var target = $(href == "#" || href == "" ? 'html' : href);

      // 移動先を数値で取得

      var position = target.offset().top;

      // スムーススクロール

      $('body,html').animate({scrollTop:position}, speed, 'swing');

      return false;

   });

}); 

 

これだけで、ページ内のリンク移動がスムースリンクになります。

 

on/offで簡単に画像がゆっくり切り替わるjQuery

作業に使ったメモです。

DEMO

 画像がゆっくり切り替わります。

 

1.画像の用意

 画像の末尾は以下のようにして下さい。

  ○○○_off.拡張子(変更前)

  ○○○_on.拡張子(変更後)

 

2.jQ

 以下はコードです。

 ヘッド内に、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 を記述し以下を外部ソースか、同じHTMLヘッド内に記述してください。

  ====================================================

ロールオーバーon_off画像切替)

====================================================

*/

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*1{

        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);

}

 

 

 3.HTML

        (1) _offの画像を設置してください。

  (2)設置した画像にリンク< a hre・・・></a>を設置してください。

 

 4.補足

 js内の

 setTimeout(function(){fader.apply(scope)},30);setTimeout(function(){fader.apply(scope)},30);

 

 の30の数値が大きくなればなるほど早く切り替わります。

 

 以上

 

 

*1:splitname[1])&&(imgs[i].parentNode.tagName=='A'

Photoshopの便利なテンプレート!僕が使っている7つの無料素材サイト紹介します。

こんにちは。

デザインブログ久々の更新です。

 

続きを読む