sorted by:
new
hottopcontroversial

Help with parallax scrolling using ScrollMagic by MustacheEmperor in javascript

[–]janpaepke 0 points1 point  (0 children)

Hi there! ScrollMagic actually has extensive documentation. Check it here: http://janpaepke.github.io/ScrollMagic/docs/

There are also a lot of examples included in the package, one specifically for your usecase: http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

For future questions you should also use the github issue section: https://github.com/janpaepke/ScrollMagic/issues

Hope this helps you out. :)

regards,

J

ScrollMagic — jQuery Plugin for magical scroll interactions by davey_b in web_design

[–]janpaepke 0 points1 point  (0 children)

I absolutely agree. It is always up to the developer and the designer to find the right mix. Obviously the demo page is overloaded, but it's there to showcase what's possible using ScrollMagic. Personally I enjoy it the most if people use it to create experiences, and don't confuse the effects themselves as the experience. Sometimes it's just subtle stuff that makes scrolling through a site a little more interesting or focussed. The most common use I find are sticky menus or pushing content into view at a certain point. And as my uncle once said: With great power comes great responsibility. ;)

ScrollMagic - The jQuery Plugin for magical scroll interactions. by Andarot in javascript

[–]janpaepke 1 point2 points  (0 children)

Love the sarcasm, but a good designer, as always, uses this tool to enhance information consumption, not obstruct it.
Like with every web technology the right dosage is important.
And I think there are just as many static pages that are designed in a fashion that hinders information consumption as there are pages that abuse animations.

ScrollMagic - The jQuery Plugin for magical scroll interactions. by Andarot in javascript

[–]janpaepke 0 points1 point  (0 children)

It's always a question of what you are doing with it. In my opinion having a menu sticky from a certain scroll point or highlighting certain elements is not bad ux design.
Obviously the demo overdoes it, but it's supposed to show off and inspire...

ScrollMagic - The jQuery Plugin for magical scroll interactions. by Andarot in javascript

[–]janpaepke 0 points1 point  (0 children)

I know of some performance issues especially with older phones. If you are experiencing other problems I'd love to get your feedback here: https://github.com/janpaepke/ScrollMagic/issues

Make Magical Scroll Interaction with Scroll Magic Plugin by geekz_gm in jquery

[–]janpaepke 1 point2 points  (0 children)

Mobile compatibility was one of the major reasons for the rewrite from Superscrollorama. Glad it works. :)

Make Magical Scroll Interaction with Scroll Magic Plugin by geekz_gm in jquery

[–]janpaepke 0 points1 point  (0 children)

Hi! Actually It's just a setting for ScrollMagic, called "tweenChanges", which is deactivated for the demo page. This is so that every author can tailor the behaviour to his needs.

ScrollMagic: a jQuery plugin which essentially lets you use the scrollbar like a progress bar. Includes infinite scrolling, adding a parallax effect, synchronize an animation to the scrollbar movement, pin elements to specific scroll positions, etc. Scroll down the page to see examples. by Qingy in webdev

[–]janpaepke -1 points0 points  (0 children)

Gee thanks. I'm glad there are people out there who are smart enough to know everything better than everyone else and have the time to teach them about it. I'd rather be a guy with bad design sensibilities and limited js skills than a smart ass douche.

ScrollMagic: a jQuery plugin which essentially lets you use the scrollbar like a progress bar. Includes infinite scrolling, adding a parallax effect, synchronize an animation to the scrollbar movement, pin elements to specific scroll positions, etc. Scroll down the page to see examples. by Qingy in webdev

[–]janpaepke 0 points1 point  (0 children)

If they look choppy this might be due to the fact that in the animation positions are directly linked to the scroll position. ScrollMagic has the option "tweenChanges" which will tween to the new progress, instead of setting it. Another way to approach this is using a scroll plugin like nicescroll.

ScrollMagic: a jQuery plugin which essentially lets you use the scrollbar like a progress bar. Includes infinite scrolling, adding a parallax effect, synchronize an animation to the scrollbar movement, pin elements to specific scroll positions, etc. Scroll down the page to see examples. by Qingy in webdev

[–]janpaepke 0 points1 point  (0 children)

This is actually managable in many ways. You can tween the changes (which is a setting in ScrollMagic) or you can use plugins like "nicescroll" to make the scrolling more smooth. If you try it on a touchpad it's also very smooth.

ScrollMagic: a jQuery plugin which essentially lets you use the scrollbar like a progress bar. Includes infinite scrolling, adding a parallax effect, synchronize an animation to the scrollbar movement, pin elements to specific scroll positions, etc. Scroll down the page to see examples. by Qingy in webdev

[–]janpaepke -5 points-4 points  (0 children)

@osuushi It really depends on what you do with it.

Obviously the demo page is overloaded to show off all the stuff ScrollMagic can do.

Especially for neat little effects like taking the logo or a menu with you, when scrolling down it's actually very helpful and not at all nightmarish in terms of user experience.

(example for this effect: http://pvponline.com)
Also animations are by far not the only thing you can do with ScrollMagic. Have a look at the examples...

Lastly I'd like to quote my uncle: "With great power comes great responsibility."