水平線を引くアニメーション

2015.08.25

水平線を引くアニメーションの実装をいくつかやってみます。

左から右へ線を引く

まずはベタ塗りの線を引いてみます。

HTML

1
<div id="horizon1"></div>

CSS

1
2
3
4
5
6
7
8
#horizon1 {
    position: absolute;
    top: 100px;
    left: 0;
    width: 0;
    height: 5px;
    background: #E74C3C;
}

JavaScript

1
2
3
4
5
6
7
$(function() {
    winW = $(window).width();
    spped = 3000;
    $('#horizon1').animate({
        width: winW
    }, spped);
});

線の塗りは背景色で、widthを0から画面幅に広げてアニメーションしています。
左から右へ線を引くデモページ1
　

ベタ塗りではなく画像で線を引いてみます。

HTML

1
<div id="horizon2"></div>

CSS

1
2
3
4
5
6
7
8
#horizon2 {
    position: absolute;
    top: 100px;
    left: 0;
    width: 0;
    height: 5px;
    background: url(horizon.gif) left center repeat-x;
}

JavaScript

1
2
3
4
5
6
7
$(function() {
    winW = $(window).width();
    spped = 3000;
    $('#horizon2').animate({
        width: winW
    }, spped);
});

やっていること自体は1番目と同じで、背景をベタ塗りから背景画像を表示するように変更しています。
左から右へ線を引くデモページ2
　

線の引き始めをグラデーションで徐々に表示するように引いてみます。

HTML

1
2
3
<div id="horizon3">
<div id="horizon3-inner"></div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
#horizon3 {
    position: absolute;
    top: 100px;
    left: 0;
    width: 0;
    height: 5px;
    background: url(horizon.gif) left center repeat-x;
}
#horizon3-inner {
    width: 100%;
    height: 5px;
    background: url(grad.png) right center no-repeat;
}

JavaScript

1
2
3
4
5
6
7
$(function() {
    winW = $(window).width();
    spped = 3000;
    $('#horizon3').animate({
        width: winW
    }, spped);
});

線を引く要素の子要素に、透過→白のグラデーション画像を背景に指定した要素を配置し、線を引くアニメーションの上にグラデーション画像が重なるようにしています。
左から右へ線を引くデモページ3
　

中央から左右へ線を引く

中央から左右へ線を引いてみます。

HTML

1
<div id="horizon4"></div>

CSS

1
2
3
4
5
6
7
8
#horizon4 {
    position: absolute;
    top: 100px;
    left: 0;
    width: 0;
    height: 5px;
    background: #E74C3C;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
$(function() {
    winW = $(window).width();
    spped = 3000;
    $('#horizon4').css({
        left: winW / 2
    }).animate({
        left: 0,
        width: winW
    }, spped);
});

leftを画面幅の半分(画面中央)にして、そこから0になるようにアニメーションしています。
それと同時に、widthを0から画面幅に広げてアニメーションするようにしています。
中央から左右へ線を引くデモページ
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930