sequencejs是一款响应式CSS动画框架-BFW插件库

sequencejs是一款响应式CSS动画框架
sequencejs是一款响应式CSS动画框架，用于创建滑块，演示文稿，横幅和其他基于步骤的应用程序，结合 CSS3 Transition 实现响应式的滑块效果。
主要特性：

CSS 框架

支持桌面，平板和移动端

响应式 & 切换平滑

使用 Hammer.js 支持触屏

跨浏览器

自动播放

30+ 选项 & API

完整主题支持
示例代码
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
/*
 * Styles: Body, HTML, and container
 * 1: Make the application fullscreen
 * 2: Basic reset styles
 */
body,
html,
.seq {

  /* #1 */
  width: 100%;
  height: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
}

/*
 * Styles: Container
 * 1: Canvas, steps, and content should be positioned relative to the container
 * 2: Hide anything that goes beyond the boundaries of the Sequence container
 * 3: Some basic styles
 * 4: Set the initial background color
 * 5: Make the background color transition when navigating between steps
 */
.seq {

  /* #1 */
  position: relative;

  /* #2 */
  overflow: hidden;

  /* #3 */
  font-family: sans-serif;
  color: white;
  text-align: center;

  /* #4 */
  background-color: #2A93BC;

  /* #5 */
  transition-duration: .5s;
  transition-property: background-color;
}

/*
 * Styles: Canvas and steps
 * 1: Make the width/height of the screen, canvas, and steps the same size as the Sequence element
 * 2: Reset the canvas and steps for better browser consistency
 */
