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 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { var bg1 = $('#main-img'); var bg2 = $('#bg'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'60px'}, speed) .animate({backgroundPosition:'0'}, speed); bg2 .animate({backgroundPosition:'120px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(もっと見る)
参考サイト
