−アニメーション−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

ふわっと表示させる

コピペで使えるアニメーション：スライダーショー

https://lab.sonicmoov.com/markup/css/image-slider/

ふわっと表示させる

WPだとheaderに直接いれないと動かなった

使いたい場所に　class="fadein" をつけてあげるだけ！
連続で順番にふわっと表示させたい場合は　effect-fade　で全体をdivで囲う。

【　HTML　】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(window).scroll(function (){
		$('.fadein').each(function(){
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > elemPos - windowHeight + 200){
				$(this).addClass('scrollin');
			}
		});
	});
});
</script>



【　CSS　】
/*--------------------------------------------------------

アニメーション

--------------------------------------------------------*/
.fadein {
	opacity : 0.1;
	transform : translate(0px, 100px);
	transition : all 500ms;
	}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
	}

.effect-fade .fadein:nth-child(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.effect-fade .fadein:nth-child(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.effect-fade .fadein:nth-child(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}
.effect-fade .fadein:nth-child(5) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
	}

ふわっと表示させる2

【 CSS 】
/*--------------------------------------------------------

アニメーション

--------------------------------------------------------*/
.sa {
  opacity: 0;
  transition: all .3s ease-out;
}
 
.sa.show {
  opacity: 1;
  transform: none;
}
 
.sa--lr {
  transform: translate(-100px, 0);
}
 
.sa--rl {
  transform: translate(100px, 0);
}
 
.sa--up {
  transform: translate(0, 100px);
}
 
.sa--down {
  transform: translate(0, -100px);
}
 
.sa--scaleUp {
  transform: scale(.5);
}
 
.sa--scaleDown {
  transform: scale(1.5);
}
 
.sa--rotateL {
  transform: rotate(180deg);
}
 
.sa--rotateR {
  transform: rotate(-180deg);
}



//アニメーション
$(function(){
var scrollAnimationClass = 'sa';
var scrollAnimationShowClass = 'show';
var triggerMarginDefault = 300;
 
var scrollAnimationElm = document.querySelectorAll('.' + scrollAnimationClass);
var scrollAnimationFunc = function() {
  var dataMargin = scrollAnimationClass + '_margin';
  var dataTrigger = scrollAnimationClass + '_trigger';
  var dataDelay = scrollAnimationClass + '_delay';
  for(var i = 0; i < scrollAnimationElm.length; i++) {
    var triggerMargin = triggerMarginDefault;
    var elm = scrollAnimationElm[i];
    var showPos = 0;
    if(elm.dataset[dataMargin] != null) {
      triggerMargin = parseInt(elm.dataset[dataMargin]);
    }
    if(elm.dataset[dataTrigger]) {
      showPos = document.querySelector(elm.dataset[dataTrigger]).getBoundingClientRect().top + triggerMargin;
    } else {
      showPos = elm.getBoundingClientRect().top + triggerMargin;
    }
    if (window.innerHeight > showPos) {
      var delay = (elm.dataset[dataDelay])? elm.dataset[dataDelay] : 0;
      setTimeout(function(index) {
        scrollAnimationElm[index].classList.add('show');
      }.bind(null, i), delay);
    }
  }
}
window.addEventListener('load', scrollAnimationFunc);
window.addEventListener('scroll', scrollAnimationFunc);
});

画像を回転させる

ＣＳＳだけで実現できる。aタグのhover時だけくるくる回転させる事ができて便利！！

【 CSS 】
ずっと回転し続ける
a:hover .load {
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}



くるっと1回転してゆっくり戻る
.circle-image {
  transition: 1.0s;
}
a:hover .circle-image {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transition: transform 0.2s ease-out;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
}



要素に楕円をつける
.hatena-module-circles .circle-image {
  border: 1px solid #dddddd;
  border-radius: 50%;
  margin: 2px;
}