.seq-canvas,
.seq-canvas > * {

  /* #1 */
  height: 100%;
  width: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Styles: steps
 * 1: Position steps all in the same place
 * 2: Add whitespace around each step
 * 3: Make space for the pagination
 */
.seq-canvas > * {
  /* #1 */
  position: absolute;

  /* #2 */
  padding: 32px;
  box-sizing: border-box;

  /* #3 */
  height: auto;
  top: 0;
  bottom: 80px;
}

.seq-step1 {
  background-color: #2A93BC;
}

.seq-step2 {
  background-color: #6BC85E;
}

.seq-step3 {
  background-color: #45367E;
}

.feature {
  width: 70%;
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 460px) and (min-height: 520px) {
  .feature {
    width: 100%;
  }
}


/* Ghost element */
.valign:before {
  content: "";
  height: 100%;
}

/* Vertically align the ghost and desired elements */
.valign:before,
.valign > .vcenter {
  display: inline-block;
  vertical-align: middle;
}

/* Remove 4px gap to allow consistent valign */
.valign {
  font-size: 0;
}

/* Reset font-size on valigned elements */
.valign > .vcenter {
  font-size: 16px;
}

/*
 * 1: Reset
 * 2: Titles should start as transparent
 * 3: When a change in opacity occurs, transition over .5s
 */
.title {
  /* #1 */
  margin: 0;

  /* #2 */
  opacity: 0;
  transform: translateX(50px) translateZ(0);

  /* #3 */
  transition-duration: .5s;
  transition-property: opacity, transform;
}

/*
 * When a step is active, fade in to opaque and slide to the center
 */
.seq-in .title {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

/*
 * When a step becomes inactive, fade out and slide to the left
 */
.seq-out .title {
  opacity: 0;
  transform: translateX(-50px) translateZ(0);
}

/*
 * Scale an image to 0 (so it can't be seen) when in its start position
 */
.feature {
  transform: translateZ(0) scale(0);
  transition-duration: .5s;
  transition-property: transform, opacity;
}

/*
 * When a step is active, make the image scale in
 */
.seq-in .feature {
  transform: translateZ(0) scale(1);
}

/*
 * When a step becomes inactive, make the image fade out but maintain full scale
 */
.seq-out .feature {
  transform: translateZ(0) scale(1);
  opacity: 0;
}

/*
 * Styles: element holding navigation UI
 * 1: Position the nav 40px from the bottom and make it full-width
 * 2: Reset styles for the <fieldset> element
 */
.nav {
  /* #1 */
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 2.5em;
  max-width: 640px;
  width: 100%;

  /* #2 */
  border: none;
  margin: 0 auto;
  padding: 0;
}

/*
 * Styles: previous/next buttons
 * 1: Reset styles
 * 2: General styles
 * 3: Set up the `opacity` so that it will transition from 70% transparency to opaque when hovered over
 */
.seq-next,
.seq-prev {
  /* #1 */
  padding: 0;
  background: transparent;
  border: none;

  /* #2 */
  padding: .75em;
  cursor: pointer;
  color: white;
  font-size: .75em;
  text-transform: uppercase;

  /* #3 */
  opacity: .7;
  transition-duration: .25s;
  transition-property: opacity;
}

.seq-next:hover,
.seq-prev:hover {
  opacity: 1;
}

/*
 * Styles: next/previous buttons and pagination container
 */
.seq-next,
.seq-prev,
.seq-pagination {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
}

/*
 * Add some space to sides of pagination
 */
.seq-pagination {
  margin: 0 1em;
  padding: 0;
}

/*
 * Styles: pagination links
 * 1: Make the links relative so their active indicator dot can be position: absolute
 * 2: Reset styles
 * 3: Make the links sit side-by-side
 * 4: General styles
 */
.seq-pagination li {
  /* #1 */
  position: relative;

  /* #2 */
  list-style: none;

  /* #3 */
  display: inline-block;
  vertical-align: middle;

  /* #4 */
  width: 50px;
  height: 40px;
  margin: 0 .25em;
}

/*
 * Styles: A small dot that appears when a pagination link is active
 * 1: position the dot under the image and centered
 * 2: Make the dot transparent when not active and set up a transition for when it becomes active
 */
.seq-pagination li:before {
  /* #1 */
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: .5em;
  border-radius: 50%;
  background: white;

  /* #2 */
  opacity: 0;
  transition-duration: .25s;
  transition-property: opacity;
}

/*
 * Show the indicator dot for the current link
 */
.seq-pagination .seq-current:before {
  opacity: .7;
}

/*
 * Reset styles
 */
.seq-pagination img,
.seq-pagination a {
  display: block;
  border: none;
}
</style>



</head>

<body >
  <div id="sequence" class="seq">
    <ul class="seq-canvas">
      <li class="step1 valign seq-in">
        <div class="vcenter">
          <img data-seq class="feature" src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
          <h2 data-seq class="title">Bananas</h2>
        </div>
      </li>
      <li class="step2 valign">
        <div class="vcenter">
          <img data-seq class="feature" src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" alt="A cartoon illustration of half a coconut" width="325" height="300" />
          <h2 data-seq class="title">Coconut</h2>
        </div>
      </li>
      <li class="step3 valign">
        <div class="vcenter">
          <img data-seq class="feature" src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" alt="A cartoon illustration of a round orange" width="350" height="300" />
          <h2 data-seq class="title">Orange</h2>
        </div>
      </li>
    </ul>

    <fieldset class="nav" aria-label="Slider buttons" aria-controls="sequence">

      <button type="button" class="seq-prev" aria-label="Previous"><img src="//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_30,h_30,/quality,q_90" alt="Previous" /></button>

      <ul role="navigation" aria-label="Pagination" class="seq-pagination">
        <li class="seq-current">
          <a href="#step1" rel="step1" title="Go to bananas">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" alt="Bananas" width="50" height="40" />
          </a>
        </li>
        <li>
          <a href="#step2" rel="step2" title="Go to coconut">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" alt="Coconut" width="50" height="40" />
          </a>
        </li>
        <li>
          <a href="#step3" rel="step3" title="Go to orange">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" alt="Orange" width="50" height="40" />
          </a>
        </li>
      </ul>

      <button type="button" class="seq-next" aria-label="Next"><img src="//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_30,h_30,/quality,q_90" alt="Next" /></button>
    </fieldset>

  </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/imagesloaded.pkgd.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sequence.2.1.0.js"></script>
      <script >
// imagesLoaded.js, Hammer.js, and Sequence.js loaded as external assets


var sequenceElement = document.getElementById("sequence");

var options = {
  keyNavigation: true,
  animateCanvas: true,
  phaseThreshold: true,
  reverseWhenNavigatingBackwards: true };


var mySequence = sequence(sequenceElement, options);

    </script>

  

</body>

</html>
官网：https://www.sequencejs.com/