1

As you might know, I'm trying to implement scrollpath: http://joelb.me/scrollpath/ on my index.html.

I was able to in the plugin and was able to get a gleeful sense of it working by using the code in the demo.js. But I would like to extend the line/customize it and this is where things are BREAKING, it's the freaking apocalyse:

A little background (from my puny, n00bie brain's understanding) - documentation is on Github:

  • You are working with a very big container - goodbye 960px.
    In the demo:
    width: 2640
    height: 2490

  • In your js, you are plotting points in this large container than drawing a line between these points. You can also get fancy with rotations. But at this point I'm trying to just figure out how to extend the path. Though clearly I'd like to understand the latter as well.

moveTo moves the center of the screen to a specified coordinate - the screen jumps to a specific path. In the demo, this is only used once to get the path going. Otherwise lineTo is used (assuming this is to keep the path's fluid and connected as opposed to it being a scatter plot of points)

lineTo draws a straight line from the current position to the given point. it knows the current position because in the code above it, a "name" is specified. The "name" property is what sets the end point of the path.

Among the many things I don't understand (aside from why isn't my lineTo code extending the path seamlessly) is that position absolute is being set in your css for each div, but then also you set coordinates in your js. How do these coincide?

HTML

<div class="description">
    <span class="big">It's a plugin for defining custom scroll paths.       
    </span>
</div>

CSS

.description {
    top: 740px;
    left: 180px;
    width: 440px;
    }

JS

$.fn.scrollPath("getPath")
    ...
    // Line to 'description' element
    .lineTo(400, 800, {name: "description"})

Advice/words from the wiser would be much appreciated.

Taking on more than I can chew - n00b overload, becoming a pathway to hell.

4

0 回答 0