Coder Social home page Coder Social logo

erlendellingsen / webswipe Goto Github PK

View Code? Open in Web Editor NEW
4.0 2.0 0.0 23 KB

Swiping UI library for mobile web apps. Create beautiful swiping transitions for your web app.

License: MIT License

HTML 23.61% JavaScript 76.39%
history swipe web webapps page transitions page-transitions navigation mobile-web javascript

webswipe's Introduction

webswipe

WORK IN PROGRESS

webswipe logo

What's webswipe?

webswipe is a pure javascript library created for creating neat looking swiping-based page transitions for web applications. This is meant to replicate the user experienced many native applications have when "swiping back" in history on apps.

Most modern popular applications have this, including Facebook Messenger, Snapchat, Reddit, Spotify, etc.

I made this library because I after relatively extensive research found no existing decent libraries that perform this task.

Installation

Currently not accessible. Please wait until first release. Alternatively clone this project.

To do's

As written the project is WIP and has not reached an alpha stage. Contributors are more than welcome, but the to do's on this list is primarily a list of tasks I've written for myself.

  • Done When a previous page is loaded, a callback should be called. (E.g. set further history)
  • Done Implement a setPreviousPage-method (see above). Should work almost as setPage but should set previous div.
  • Done Implement a rapidForceThreshold-option that should fire if a sudden but "powerful" swipe has been performed. This will cause the switch to trigger even though pageSwitchThreshold may not be reached.
  • Make sure that width of activePage stays the same even though moved. (Currently wrap-text triggers because element gets smaller). (Handle off screen width)
  • Done Implement touch vs mouse detection
  • Done Implement touch events (currently only mouse) (See above)
  • Create a better looking demo
  • Create usage guide

Contributions

Contributions are more than welcome! See the To do's above or add your own features. Submit a PR when you're ready to go!

Other similar/related work

In an effort to introduce some normal native functions to native web apps I have made some other libraries: pull to reload for web apps and a tab bar system for web apps

License

MIT

Copyright (c) 2017 Erlend Ellingsen

webswipe's People

Contributors

erlendellingsen avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.