読者です 読者をやめる 読者になる 読者になる

My Vector Space

WEB関連の情報やTIPSなどを中心に、身近なネタ グロースハック 考え方 グルメ 生活に役立つ情報…等など色々と…

【ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大!

 zoom-slider-title-gazou
アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。
まずはhtmlファイル内にCSSファイルとJSファイルをリンクさせる
まず、外部ファイル(http://tympanus.net/codrops/2015/07/06/zoom-slider/)をダウンロード
して「style.css」「demo.css」「component.css」の3つのCSSファイルと
modernizr.custom.jsをリンクさせる。
 【 html 】
 1
  <head>
 2
      <!-- Feather Icons -->
 3
      <link rel="stylesheet" type="text/css" href="fonts/feather/style.css">
 4
      <!-- General demo styles & header -->
 5
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 6
      <!-- Component styles -->
 7
      <link rel="stylesheet" type="text/css" href="css/component.css" />
 8
      <script src="js/modernizr.custom.js"></script>
 9
  </head>
スライダー遷移のフロント画面エリアの構造タグ
次に、スライダーさせる対象となる画像にhtmlタグを追加していく
(※画像2枚分のコード)
 【 html 】
 1
  <header class="bp-header cf">
 2
      <h1>Zoom Slider</h1>
 3
  </header>
 4
 
 5
  <!-- Grid(▼スライダー遷移のフロント画面エリア▼) -->
 6
  <section class="slider">
 7
      <div class="slide slide--current" data-content="content-1">
 8
          <div class="slide__mover">
 9
              <div class="zoomer flex-center">
 10
                  <img class="zoomer__image" src="images/iphone.png" alt="iPhone" />
 11
                  <div class="preview">
 12
                    <img src="images/iphone-content-preview.png" alt="iPhone app preview" />
 13
                    <div class="zoomer__area zoomer__area--size-2"></div>
 14
                  </div>
 15
              </div>
 16
          </div>
 17
          <h2 class="slide__title"><span>The Classy</span> iPhone 6</h2>
 18
      </div>
 19
 
 20
      <div class="slide" data-content="content-2">
 21
          <div class="slide__mover">
 22
              <div class="zoomer flex-center">
 23
                  <img class="zoomer__image" src="images/ipad.png" alt="iPad Mini" />
 24
                  <div class="preview">
 25
                  <img src="images/ipad-content-preview.png" alt="iPad Mini app preview" />
 26
                      <div class="zoomer__area zoomer__area--size-4"></div>
 27
                  </div>
 28
              </div>
 29
          </div>
 30
          <h2 class="slide__title"><span>The Fantastic</span> iPad Mini</h2>
 31
      </div>
 32
 
 33
      <nav class="slider__nav">
 34
          <button class="button button--nav-prev"><i class="icon icon--arrow-left"></i>
 35
          <span class="text-hidden">Previous product</span></button>
 36
          <button class="button button--zoom"><i class="icon icon--zoom"></i>
 37
          <span class="text-hidden">View details</span></button>
 38
          <button class="button button--nav-next"><i class="icon icon--arrow-right"></i>
 39
          <span class="text-hidden">Next product</span></button>
 40
      </nav>
 41
  </section>
 42
  <!-- /slider-->
各画像の詳細ページエリアの構造タグ
次に、画像のクリック先の詳細ページエリアを作っていく
(※画像2枚分のコード)<
 【 html 】
 1
  <!--▼各画像の詳細ページエリア▼-->
 2
  <section class="content">
 3
      <div class="content__item" id="content-1">
 4
      <img class="content__item-img rounded-right" src="images/iphone-content.png"
 5
      alt="Apple Watch Content" />
 6
      <div class="content__item-inner">
 7
          <h2>The iPhone 6</h2>
 8
          <h3>Incredible performance for powerful apps</h3>
 9
          <p>コメント</p>
 10
      </div>
 11
  </div>
 12
 
 13
  <div class="content__item" id="content-2">
 14
      <img class="content__item-img rounded-right" src="images/ipad-content.jpg"
 15
      alt="iPad Mini Content" />
 16
      <div class="content__item-inner">
 17
          <h2>The iPad Mini</h2>
 18
          <h3>Desktop-class architecture without a desktop</h3>
 19
          <p>コメント</p>
 20
      </div>
 21
  </div>
 22
  <button class="button button--close"><i class="icon icon--circle-cross"></i>
 23
  <span class="text-hidden">Close content</span></button>
 24
  </section>
 25
  </div><!--containerおわり-->
 26
 
 27
    <script src="js/classie.js"></script>
 28
    <script src="js/dynamics.min.js"></script>
 29
    <script src="js/main.js"></script>
 30
 

 

 

関連記事他のスライドショー関連の記事

 

 

 

PAGE TOP