Acomplishing the Impossible

15 posts

Flag Post

Parallax scrolling on the iPad and in the browser.

Make that impossible feat #3 completed.

(Ok, this was slightly less impossible than my last two—cough, making Javascript control an embedded video in both IE6 and the iPad, but a number of web resources said it was infeasible or downright non-functional for various reasons).

Suck it <— what I built in 6 hours at work. Works in every browser I have access to (IE7, Firefox 15, Safari, Mobile Safari—even the iPhone—and Chrome). Just scroll up or down with your mouse wheel (or gesture swipe). It’s an infinite non-linear bezier curve loop (controlled via SVG).

The hot-spot (visible at the “top” of the loop) brings up a video, but that hasn’t been embedded in a cross browser way yet. It was just done by our back end guy so he had something to work with while he codes some back end database stuff.

 
Flag Post
Works in every browser

I hope your paycheck is worth it.

Are the gestures left→right and right→left? They only seem to work after using the mouse wheel and when you move the cursor over the right edge.

 
Flag Post

I can’t figure out the movement when I scrolling. It seems odd…

 
Flag Post
Originally posted by Senekis93:
Works in every browser

I hope your paycheck is worth it.

Are the gestures left→right and right→left? They only seem to work after using the mouse wheel and when you move the cursor over the right edge.

Up and down. Like I said:

scroll up or down with your mouse wheel (or gesture swipe)

Originally posted by feartehstickman:

I can’t figure out the movement when I scrolling. It seems odd…

It’s a circular-ish loop.

It’d designed similarly to this site which does not work on mobile.

 
Flag Post

Derp. Still, it’s only working for me after I use the mouse wheel. Maybe I’m doing something wrong.

 
Flag Post
Originally posted by Senekis93:

Derp. Still, it’s only working for me after I use the mouse wheel. Maybe I’m doing something wrong.

I think I am misunderstanding something:

Currently the mouse wheel and a vertical swipe gesture are the only triggers which causes a scroll. I haven’t added any keybinds (e.g. page up / page down) if that’s what you’re saying, as it’s not based on a literal scroll percentage.

The faux scroll bar on the right is currently only an indicator as well. I added that in at like 4pm yesterday and haven’t had the time to make it Do Stuff.

 
Flag Post

No no no. The gesture isn’t fully functional unfortunately Draco. Either that, or me and Sen are doing something wrong.
Gesturing side to side, up and down, in circles, it doesn’t matter.
The only time a gesture works is a vertical gesture as you have said BUT it only works DIRECTLY after using the mouse wheel. At least this is my experience.
Its very impressive though, and works on Opera as well.

 
Flag Post
Originally posted by alecz127:

No no no. The gesture isn’t fully functional unfortunately Draco. Either that, or me and Sen are doing something wrong.
Gesturing side to side, up and down, in circles, it doesn’t matter.
The only time a gesture works is a vertical gesture as you have said BUT it only works DIRECTLY after using the mouse wheel. At least this is my experience.
Its very impressive though, and works on Opera as well.

Sounds like you’ve got a system I don’t have access to. The gestures are intended for tablets and I don’t have a touchscreen PC to test with.

Well, I do, but it’s a single-point screen that registers said touches as mouse events (which are not set up in the html).

And probably won’t ever be. The end client is going to be using it exclusively on the iPad, or occasionally in Safari on a Macbook.

 
Flag Post
Originally posted by Draco18s:

Works in every browser I have access to (IE7, Firefox 15, Safari, Mobile Safari—even the iPhone—and Chrome).

ah ok. What you said here made me think it was PC web browser compatible as well as phone browser compatible because of the mention of Chrome, firefox, safari, IE7. As well as the mention of a “Mouse Wheel”. I know understand these are all browsers for phones. I was using a simple computer mouse. Good work.

 
Flag Post

Yeah, I got it wrong too; I thought the gestures could be done with the mouse (they actually work sometimes, after a mouse wheel). It makes sense now.

 
Flag Post
Originally posted by Senekis93:

Yeah, I got it wrong too; I thought the gestures could be done with the mouse (they actually work sometimes, after a mouse wheel). It makes sense now.

Interesting. I haven’t put anything in to take mouse-click input. At least, not for scrolling. There are some hotspots to display content, but that’s it.

 
Flag Post

In my case, it works without clicks.
To reproduce:

FF 16.0.1
Scroll it with the mouse wheel, then move the cursor to the left or right edge and move it. It will scroll the image a bit and won’t work until you use the wheel again.

 
Flag Post
Originally posted by Senekis93:

Scroll it with the mouse wheel, then move the cursor to the left or right edge and move it. It will scroll the image a bit and won’t work until you use the wheel again.

Oh! I know what’s going on. You’re seeing a cause-effect relationship that isn’t there. There’s a bit of auto-center code that will move the view to the nearest “module” after a second of no interaction.

Think of it as a non-linear jQuery carousel. It only stops in certain spots, but it’ll animate between them, but instead of a time-based change, it’s user interaction based change (scrolling).

(Edit: updated link in op to reflect a current version that isn’t under continuous revision)

 
Flag Post

Haha, you’re right.
That was hilarious.

 
Flag Post
Originally posted by Senekis93:

Haha, you’re right.
That was hilarious.

Never even occurred to me that someone might do that. XD