HTML5多层页面切换显示过渡动画效果

Multi-Layer Page Reveal Effects 点击箭头，呈现多个页面一层层揭开的动画特效。

html5, page, transition

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3718
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg class="hidden">
  <defs>
    <symbol id="icon-arrow" viewBox="0 0 39 51.43">
      <title>Arrow Left</title>
      <polygon points="7 25.71 36 45.71 36 26.08 36 5.71 7 25.71" stroke-miterlimit="10" stroke-width="6"/><line x1="3" y1="5.71" x2="3" y2="45.71" fill="none" stroke-miterlimit="10" stroke-width="6"/>
    </symbol>
  </defs>
</svg>
<main class="container">
  <div class="pages">
    <div class="page page--current">

<a class="pater" href="#">
        <img class="pater__img" src="https://tympanus.net/Tutorials/PageRevealEffects/img/HackReactorLogo.svg" alt="Hack Reactor" />
        <div class="pater__text">
          <h2 class="pater__title">Your CS success starts here.</h2>
          <p class="pater__desc">Hack Reactor's 12-week immersive coding school is accepting applications for onsite and online courses. <strong>Apply now and become a software engineer.</strong></p>
        </div>
      </a>
    </div>
    <div class="page">
      <blockquote class="quote">
        <p>A good programmer is someone who always looks both ways before crossing a one-way street. </p>
        <footer>Doug Linder</footer>
      </blockquote>
    </div>
  </div>
  <nav class="pagenav">
    <button class="pagenav__button pagenav__button--top" aria-label="Navigate top"><svg class="icon icon--rtop"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--left" aria-label="Navigate left"><svg class="icon"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--right" aria-label="Navigate right"><svg class="icon icon--rright"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--bottom" aria-label="Navigate bottom"><svg class="icon icon--rbottom"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--cornertopleft" aria-label="Navigate top left"><svg class="icon icon--rtopleft"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--cornertopright" aria-label="Navigate top right"><svg class="icon icon--rtopright"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--cornerbottomleft" aria-label="Navigate bottom left"><svg class="icon icon--rbottomleft"><use xlink:href="#icon-arrow"></use></svg></button>
    <button class="pagenav__button pagenav__button--cornerbottomright" aria-label="Navigate bottom right"><svg class="icon icon--rbottomright"><use xlink:href="#icon-arrow"></use></svg></button>
  </nav>
</main>
<script src="https://tympanus.net/Tutorials/PageRevealEffects/js/classie.js"></script>
<script src="https://tympanus.net/Tutorials/PageRevealEffects/js/main.js"></script>
<script>
(function() {
  var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
    currentPage = 0,
    
    revealerOpts = {
      // the layers are the elements that move from the sides
      nmbLayers : 3,
      // bg color of each layer
      bgcolor : ['#0092DD', '#fff', '#3E3A35'],
      // effect classname
      effect : 'anim--effect-3',
      onStart : function(direction) {
        // next page gets class page--animate-[direction]
        var nextPage = pages[currentPage === 0 ? 1 : 0];
        classie.add(nextPage, 'page--animate-' + direction);
      },
      onEnd : function(direction) {
        // remove class page--animate-[direction] from next page
        var nextPage = pages[currentPage === 0 ? 1 : 0];
        nextPage.className = 'page';
      }
    };
    revealer = new Revealer(revealerOpts);

// clicking the page nav buttons
  document.querySelector('button.pagenav__button--top').addEventListener('click', function() { reveal('top'); });
  document.querySelector('button.pagenav__button--left').addEventListener('click', function() { reveal('left'); });
  document.querySelector('button.pagenav__button--right').addEventListener('click', function() { reveal('right'); });
  document.querySelector('button.pagenav__button--bottom').addEventListener('click', function() { reveal('bottom'); });
  document.querySelector('button.pagenav__button--cornertopleft').addEventListener('click', function() { reveal('cornertopleft'); });
  document.querySelector('button.pagenav__button--cornertopright').addEventListener('click', function() { reveal('cornertopright'); });
  document.querySelector('button.pagenav__button--cornerbottomleft').addEventListener('click', function() { reveal('cornerbottomleft'); });
  document.querySelector('button.pagenav__button--cornerbottomright').addEventListener('click', function() { reveal('cornerbottomright'); });

// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
  function reveal(direction) {
    var callbackTime = 750,
      callbackFn = function() {
        classie.remove(pages[currentPage], 'page--current');
        currentPage = currentPage === 0 ? 1 : 0;
        classie.add(pages[currentPage], 'page--current'); 
      };

revealer.reveal(direction, callbackTime, callbackFn);
  }

// changing the effect..
  var effectCtrl = document.getElementById('select-effect');
  effectCtrl.addEventListener('change', changeEffect);
  // force it to be the first opt as default
  effectCtrl.value = 'effect-3';

Multi-Layer Page Reveal Effects 点击箭头，呈现多个页面一层层揭开的动画特效。

html5, page, transition

编辑器支持Emmet

快捷键

Multi-Layer Page Reveal Effects 点击箭头，呈现多个页面一层层揭开的动画特效。

html5, page, transition

HTML5带左右滑动切换动效的登录/注册表单页面模板

HTML5 SVG使用球体水面波动显示进度动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：