jQuery画像の周りが動く

1 jQueryで画像を動かす
2 サンプル
- 2.1 Related Posts
- 2.2 いいね:

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");
}

* {

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を記載

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

<div id="main-img"><div id="bg"></div></div>

1	<div id="main-img"><div id="bg"></div></div>

Javascriptを記載

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.morphing.min.js"></script>//任意の配置場所にしてください。
<script>
$(function(){

  $('.js-morphing').morphing({ radius : 170 });

});
</script>