Scrollimate
A utilities library, Scrollimate focuses on features and functions related to scrolling, animations (hence the name), but includes also other functionalities, such as indexable tabs, hover effects, and more.
As one of the oldest libraries I wrote, a lot of the code is not how I would write it again today, but it has seen a lot of successful production use in our team over the last 5 years, and it’s still going!
A closer look
A simple and lightweight parallax method to make any DOM element parallax: From images, to divs to spans, videos, text and more!
Demo_
view CodePen
Production examples_
domainattheoneforty.com
pearlmarketplaceatmidtown.com
Centering & offset control_
See how the top hero-image parallaxes right away, but each following elements (images) only when it comes into view, and consistently for each element? SA Parallax can do that!
The parallax can also be offset from the center of the current viewport, either by a certain amount, or automatically, by calculating the element’s position against the height of the browser
When in centered mode, the parallax will calculate so that the element will be in its “ideal” position when centered vertically on the screen. Plus, (ideally) you would never see it parallax out of view in either direction. (Mileage may vary…)
SA Tabs_
This powerful tool lets you create simple, bookmarable, browser-history-respecting tab content on any website. No cluttered Markup: You just need to add one custom data-attribute!
Control the type of transition between tabs with fading, sliding, or other animations, add external links to the tab navigation, or use the same markup to disable indexing for pages that might already be writing to the URL!
SA Tabs’ also triggers a custom event, satabchanged, when a tab change is invoked. You can listen to this event, and attach more actions and function calls to it!
WCAG compliance_
SA Tabs auto-generated markup is using best practices according to W3 guidelines for tabs
Production examples_
schrift.co/moritz-sans
SA Ripple_
Add a material-design-like ripple effect that activates on click. You can also control the color of the ripple, and the event that triggers the ripple, or attach several for different events!
Demo_
view CodePen
Production examples_
bellmttam.com
reserveatlenoxpark.net
Springy Element_
Adds a “springy element” method, which allows items to be slightly dragged by the curser or touch events, and have them spring back when released, out-bounded, or after having dragged it a certain amount of pixels.
Demo_
view CodePen
SA Accordion_
A simple horizontal accordion for an infinite number of elements. SA Accordion let’s you fine-tune the width of the expanded element, the type of event that raises the change (such as click, mousover, mouseout, etc.), and you can determine the height of each element.
Elements may contain anything from images to entire articles or sections!
Demo_
view CodePen
Production examples_
townhomesatlakepark.com
SA Underline_
If you like the idea of having a link underlined, because it makes them easily identifiable as a to read as a link; but you find that it makes them hard to impossible to style, this method is for you.
This method will wrap each word inside a link (anchor tag) in it’s own span, which you can then style (or style it’s pseudo element). See the Demo link for some examples.
Demo_
view CodePen
SA Scroll Class_
Will add a specifiable class to any element when a target element is scrolled, and remove it when it stops scrolling.
Smooth Anchor Scroll_
Smoothly scrolls to elements on websites that contain in-page anchors. Instead of jumping to a point in the page, website scrolls smoothly (and at a consistent speed) to each anchor.