I have a requirement where I need to slide divs in and out of a screen given the users swipe gesture.
I am looking for a javaScript library/decent tutorial that will let me create an effect like the iPhone home screen where you can swipe left and right and have a card/screen slide in/out. It is important it is NOT a framework like Sencha or jqTouch. Essentially I need swipe gesture support and a smooth sliding transition.
Also any effects need to be smooth on the device. (use CSS3 animation (with hardware acceleration) as I need the experience to be smooth.
Targeted devices are Android and iPhone.
Any help or direction would be appreciated.
Here are some jQuery plugins you could use to achieve what you are looking to do without the full overhead of Sencha or jqTouch. These would still require jQuery and the plugin but I imagine if you are doing any reasonable web app or interface you are using jQuery :]
http://plugins.jquery.com/plugin-tags/touch
But here are multiple options, one should work to get the slide effect you are looking for or allow you to handle that gesture appropriately.
Related
How can I add mouse scroll option in my angular app similar to what's present for touch screen devices in which you scroll via holding screen alongside some left or right swipe movement. How can I implement similar scroll technique using mouse so that user can click at some empty area than while holding down the click move mouse in a specific direction to scroll respectively.
Similar to what's available for trello.com:
I would prefer to implement this behavior using pure CSS as chrome's inspector tools also provides this feature while testing site's responsiveness for different screen sizes. So if its possible via CSS it would be great.
If it won't be possible via CSS then I would like to implement using JavaScript or TypeScript.
You could use this library: http://hammerjs.github.io/. It covers a large range of gestures you might be interested in.
I am new to jQuery Mobile, and I am trying to replicate a native iOS app.
The problem I am facing is the that I cannot find a way to smoothly swipe between pages which is common on iOS. In jQuery Mobile, it seems to register a swipe occurred and then swipes the page for you, but I like the feel of having the page follow your swipe.
In iOS, you could use a UIScrollView with page control, but it was also really easy to do yourself by listening to touch events in a UIView.
Are there any libraries/packages that will help me create smooth swiping transitions? If not, are there jQuery bindings to track where the finger is on screen as it moves, so I can move the page and create such a transition myself?
Thanks
I need a custom page slide transition for my new PhoneGap Project, Please help me to how to create a custom page slide transition using html5, css3 and javascript
Thanks advance..
I would recommend PageSlider by Christopher Conraets (an Adobe employee and strong proponent of PhoneGap - check out this talk by him about good rules for PhoneGap development if you're interested).
I'm using this at the moment. It feels good and is very easy to work with.
Check out this plugin pagingSlider.
Features
slide to pages with touch swipes
auto switch to pages by clicking menu item
animated mobile pagebrowser
integrated touch events with QuoJS
**
shafi plz use
**
transform translate3d 3d in css3
to translate the pages left to rigth and rigth to left
example
You can use Jquery Mobile transitions :
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
IScroll4 is a good tool for you。 http://cubiq.org/iscroll-4
Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
Any help is appreciated.
Step 1: Create and object like this
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.
Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.
I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library.
It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.
Then, to create the parallax effect you have three options:
Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
Using a 2d parallax library such as stellar.js or skrollr
Building your own parallax scrolling algorithm.
Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.
Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.
Try using http://cubiq.org/iscroll-4 and stellar.js together.
Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1
I'm developing HTML5 app for Android and iOS. All I need is to slide hidden menu by sweeping it right and hiding it back with a left sweep.
I can use CSS3 transition for the animation so what I'm looking for is really simple framework which provides the javascript events or if someone has experience.
Thanks in Advance.
If you're familiar with jQuery in any sense, then zepto.js would be good enough (and light-weighted) to get your problem solved.