アニメーションをjqueryで実装したい

###前提・実現したいこと
jqueryでアニメーションをつけています。

下記の参考サイトの様に
①背景色をフェードして、その後テキストを順に表示したい
②①と似たような処理かと思うのですが、参考サイトの"Carv features"の画像の表示も背景色をフェードして、その後画像を表示したいです。

###分からないこと
cssでw0から.boxサイズのwidthにアニメーションしているので内包しているテキストも同じ様にアニメーションしてしまいます。

・背景色を左から右にフェードして消したい
・その後テキストを左から順に表示させたいです。

html
1<div class="box">
2	<div class="bg">
3		<div class="text">テキストテキストテキスト</div>
4	</div>
5</div>

css
1.box {
2	position: relative;
3	width: 500px;
4}
5
6.bg {
7    position: absolute;
8    top: 100px;
9    left: 0;
10    width: 0;
11    height: 20px;
12    background: #E74C3C;
13}

jquery
1$(function() {
2    boxW = $(".box").width();
3    spped = 3000;
4    $('.bg').animate({
5        width: boxW
6    }, spped);
7});

背景色のアニメーションなどで検索をかけたのですが、該当するものを見つける事ができず質問させて頂きました。

よろしくお願いします。

kei344

2017/05/13 11:00

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答2件

「パララックス」と呼ばれることが多いと思います。スクロールして特定の要素まで来たタイミングで要素を動かしたりする技術で、専用のライブラリもあります。

【パララックスを実装する！おすすめjQueryプラグインまとめ】
http://kumaweb-d.com/jquery/jquery-paralax-plugins/

【パララックスサイトとは?作り方や参考例、テンプレート、jQueryプラグインまとめ | ホームページ大学】
http://univ.peraichi.com/19#jQuery

【パララックスを簡単実装！オススメのjQueryプラグインまとめ！ | 札幌・東京のホームページ制作・ウェブ制作会社monomode】
http://monomode.co.jp/web/parallax-3.html

投稿2017/05/13 11:41

kei344

総合スコア69407

ベストアンサー

こういう感じですか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>アニメーションをjqueryで実装したい</title>
6<style>
7.box {
8    position: relative;
9    width: 500px;
10}
11
12.bg {
13    position: absolute;
14    top: 100px;
15    left: 0;
16    width: 0;
17    height: 20px;
18    background: #E74C3C;
19    z-index: 2;
20}
21
22.veil {
23    position: absolute;
24    top: 100px;
25    left: 0;
26    width: 500px;
27    height: 20px;
28    background: #FFFFFF;
29    z-index: 1;
30}
31
32.text {
33    position: absolute;
34    top: 100px;
35    left: 0;
36    width: 500px;
37    height: 20px;
38    z-index: 0;
39}
40</style>
41<script src="jquery-3.1.1.min.js"></script>
42<script>
43$(function() {
44	var boxWidth = $('.box').width();
45	var duration = 3000; // アニメーション時間（ミリ秒）
46
47	$('.bg').animate({
48		width : boxWidth
49	}, duration, function() {
50		// 上記のアニメーションが終わったらスタート
51		$(this).animate({
52			left : boxWidth,
53			width : 0
54		}, duration, function() {
55			// 上記のアニメーションが終わったらスタート
56			$('.veil').animate({
57				left : boxWidth,
58				width : 0
59			}, duration);
60		});
61	});
62});
63</script>
64</head>
65<body>
66<div class="box">
67    <div class="bg"></div>
68    <div class="veil"><!-- テキストを左から順に表示させるためのヴェール --></div>
69    <div class="text">テキストテキストテキスト</div>
70</div>
71</body>
72</html>