I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
Related
Here's the site I'm talking about: http://hlkagency.com/.
Basically, I love the scrolling effect on tapping the up and down arrow keys. Other smooth scrolling libraries I found were too slow and clunky. I want to make something that works exactly like this.
I tried going through the minified script used on the page after beautifying it, but there just seems to be a whole lot going on.
That's a Parallax style scrolling. Like #RobertHarvey pointed on his comment. There are so many libraries since it has become very popular. This Library has examples of how it can be implemented. If you do a google search on parallax libraries for JS you will find a ton.
I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!
Are there any jquery plugins that can simulate the acceleration on an iphone when scrolling - doesnt have to be exactly like it but anything remotely similar. I cant seem to find anything.
Along the same lines, are there any really, good examples of smooth javascript scrolling out there? Most javascript scrolling seems jittery in one way or another.
Hey, I've used iScroll in a previous project, it runs really smooth (particularly on the 3GS/4). There are several examples and and a demo on the site.
http://gsgd.co.uk/sandbox/jquery/easing/
try easing plugin. there are loads of different animation options.
Have you seen yahoo's ipad/tablet home page? The swipe effect for flipping through headlines is impressive. I have seen some workarounds in jquery (using the cycle plugin + the touchwipe plugin) but these all simply detect user gesture and then run the x- absolute position animation, rather than actually track the user's gesture. Know of a solution similar to yahoo's?
Found the solution: http://cubiq.org/iscroll-4
Used the "snap-to" option to re-create the carousel effect.
Swipe JS is a good one. If this is the effect that you are looking for - http://swipejs.com
Not sure, but there is jQuery Mobile.
I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.