Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pretty nifty ! #2

Closed
joeblew99 opened this issue Dec 2, 2015 · 12 comments
Closed

Pretty nifty ! #2

joeblew99 opened this issue Dec 2, 2015 · 12 comments
Labels

Comments

@joeblew99
Copy link

Am wondering if its easy or you could add a demo of horizontal scroll.
The reason being that I think a combination of horizontal and vertical scrolling is what a few high end apps do.
For example airbnb.

It would be cool to do it with polymer.

Great work and really awesome

@vguillou
Copy link
Owner

vguillou commented Dec 3, 2015

Thanks !

Did you notice the "Horizontal" switch in the interactive overview demo ?

Or maybe you want a fully declarative horizontal demo ?

@joeblew99
Copy link
Author

Found it.sorry missed that.

A demo that has both horizontal and vertical on the one spa is really interesting.

This is a pattern used allot

@vguillou
Copy link
Owner

vguillou commented Dec 6, 2015

Hum actually i don't see any parallax on Airbnb's website.
Could you provide me with a link to the kind of effect you'd like to achieve ?
Then i could (maybe) add another demo.

@joeblew99
Copy link
Author

its in their android app, not the web site.

my mistake.

On Mon, Dec 7, 2015 at 12:16 AM Vincent Guillou notifications@github.com
wrote:

Hum actually i don't see any parallax on Airbnb's website.
Could you provide me with a link to the kind of effect you'd like to
achieve ?
Then i could (maybe) add another demo.


Reply to this email directly or view it on GitHub
#2 (comment)
.

@OutsourcedGuru
Copy link

I was thinking about this a few weeks ago, as described by @joeblew99. I wanted the standard vertical scroll to abruptly scroll right at some arbitrary point down the single-page app. Thought it would be cool to throw the user a curve ball like that, to keep them engaged in the material.

Great element, btw. I hope to use it sometime this week. I've been either trying to build one myself or to find one out there in the wild that doesn't break polymer. Most seem to have a heavy reliance upon jQuery, for example. Thanks!

@vguillou
Copy link
Owner

Thanks for the feedback @OutsourcedGuru !

From what I gather, I'm not sure if you could do this with parallax-element.
Maybe I'm wrong !
Could you provide a link to an example of such a webapp, for me to picture exactly what you would like to achieve ?

@OutsourcedGuru
Copy link

@vguillou If I have seen it before then I can't remember where. I'm probably just dreaming up something that would be very cool, though, with an unexpected shift in scrolling behavior. In fact, I'm guessing that there could be a way of simulating diagonal scrolling with some sort of trickery.

Anyway, finally got http://www.myJS.io to work out, shimming your code into a very tricky Polymer Starter Kit installation. Their gulpfile.js and build process did not love your custom element at first. I honestly spent almost a week on this effort but I think it's finally paid off. JSHint (lint) complained for days on it but that's now sorted.

@vguillou
Copy link
Owner

If their is a problem with the element's code, I'd be happy to receive pointers from you and/or pull request(s) 👍

http://www.myJS.io is very nice BTW. 👍
If I may, I think you should use media queries to increase the height of the white divider layers, because right now there is some overflow problem.

@OutsourcedGuru
Copy link

@vguillou Yes, I've begun the process of using @media in my main.css to differentiate portrait/landscape for my iPhone 5, for example. It now reasonably does a good job with that browser in both orientations and the iPad II I'll work on next.

@OutsourcedGuru
Copy link

I've zipped up my project for you if you'd like to see the work to get lint to shut up. Email me at info@myJS.io and I'll send it to you. I included a README.md file to explain the work I did. It also demonstrates the @media CSS exceptions that I've done for the iPhone 5 and it shows my own implementation of your fullscreen-api.

@OutsourcedGuru
Copy link

@joeblew99 Feel free to close this issue. I was just using it as an opportunity to talk to the author. (Thanks.)

@vguillou
Copy link
Owner

vguillou commented Mar 2, 2016

Thank you both for the feedback. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants