How to Build a Lightweight Full‑Screen Swipe H5 App with Zepto and Hammer.js

Introduction

When a small two‑screen H5 app requires full‑screen horizontal swipe navigation and simple animations, using fullpage.js with jQuery can be heavy. This guide shows how to implement the same functionality with Zepto, Hammer.js and CSS, keeping the total resource size around 200 KB without Gzip.

Key Implementation Points

Reuse the carousel idea from Bootstrap but simplify the markup.

Trigger page switches via the hashchange event on mobile (PC uses click callbacks).

Use Hammer.js for gesture handling.

Include only the needed parts of animate.css for animations.

Replace jQuery with Zepto for a smaller footprint.

Apply CSS transition effects and adapt transition.js to work with Zepto.

HTML Structure

<div id="container" class="container">
  <section id="page-1" class="page page--1">
    <div class="page__jump">
      <a href="#page-2" title="">下一页</a>
    </div>
    <p class="page__num animated">1</p>
  </section>
  <section id="page-2" class="page page--2">
    <div class="page__jump">
      <a href="#page-1" title="">上一页</a>
      <a href="#page-3" title="">下一页</a>
    </div>
    <p class="page__num animated">2</p>
  </section>
  <section id="page-3" class="page page--3">
    <div class="page__jump">
      <a href="#page-2" title="">上一页</a>
    </div>
    <p class="page__num animated">3</p>
  </section>
</div>

Core CSS (simplified)

.container, .page {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: transform 4s ease;
  transition: transform 4s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.page--active { /* visible page */ }
.page--next { /* positioned to the right */ }
.page--prev { /* positioned to the left */ }
.page--active-left, .page--next-left,
.page--active-right, .page--prev-right {
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

JavaScript Logic

Initialize the first page:

var $activePage;
(function(){
  $activePage = $('#page-1');
  $activePage.addClass('page--active');
})();

Determine slide direction:

function getSlideType($targetPage){
  var activeId = $activePage.attr('id');
  var targetId = $targetPage.attr('id');
  return activeId < targetId ? 'next' : (activeId > targetId ? 'prev' : '');
}

Perform the slide:

function slide(targetPageId){
  var $target = $('#' + targetPageId);
  if(!$target.length || sliding) return;
  sliding = true;
  var type = getSlideType($target);
  var dir = type === 'next' ? 'left' : 'right';
  $target.addClass('page--' + type);
  $activePage.addClass('page--active-' + dir);
  $target.one($.transitionEnd.end, function(){
    $activePage.removeClass('page--active page--active-' + dir);
    $target.removeClass('page--' + type).addClass('page--active');
    $activePage = $target;
    sliding = false;
  }).emulateTransitionEnd(400);
}

Bootstrap‑style transition end detection (adapted for Zepto):

(function(){
  var el = document.createElement('transitionEnd');
  var names = {WebkitTransition:'webkitTransitionEnd',MozTransition:'transitionend',OTransition:'oTransitionEnd otransitionend',transition:'transitionend'};
  for(var n in names){ if(el.style[n] !== undefined) return names[n]; }
  return false;
})();
$.fn.emulateTransitionEnd = function(duration){
  var called = false, _this = this;
  $(this).one('transitionend', function(){ called = true; });
  setTimeout(function(){ if(!called) $(_this).trigger('transitionend'); }, duration);
  return this;
};

Hashchange handling for mobile navigation:

$(window).on('hashchange', function(){
  var hash = location.hash || '#page-1';
  slide(hash.substring(1));
});
location.hash = '#page-1';

Hammer.js gesture setup:

var container = document.getElementById('container');
var mc = new Hammer.Manager(container);
var swipe = new Hammer.Swipe();
mc.add(swipe);
mc.on('swipeleft', function(e){ swipeTo('next', e); });
mc.on('swiperight', function(e){ swipeTo('prev', e); });
function swipeTo(type, e){
  var $target = $('.page')[type === 'next' ? 'next' : 'prev']();
  if($target.length){
    var id = $target.attr('id');
    location.hash = '#' + id;
  }
}

Demo

The following GIF demonstrates the swipe effect:

Conclusion

By combining Zepto, Hammer.js, CSS transitions and a small amount of JavaScript, you can create a fast, lightweight full‑screen swipe navigation for small H5 projects without the overhead of larger libraries. The approach is extensible and can be adapted to more pages or richer animations as needed.