jQuery と CSS3 PPT 風の音声スライド プラグイン_html/css_WEB-ITnose

簡単なチュートリアル

これは、jQuery と CSS3 を使用して PPT のようなスピーチ スライドを作成するシンプルなプラグインです。このスピーチ スライド プラグインは、キーボードの上下左右の矢印キーで制御でき、左上隅にメニュー ボタンがあり、対応するスライド ページを選択できます。

デモを見る プラグインのダウンロード

使用方法

HTML 構造

このプレゼンテーション スライドの HTML 構造には 2 つの主要な部分があります。

要素はスライドのナビゲーション メニューの作成に使用され、順序付きリストはスライド ページの作成に使用されます。マルチレベルのスライド ページは、ネストされた順序付きリストを使用して作成されます。

<div class="cd-slideshow-wrapper">  <nav class="cd-slideshow-nav">    <button class="cd-nav-trigger">      Open Navigation      <span aria-hidden="true"></span>    </button>         <div class="cd-nav-items">      <ol>        <li><a href="#slide-1">Slide 1</a></li>        <li>          <a href="#slide-2">Slide 2</a>          <ol class="sub-nav">            <li><a href="#slide-2">Slide 2 - Sub 1</a></li>            <!-- other sub-slide links here -->          </ol>        </li>        <li><a href="#slide-3">Slide 3</a></li>        <!-- other slide links here -->      </ol>    </div> <!-- .cd-nav-items -->  </nav> <!-- .cd-slideshow-nav -->     <ol class="cd-slideshow">    <li class="visible" id="slide-1">      <div class="cd-slider-content">        <div class="content-wrapper">          <h2>Presentation Slideshow</h2>          <p>A simple presentation template in CSS & jQuery.</p>        </div>      </div>    </li>      <li id="slide-2">      <ol class="sub-slides">        <li>          <div class="cd-slider-content">            <div class="content-wrapper">              <h2>Slider #2</h2>            </div>          </div>        </li>        <!-- sub-slides content here -->               </ol> <!-- .sub-slides -->    </li>      <!-- additional slides here -->  </ol> <!-- .cd-slideshow --></div> <!-- .cd-slideshow-wrapper -->

CSS スタイル

小さな画面デバイス (ビューポートが 1100 ピクセル未満) では、プラグインはすべてのスライド項目をリストに最適化します。右のサブ項目のスライドは、タッチしてスライドできるスライダーがプラグインに実装されており、スライダーをスライドさせてサブ項目を表示・表示するように最適化されています。

.cd-slideshow .sub-slides {  width: 100%;  transition: transform 0.3s;}.cd-slideshow > li, .cd-slideshow .sub-slides > li {  position: relative;  z-index: 1;  height: 100vh;  width: 100vw;}.cd-slideshow .sub-slides > li {  float: left;}

サブ項目を含む順序付きリスト項目の幅は、JavaScript を使用して設定されます。ユーザーが 1 つのサブ項目から前または前のサブ項目に移動すると、プラグインは .sub-slides 要素を X 軸に沿って移動します。

大画面デバイスでは、.cd-slideshow-wrapper 要素の高さが 100vh に設定され、overflow:hidden に設定されるため、ビューポート内のスライドショーのみが表示されます。次に、.cd-slider-content 要素がビューポートに対して中央に配置されるように、width、height、margin が設定されます。

.visible クラスは、現在表示されているスライドに追加するために使用されます。その機能は、.cd-slider-content::after 擬似要素を非表示にすることです (この擬似要素は、ページの背景を変更するために使用されます)スライドはフォーカスされた色) を表示し、スライドの内容を表示します。

@media only screen and (min-width: 1100px) {  .cd-slideshow-wrapper {    height: 100vh;    overflow: hidden;  }    .cd-slideshow {    transition: transform 0.6s;  }  .cd-slideshow > li, .cd-slideshow .sub-slides > li {    height: auto;    width: auto;  }    .cd-slider-content {    height: 84vh;    width: 90vw;    margin: 2vh 5vw;    border-radius: 10px;    cursor: pointer;  }  .visible .sub-visible .cd-slider-content,   .visible > .cd-slider-content {    /* visible slide */    cursor: auto;  }  .cd-slideshow > li:first-of-type .cd-slider-content {    margin-top: 8vh;  }  .sub-slides > li:first-of-type .cd-slider-content {    margin-left: 5vw;  }  .sub-slides > li .cd-slider-content {    margin-left: 1.25vw;    margin-right: 1.25vw;  }  .cd-slider-content .content-wrapper {    height: 100%;    /* hide the slide content if the slide is not selected/visible */    opacity: 0;    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);    border-radius: inherit;    transition: opacity 0.6s;  }  .cd-slider-content::after {    /* this is used to change the slide background color when the slide is out of focus */    content: '';    position: absolute;    z-index: 3;    top: 0;    left: 0;    height: 100%;    width: 100%;    border-radius: inherit;    background-color: #3a3a3a;    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);    opacity: 1;    visibility: visible;    transition: opacity 0.6s, visibility 0.6s;  }  .visible .cd-slider-content .content-wrapper {    opacity: 1;  }  .visible .cd-slider-content::after {    opacity: 0;    visibility: hidden;  }}

ユーザーがあるスライド ページから別のスライド ページに移動すると、プラグインは JavaScript を使用して .cd-slideshow 要素を Y 軸に沿って移動します。

JavaScript

プレゼンテーション スライドは、キーボードの矢印キーを使用する方法とナビゲーション メニューを使用する方法の 2 つで移動できます。

スライド ナビゲーション メニュー機能は、2 つの主要な関数によって実装されます。updateSlide 関数は、現在のスライドから次または前のスライドに移動するために使用され、updateSubSlide 関数は、現在のスライドのサブスライドから移動するために使用されます。項目を前または次のサブ項目に移動します。たとえば、updateSubSlide 関数のコードは次のとおりです。

function updateSubSlide(listItem, string, subSlide) {  var translate,    marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', ''))*6,    windowWidth = window.innerWidth;    windowWidth = ( mq == 'desktop' ) ? windowWidth - marginSlide : windowWidth;    if( listItem.children('.sub-slides').length > 0 ) {    var subSlidesWrapper = listItem.children('.sub-slides'),      visibleSubSlide = subSlidesWrapper.children('.sub-visible');         if( string == 'nav' ) {      /* we have choosen a new slide from the navigation */      var newSubSlide = subSlide;    } else {      var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev();    }    var newSubSlidePosition = newSubSlide.index();    translate = parseInt(- newSubSlidePosition*windowWidth);    setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px');    visibleSubSlide.removeClass('sub-visible');    newSubSlide.addClass('sub-visible');  }}  function setTransformValue(element, property, value) {  element.style["-webkit-transform"] = property+"("+value+")";  element.style["-moz-transform"] = property+"("+value+")";  element.style["-ms-transform"] = property+"("+value+")";  element.style["-o-transform"] = property+"("+value+")";  element.style["transform"] = property+"("+value+")";  // ...}

Source jQuery Home