jQuery背景で雲が動く

Posted on by

jQueryでおしゃれな背景アニメーションを使いたい

「jquery」でおしゃれな背景が動くエフェクトを作りたい!!
寒川神社を目標にまずは簡単にできる部分から設定していきます。

「jquery.min.js」をダウンロード致します。
ダウンロード先



cssを記載

下記のソースを追加してください。

* {
  padding: 0;
  margin: 0;
}
body {
	font-size: 13px;
	line-height: 1.4;
	background-color: #eee;
}
#wrap {
	text-align: center;
	padding-top: 60px;
}
h1 {
	margin-bottom: 1em;
}
h1 a {
	color: #666;
	text-decoration: none;
}
h1 a:hover {
	text-decoration: underline;
}
#main-img {
	width: 800px;
	margin: 0 auto;
	background: #9bd6e9 url("http://teach.web-represent.link/wp-content/uploads/2018/05/index5.png");
	border: solid 1px #fff;
}
#main-img #bg {
	height: 250px;
	background-image: url("http://teach.web-represent.link/wp-content/uploads/2018/05/index1.png");
}



HTMLを記載

下記のソースを追加してください。

Javascriptを記載

下記のソースを追加してください。



サンプル

下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(もっと見る)



参考サイト

webOpixel