Skip to content
Votum Page Transition Plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
README.md

README.md

VOTUM Page Transition Plugin

An easy, small and lightweight Javascript plugin for page transitions / sliding pages on mobile websites.

Features

  • no jQuery required
  • page transitions with slide effect
  • slide from right to left, slide from left to right, slide up, slide down
  • works on all relative links within your page (absolute links are called normal)
  • choose a data-attribute for your links which should not slide
  • native browser behaviour given, like middle click which opens link in a new tab
  • updates also information in head (title, ... )
  • browser navigation support
  • inject additional functions for call after slide finish
  • possibility to give a special content container instead of whole body for slide

Demo

https://rawgit.com/votum/page-transitions/master/demo/index.html

Getting Started

Requirements

  • domparser polyfill for crossbrowser support (js included)

How to use

  • include js files in head information of your template: domparser.polyfill.js and page.transition.min.js
  • include css file in head information of your template: page.transition.css

Example call of the pageTransition function with default options

<script type="text/javascript">
    pageTransition({
        effectClasses: [ 'slide' ],
        effectClassesReverse: [ 'slide', 'reverse' ],
        afterSlideFunction: function() {
            /* Placeholder for a callback to get executed after each page transition. */
        },
        ajaxLoader: 'ajax-loader',
        noSlideAttr: 'data-no-slide',
        contentContainerSelector: 'body',
        cssSlideDuration: 705,
        headElementsToReplace: 'meta, link, title'
    });
</script>

Options description

  • effectClasses: css class how the sliding should behave (feel free to modify and write your own)
  • effectClassesReverse: css class how sliding should behave after browser navigation (back button)
  • afterSlideFunction: some js stuff which will be called after slide has finished
  • ajaxLoader: id of your ajax loader container which will be appended to your page before slide
  • noSlideAttr: data-attribute which makes links not sliding
  • contentContainerSelector: selector of what should slide
  • cssSlideDuration: Duration of slidingeffect
  • headElementsToReplace: choose what should be replaced in head of page

Good to know

  • ONLY RELATIVE PATH COMPATIBLE: this plugin works ONLY with relative paths, links with absolute paths (http://, mailto:, ftp://) etc. will be called normal
  • Same issue with links that have hashtags in its address (anchor, JS stuff …)
  • I don't know if i really had all exceptions in my mind, but i will extend this plugin soon to make it perfect ;-)

Further notes

Created and modified by Ricardo Hildebrand and Thomas Heuer and developed at VOTUM in Berlin, Germany.

Version & Update notes

24. January 2014

  • v0.1

29. January 2014

  • v0.1.1
  • Compatibility for Internet Explorer version 10 and higher // Transition styles for IE

06. February 2014

  • v0.2
  • replace only parts in head element
  • free choose of container to slide
  • removed jQuery dependency
  • shortened/optimized transition styles
You can’t perform that action at this time.