- This topic is empty.
July 23, 2014 at 10:58 am #176244D3N1Participant
Hi, Its my first post here, so I hope you can help me.
I would like to know how to get the effect shown in the page of Letters inc, http://letters-inc.jp/ …I simply love the site, I assume there must be a helpful framework or something to work easily with that effect.
Thanks :).July 23, 2014 at 8:37 pm #176271
So, we answer this question almost daily. Everyone wants to know about scroll effects. It’s not your fault really, no one really knows what they are called (most people call this a parallax effect when it’s not).
Here is what you want:July 24, 2014 at 8:15 am #176333D3N1Participant
Thank you so much NIX,
I am aware of the scrollmagic plugin but the drawing thing while scrolling down is also posible?July 24, 2014 at 8:54 am #176335Paulie_DMember
If you inspect the site with developer tools there are layers of divs containing SVGs elements which are paths being animated by JS, transitions or
A lot of work…nice effect..but a lot of work.July 24, 2014 at 9:20 am #176338
@Paulie_D is correct. ScrollMagic allows you to tie any numerical value to scroll position… even some NON numerical values. Last I checked, changing
There’s many ways you can go about this. You could use divs for straight lines (not recommended). You could use JS to draw SVG lines (probably the best way) with something like Snap. Or, you could do it the easy to understand but time consuming way… which is draw an SVG in Illustrator or Inkscape, then reference the path via CSS/JS.
If you use ANY of these three options… ScrollMagic is the plugin that will make the lines grow upon scroll.
ScrollMagic has SEVERAL tutorials and excellent docs. You can figure out how to do pretty much anything with it.July 24, 2014 at 9:26 am #176339
There is even a fourth option… you COULD use the
canvaselement to draw lines with JS. HOWEVER… this poses probably the highest learning curve AND canvas poses some problems with fluidity AFAIK. The
canvasitself is easy to make fluid… the elements inside is another story. That being said, canvas will render the fastest.July 24, 2014 at 9:36 am #176340shaneismeParticipant
Chris put up a basic overview for how to use SVG line drawing:
It’s not too many steps on how to do this + attach the animation percentages to scrolling.
The hard part is doing the actual line drawing!July 24, 2014 at 10:22 am #176343
I forgot about that post! If I could feature @shaneisme’s answer… I would.