GitHub

Download and connect files manually: https://github.com/andreyshpigunov/auto

Connect script at the and of page, before others scripts, and init all available components: auto.init().

CDN

Current versions of files are available at the following links:

JsDelivr

Latest release:
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@1.0.beta.4/dist/auto.css
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@1.0.beta.4/dist/auto.js

Latest:
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto/dist/auto.css
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto/dist/auto.js

Auto.css

Helpers

Extend the functionality of elements.

Links

.pseudo — pseudo-link, underlined with dots

Helpers classes

.unselectable — disables the selection of an element and all its descendants
.clear — clearfix
.uppercase — uppercase text
.lowercase — lowercase text
.nowrap — prohibiting line wrapping
.hyphens — automatic hyphenation (works only in modern browsers)
.video — wrapper for iframe, object и embed, proportionally scale filter
.break-word — transfers non-portable text constructs
.visuallyhidden — hides the block in a special way
.hidden — assigns to a block display: none
.hidden-next — assigns to the next block display: none
.invisible — assigns to a block visibility: hidden
.table-responsive — horizontal scrolling of the table if it doesn't fit

Actions classes

.sync-hover — adding a class synchronously .hover to links with the same href
.is-appeared — when it appears in the viewport, the element is assigned classes .appeared and .visible. When disappearing from viewport class .visible disappear, .appeared remains.

Buttons

To create a button, add a class to the element .button.



Grid

Flexible 1–12 columns grid system.

.grid — main grid element
.grid.g[1..12] — 1..12 columns grid
.c[1..12] — 1..12 wide column

C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12

Auto.js

Animations

Starts a function with animation or controls the class of an element when it or its trigger element reaches a certain scroll point.

Initialization

triggerID — pointer to the ID of the element that we are tracking the position
start — animation start point (height from the top edge of the screen in px or vh)
end — animation end point (height from the top edge of the screen in px or vh)
functionName — name of the function that starts executing when the element moves between "start" and "end"
class — class assigned to a reference when "target" is between "start" and "end"
classRemove — whether to delete the "class" from the element after it leaves the animation zone, by default false

if the element itself is a trigger, you don't need to specify the triggerID.

The "functionName" function gets a parameter with all the fields of the element described above and the "progress" parameter, which changes from 0 to 1, as the page scrolls and the element moves.

Example

Scroller

Scrolls the page to the element with the specified ID.
Automatically applied to elements with "data-scroll".

Init

parent — parent selector (default use window)
target — target ID (required)
offset — offset in pixels (default 0)
speed — scroll speed (default 500 ms)
classActive — class assigned to a reference when the "target" is in the viewport zone

API

auto.scroll.to(target, offset, speed, parent)

target — element or element selector (string)

Loader

Starts the data loading function when scrolling to the end of the block.
Automatically applied to elements with "data-loadmore".

Init

functionName — loader function name
offset — offset in pixels from the bottom edge of the page (default 0)

An incremental parameter page is passed to the function each time it is run.

Lazyload

Loading images when they appear in viewport.
Works with the IntersectionObserver method, only in modern browsers.
If IntersectionObserver is not supported, images are loaded in the usual way.

Init

AJAX

Working, but not supported. Move to axios, fetch or others actual libraries.

Library for working with ajax requests.

Source documentation: https://github.com/fdaciuk/ajax/blob/dev/README.md

Using

GET

POST

POST FormData

PUT

DELETE

Processing responses

Cancel request

Others

Frequently used functions.