5

I'm playing around with Skrollr and for the most part it seems pretty intuitive, the one thing that kind of gets me is the data-anchor-target attribute. Most times I don't need it but when I look at some examples it's usually included and I'm confused as to what it does. Does it just mean that at that target, that's when the Skrollr data-(pos) attributes kick in?

Jason Ip
  • 353
  • 1
  • 6
  • 16
  • 5
    I thought this example would be self explanatory http://prinzhorn.github.io/skrollr/examples/anchor_target.html – Prinzhorn May 14 '14 at 18:48
  • let me know if i'm wrong prinzhorn, but it basically means all the data attributes you add to the child element are in relation to the data target – artSir Mar 26 '15 at 14:43

1 Answers1

4

data-anchor-target When using Skrollr.js, you normally use one of two methods as inputs for starting and stopping scrolling controls:

  1. Absolute positioning, relating to the start or the end of the entire document.
  2. Relative positioning, relating to the top, bottom or center of the viewing browser frame.

The data-anchor-target tag enables the developer the freedom to use an alternative element to trigger a modification. You place the control position directly inside the document. Elements are identified to the target tag with simple CSS selectors (.class or #id's). When the data-anchor-target tag element is scrolled into the viewing window, the developer can use the normal relative mode data-bottom-top tag to start the desired scrolling result. Use data-top-bottom as a control for when the data-anchor-target scrolls up and out of the viewing window. Remember this image?

pictorial

This is way cool, as this enables perfect control for different viewing devices, orientations and screen sizes. Take a look at the anchor-target.html example. Notice how the blue face smiles whenever the red face is visible in frame? (Note: don't get freaked out by the !0 CSS identifier in that sample. Remember in skroller, the ! exclamation symbol is used to fix a numeric field from modifying during scrolling. )

zipzit
  • 3,778
  • 4
  • 35
  • 63