jQueryで画像を動かす
cssを記載
下記のソースを追加してください。
|
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 |
* { 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を記載
下記のソースを追加してください。
|
1 |
<div id="main-img"><div id="bg"></div></div> |
Javascriptを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(もっと見る)
参考サイト
