2015年7月26日日曜日

またcodropsに載っている画像の上で動くCSSを試してみる

また楽しそうなのが codrops     にあったのでやってみました
サンプルは左右ボタンがずれてます;
おそらく何かのCSSが影響してしまってる気がしますが
Blogger以外で試してみたところ綺麗に表示されてました

SAMPLE

  • Landscape.1

  • Eclipse

  • Shishi-odoshi

  • Landscape.2

  • Illumination

  • Mt.Daisen

  • Cosmos

参考元：codrops    
cssとjsを複数読み出す必要があります
    <head>
      <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
      <link rel="stylesheet" type="text/css" href="css/custom.css" />
      <script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
    </head>
    <body>
    <div class="wrapper" >
      <ul id="sb-slider" class="sb-slider">
        <li>
          <a href="画像アドレス1" target="_blank" imageanchor="1" >
            <img border="0" src="画像アドレス1" />
          </a>
          <div class="sb-description">
            <h3>画像説明1</h3>
          </div>
        </li>
        <li>
          <a href="画像アドレス2" target="_blank" imageanchor="1" >
            <img border="0" src="画像アドレス2" />
          </a>
          <div class="sb-description">
            <h3>画像説明2</h3>
          </div>
        </li>
        <div id="nav-arrows" class="nav-arrows">
          <a href="#" style= "opacity: 0.4;">Next</a>
          <a href="#" style= "opacity: 0.4;">Previous</a>
        </div>
      </ul>
    </div>
    </body>
あとはjavascriptですがbody部の閉じ括弧前で以下を記載します。
jqueryは1.8.2以降であれば大丈夫と思われます。
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.slicebox.js"></script>
    <script type="text/javascript">
    $(function () {
      var Page = (function () {
        var $navArrows = $('#nav-arrows').hide(),
          $shadow = $('#shadow').hide(),
          slicebox = $('#sb-slider').slicebox({
            onReady: function () {
              $navArrows.show();
              $shadow.show();
            },
            orientation: 'r',
            cuboidsRandom: true,
            disperseFactor: 30
          }),
          init = function () {
            initEvents();
          },
          initEvents = function () {
            // add navigation events
            $navArrows.children(':first').on('click', function () {
              slicebox.next();
              return false;
            });
            $navArrows.children(':last').on('click', function () {
              slicebox.previous();
              return false;
            });
          };
        return {
          init: init
        };
      })();
      Page.init();
    });
    </script>


投稿者
ラベル: ,