【Javascript】横方向に雲（じゃなくてもいいけど）がぶっ飛んでいくアニメーション | Wood-Roots:blog

2013
08/03

横方向に雲（じゃなくてもいいけど）がぶっ飛んでいくアニメーション

本日8月2日は何回目か分かりませんがみんな大好きラピュタの放送日なので、そういう感じを目指して。

DEMO

スクリプト自体は別にラピュタ関係ないけどね・・・・(´・ω・｀)

ADs

HTML

まず、雲の画像を用意してul>liで配置します。
透過PNGを使ったり移動ぼかしをかけたりすると雰囲気が出るかもしれません。

1
2
3
4
5
6
7
8
9
10
11
<!-- body直下にulで置いてください -->
<ul id="cloud">
<li><img src="cloud1.png" alt="" /></li>
<li><img src="cloud2.png" alt="" /></li>
<li><img src="cloud3.png" alt="" /></li>
<li><img src="cloud4.png" alt="" /></li>
<li><img src="cloud1.png" alt="" /></li>
<li><img src="cloud2.png" alt="" /></li>
<li><img src="cloud3.png" alt="" /></li>
<li><img src="cloud4.png" alt="" /></li>
</ul>

CSS

CSSは親要素であるul(ここでは#cloud）にウインドウ（かbody）と同サイズのwidth,heightを設定して最背面に設置するのですが、widht,heightはJSで動的に取得しますので、ここではabsoluteとz-indexのみ指定しておきます。
なお、overflow:hiddenを設定しないと横スクロールが表示されてしまいますので、忘れず設定してください。

1
2
3
4
5
6
7
8
9
10
11
12
/* ulを最背面に置きます */
#cloud {
position: absolute;
left: 0;
top: 0;
z-index: 1;
overflow: hidden;
}
/* アニメーションさせるのでabsoluteで */
#cloud li {
position: absolute;
}

Javascript

JS側で行う処理は、ウインドウ右端まで移動したらウインドウ左端に戻す、という処理を繰り返しているだけです。
Math.random()を使いスピードや縦方向の位置をランダムにすることにより、流れる雲っぽさを出しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
(function($){
//初期設定
var settings = {
speed: 1000,//速さ
freq: 3000 //ゆらぎ（上記速さに「Math.random()*この値」を加算して速さをバラバラにする）
};
 
 
//アニメーション
var cloud = function(obj,settings,winsize){
var imgw = obj.width();
 
//横スクロールが発生しないように親要素の幅をウィンドウサイズと同じにして、overflow:hiddenする
obj.closest('ul').css({
width: winsize.winw + 'px',
height: winsize.winh + 'px'
});
//アニメーション実行
obj.animate({
left : winsize.winw + 'px'
},{
eeasing: 'swing',
duration: settings.speed+(settings.freq*Math.random()),
complete: function(){
//アニメーション終了後、画面外に戻す。
//縦方向はランダムにする（ここではbodyかwindowの高さの大きい方以内でバラバラにしています）
obj.css({
left: (-1*imgw) + 'px',
top: Math.floor( Math.random() * winsize.winh ) + 'px'
});
//再帰処理
cloud(obj,settings,winsize);
}
});
};
$(window).on('load',function(){
//ulをウインドウと同サイズにして配置するためにwindowサイズ（かbody,htmlのサイズ）を取得
var winsize = {
winw: Math.max($('html').width(),$('body').width(),$(window).width()),
winh: Math.max($('html').height(),$('body').height(),$(window).height())
};
 
//雲の初期配置。ランダムにしてバラバラな位置から始まるようにする
$('#cloud li').each(function(key,value){
//縦方向の位置設定。画面内に収まる範囲でランダムに。
var randv = Math.floor( Math.random() * winsize.winh );
//横方向の位置設定。画面内に収まる範囲でランダム
var randh = Math.floor( Math.random() * winsize.winw );
$(this).css({
top: randv + 'px',
left: randh + 'px'
});
//アニメーション実行
cloud($(this),settings,winsize);
});
});
//ウインドウリサイズ時の処理
$(window).on('resize',function(){
//画面サイズを取り直す
var winsize = {
winw: Math.max($('html').width(),$('body').width(),$(window).width()),
winh: Math.max($('html').height(),$('body').height(),$(window).height())
};
 
$('#cloud li').each(function(key,value){
$(this).stop(true,false);
cloud($(this),settings,winsize);
});
});
})(jQuery);

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social