Download the PHP package webtourismus/aos without Composer

On this page you can find all versions of the php package webtourismus/aos. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package aos

AOS - Animate on scroll library

NPM version NPM downloads Build Status Gitter

Twitter Follow Twitter URL

:exclamation::exclamation::exclamation: This is README for aos@next :exclamation::exclamation::exclamation:

For last stable release (v2) go here

🚀 Demo

🌟 Codepen Examples

👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.

⚙ Installation

Basic

Add styles in <head>:

Add script right before closing </body> tag, and initialize AOS:

Using package managers

Install aos package:

Import script, styles and initialize AOS:

In order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly. If you're using Parcel however, it will work out of the box as provided.

🤔 How to use it?

1. Initialize AOS:

2. Set animation using data-aos attribute:

And adjust behaviour by using data-aos-* attributes:

See full list of all animations, easings and anchor placements

Anchor

There is also a setting that can be used only on per-element basis:

Examples:

This way you can trigger animation on one element, while you scroll to another - useful in animating fixed elements.

API

AOS object is exposed as a global variable, for now there are three methods available:

Example execution:

By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls refreshHard automatically. In browsers that don't support MutationObserver like IE you might need to call AOS.refreshHard() by yourself.

refresh method is called on window resize and so on, as it doesn't require to build new store with AOS elements and should be as light as possible.

JS Events

AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:

You can also tell AOS to trigger custom event on specific element, by setting data-aos-id attribute:

Then you'll be able to listen for two custom events then:

Recipes:

Adding custom animations:

Sometimes built-in animations are just not enough. Let's say you need one box to have different animation depending on resolution. Here's how you could do it:

Then use it in HTML:

The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.

Adding custom easing:

Similar to animations you can add custom easings:

Customizing default animations distance

Default distance for built-in animations is 100px. As long as you're using SCSS though, you can override it:

You have to however configure your build process to allow it to import styles from node_modules beforehand.

Integrating external CSS animation library (e.g. Animate.css):

Use animatedClassName to change default behaviour of AOS, to apply class names placed inside data-aos on scroll.

The above element will get two classes: animated and fadeInUp. Using different combinations of the three above settings, you should be able to integrate any external CSS animation library.

External libraries however don't care too much about animation state before the actual animation. So if you want those elements to be not visible before scrolling, you might need to add similar styles:

Caveats:

setting: duration, delay

Duration and delay accept values from 50 to 3000, with step 50ms, it's because those are handled by css, and to not make css longer than it is already I implemented only a subset. I believe those should cover most cases.

If not, you can write simple CSS that will add another duration, for example:

This code will add 4000ms duration available for you to set on AOS elements, or to set as global duration while initializing AOS script. Notice that double [data-aos][data-aos] - it's not a mistake, it is a trick, to make individual settings more important than global, without need to write ugly "!important" there :)

Example usage:

Predefined options

Animations

Anchor placements:

Easing functions:

❔Questions

If you found a bug, have a question or an idea, please check AOS contribution guide and don't hesitate to create new issues.

All versions of aos with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package webtourismus/aos contains the following files

Loading the files please wait ....