「アニメーション」タグアーカイブ

Ajax他, CSS, スマホ・パソコン・Web関連

画面をスクロールしていくと、画像がフワッと動きながら出てくるエフェクト

コメントする

画面スクロールに合わせて画像がフワッと動きながら出てくるエフェクト

 

スクロールで画像がフワッと動きながら出てくるエフェクトのデモページ
はこちら。

CSSとjQueryだけで簡単に実現できる。

 
 

用意するもの

・moveinimg.js
・moveinimg.css

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

moveinimg.js　の中身

$(function(){
$(‘.moveinimg’).css(“opacity”,”.1″);
$(window).scroll(function (){
$(‘.moveinimg’).each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos – windowHeight + 200){
$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
}
});
});
});

 
適当な解説：
.moveinimg のclassがついている時にまず画像を半透明にセットする。

(“opacity”,”.1″);　の数字を変更することで透過度を変更できる。

if (scroll > imgPos – windowHeight + 200){　これで、画像まで200pxのところまでスクロールすると実行。

$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
で、marginを0pxに、更に透過度を透過なしに、1秒で変更。

 
 

moveinimg.css　の中身の必要な部分だけ

.movein {
position: relative;
min-height: 210px;
display: block;
}
.moveinimg {
margin-left: -100px;
}

絶対に必要なのが 親要素の .movein にposition:relative;
.moveinimgの初期位置をずらしておく。→ のちのちjQueryで margin:0;に移動させる。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/moveinimg.css” /><!– moveinimg –>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script><!– moveinimg –>
<script type=”text/javascript” src=”js/moveinimg.js”></script><!– moveinimg –>

先ほどの、moveinimg.cssとmoveinimg.jsとjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div class=”movein”>
<p class=”moveinimg”><img src=”img/image1.jpg” alt=”image1″ /></p>

画像は準備すること。

div class=”movein” の画像が最初は、半透明で、margin -100px セットされているが、スクロールするとふわっと表示される。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

CSS, スマホ・パソコン・Web関連

【All Animation CSS3】CSS3だけでアニメーションや3Dエフェクトを表現できる

コメントする

CSSだけで簡単にクリックエフェクトなどをアニメ化する

All Animation CSS3 オール・アニメーションCSS3とは？

スタイルシートフレームワークで、簡単にクリックやタップエフェクトをアニメーション化する方法だ。

HTMLにclassをつけるだけで実装できるので簡単。プログラミングの知識がなくてもできるので嬉しい。

超簡単な導入方法を紹介しよう。

オールアニメーションCSS3の導入方法

1. CSSとjQueryをダウンロード

右クリックで保存しよう。
all-animation.cssは「通常版」と「ミニファイド版」の2種類あるが、どちらでもOK。

・all-animation.css←通常版
・all-animation.min.css←minified版(軽量版)

・position.css
↑画像のサイズや表示位置を変える時に編集する。

・jquery-1.11.1.min.js

・bootstrap.min.js

・main.js

なお、.jsファイルは「.txt」としているので、ダウンロードしたら拡張子を「.js」に変更しておこう。ファイル名も確認しておこう。

・アーカイブ版 .zip (導入サンプルまとめてダウンロード)
all-animation.zip

 

 

2. CSSとjsファイルの読み込み

 

<head> と </head> の間で、cssを読み込もう。

<link rel="stylesheet" type="text/css" href="css/position.css" /><!–- all animation css3 –->
<link rel="stylesheet" type="text/css" href="css/all-animation.min.css" /><!–- all animation css3 –->

 

次に、</body>の直前辺りで、js ファイルを読み込もう。
 

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

これで読み込みは完成。あとは画像にclassをつけたり、するだけでアニメーションエフェクトが実装できる。
 

 

3. 画像のアニメーションエフェクト

 

画像アニメーションのデモページはこちら

画像の<img>のタグを div で囲んで、class にエフェクトを記入すると、その画像にアニメーションエフェクトをつけることができる。

 

記述例：

<div class="dance"><img src="img/画像名.jpg" /></div>

使用可能クラス一覧(エフェクトのデモはデモページを参考に。)

エフェクト名クラス名
ダンスdance
回転(ジャーナル)journal
鼓動(パルス)pulse
ゆっくり鼓動pulse-slow
ジャンプjapm
4点four-rock
上バウンドenter-up-bounce
下バウンドenter-down-bounce
右バウンドenter-right-bounce
左バウンドenter-left-bounce
背面バウンドscale-bounce
ジャンプバウンドjump-bounce
右フリップtree-flip-right
左フリップtree-flip
上フリップtree-flip-up
下フリップtree-flip-down
左めくりflip-left-bounce
めくりrotate-flip
右めくりflip-right-bounce
上から登場flip-top
左から登場flip-left
右から登場flip-right
下から登場flip-bottom
縦めくりrotate-flip-down
ぶら下がり落ちrotate-down-bounce
回転消滅rotate-out
点滅flash-bang
吹き飛びbomba
ぐるぐるrotate-row
下へ網掛けlegend-down
上へ網掛けlegend-up
左から網掛けlegend-left
右から網掛けlegend-right
終幕legend-flip
くっきりportrait-before
ぼんやりportrait-blur
そのままscale-before

 

 

4. ボタンのアニメーションエフェクト

ボタンのアニメーションのデモページはこちら

button に data-efect= として、エフェクトのクラス名を記入するだけで、画像にアニメーションをつけることができる。

button の下で、画像を読み込んでおく。
 

 
記述例：

<div class="btns">
<button data-efect="dance">ダンス</button>
</div><!– btns –>
<div class="posi treed">
<div id="all-animation-icon">
<img src="img/all-animation.png" alt="" />
</div>
</div>

 

使用可能クラス一覧は画像のアニメーションエフェクトと全く同じ。

 

 

5. メニューのアニメーションエフェクト

メニューのアニメーションのデモページはこちら

ulやdivにクラスを付けて、簡単にアコーデオンやタブを実装可能。

個別アコーデオン
<ul class="all-animation double-acordeon">

連動アコーデオン
<ul class="all-animation acordeon">

フェードタブ
<div class="all-animation tab-panel">

スライドタブ
<div class="all-animation tab-slide-panel">

記述方法(個別アコーデオンの場合)：

<ul class="all-animation double-acordeon">
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon1" checked />
<label for="double-acordeon1">メニュー1
<div>内容1</div>
</label>
</li>
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon2" />
<label for="double-acordeon2">メニュー2
<div>
内容2</div>
</label>
</li>
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon3" />
<label for="double-acordeon3">メニュー3
<div>
内容3</div>
</label>
</li>
</ul>
 

 

その他の記述方法は、メニューのアニメーションのデモページのソース、またはall-animation.zipを参照。

 

 

6. チェックボックスのアニメーションエフェクト

 

チェックボックスのアニメーションのデモページはこちら

div にクラス名を記入するだけで、チェックボックスやラジオボタンにエフェクトを付けて、トリガーボタンなどを作れる。

記述方法：
・トリガー
<div class="all-animation triggerOnOf">
<input id="check9" name="check9″ type="checkbox" />
<label for="check9"> トリガー黄緑</label>
</div>

・ラジオボタン
<div class="all-animation box-check">
<input id="radio1" name="radio1" type="radio" />
<label for="radio1"></label>
</div>
<div class="all-animation box-check">
<input id="radio2" name="radio1" type="radio" checked />
<label for="radio2"></label>
</div>

・チェックボックス
<div class="all-animation puft-in">
<input id="check1" type="checkbox" />
<label for="check1"></label>
</div>

その他のエフェクトはメニューのアニメーションのデモページのソース、またはアーカイブ版all-animation.zipを参照。

・アーカイブ版(導入サンプルまとめてダウンロード)
all-animation.zip