Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Joshua Kleveter
21,181 PointsAdvanced Parallax Scrolling Effects
I've been looking around for tutorials on parallax scrolling and have found plenty that tell you how to do a basic effect with multiple scroll layers. However, I would like to know ow to achieve the effect such as what you can see on this site where the line art is drawn onto the page as you scroll.
Anyone know how this is done?
3 Answers
Luke Smith
4,237 PointsThey are using svgs as the images, using javascript & jQuery for animation using function "onscroll".
http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/
http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/
http://blog.teamtreehouse.com/svg-path-animation-with-jquery-and-illustrator
http://www.webdesignermag.co.uk/tutorials/create-clever-svg-line-animations/
http://pepsized.com/merry-scrolling-with-skrollr-js/
http://www.avantrogue.com/scroll-to-animate-svg/
http://codepen.io/anon/pen/idvoh
I was just googling it the other day for a project I am working on, so these are just some resources I used as a base. http://snapsvg.io/ is a good adobe library for doing svg animation. Skrollr just allows you to make those animation work.
Inspiration:
http://www.bizbrain.org/coffee/
http://codyhouse.co/gem/icons-filling-effect/
Hope that helps!
Peter Ramsing
16,814 PointsLooks like they are using a project from GitHub called "skrollr". See it here: skrollr on GitHub
Luke Smith
4,237 PointsJust found this, though it might help: http://codepen.io/paintbycode/pen/JDbcF
Peter Ramsing
16,814 PointsPeter Ramsing
16,814 PointsKiller stuff!
Blake Lieberman
23,772 PointsBlake Lieberman
23,772 PointsWe are starting a group to work on projects together. If either of you is interested fill out this.
https://docs.google.com/forms/d/1g1QIKfTmq7n0aZOb5-9PS6IZ3FmOvbALAhqqbSDMHds/viewform?usp=send_form
Joshua Kleveter
21,181 PointsJoshua Kleveter
21,181 PointsThanks for all the links Luke! Should've thought to ask you about it... ;-)
Luke Smith
4,237 PointsLuke Smith
4,237 PointsJoshua Kleveter , glad I could help!