Scrolling
To scroll the browser to the top edge of an element, pass in "scroll" as Velocity’s first
argument. The scroll command behaves identically to a standard Velocity call; it can
take options and is queued up with other chained Velocity calls:
Click here to view code image
$element
.velocity(“scroll”, { duration: 1000, easing: “spring” })
.velocity({ opacity: 1 });
This scrolls the browser to the top edge of the element using a 1000ms duration and a
"spring" easing. Then, once the element has scrolled into view, it fades in fully.
To scroll toward an element inside a parent element with scrollbars, you can use the
container option, which accepts either a jQuery object or a raw element. Note that the
container element of the CSS position property must be set to either relative,
absolute, or fixed—static won’t do the trick:
Click here to view code image
// Scroll $element into view of $(“#container”)
$element.velocity(“scroll”, { container: $(“#container”) });
In both cases—whether scrolling is relative to the browser window or to a parent
element—the scroll command is always called on the element that’s being scrolled into
view.
By default, scrolling occurs on the y-axis. Pass in the axis: "x" option to scroll
horizontally instead of vertically:
Click here to view code image
// Scroll the browser to the left edge of the targeted div.
$element.velocity(“scroll”, { axis: “x” });
Finally, the scroll command also uniquely takes an offset option, specified in pixels,
which offsets the target scroll position:
Click here to view code image
// Scroll to a position 50px above the element’s top edge.
$element.velocity(“scroll”, { duration: 1000, offset: “-50px” });
// Scroll to a position 250px beyond the element’s top edge.
$element.velocity(“scroll”, { duration: 1000, offset: “250px” });
Colors
Velocity supports color animation for these CSS properties: color,
backgroundColor, borderColor, and outlineColor. In Velocity, color
properties accept only hex strings as inputs, for example, #000000 (black) or #e2e2e2
(light gray). For more granular color control, you can animate the individual red, green,
and blue components of a color property, as well as the alpha component. Red, green, and
blue range in value from 0 to 255, and alpha (which is equivalent to opacity) ranges from
0 to 1.
Refer to the inline comments below for examples: