Download the PHP package zephni/trigger-on-view-js without Composer

On this page you can find all versions of the php package zephni/trigger-on-view-js. 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?

Example code of zephni/trigger-on-view-js

Informations about the package trigger-on-view-js

TriggerOnViewJS (requires jquery)

What is TriggerOnViewJS?

Simply put, triggerOnView is a Javascript/JQuery extended method that sets a trigger and a reaction for any element.

The most common usage is likely to be to animate these elements 'in to' or 'out of' view or as the page scrolls with CSS animations or customised functions.

Requirements

Only JQuery is required.

How to install and use

There are two ways you may wish to install TriggerOnViewJS:

Installing

1. Make sure JQuery is installed

composer require components/jquery

Include <script src="/vendor/components/jquery/jquery.min.js"></script> within your <head> tags

or prehaps using a CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

2. Getting TriggerOnViewJS

Option 1: Using composer

composer require zephni/trigger-on-view-js 1.0.15

Note that 1.0.15 is the last version that uses jQuery, anything 1.1.0 or above uses vanilla Javascript

Option 2: Manual install

Download triggeronview.js from this repository and place wherever you keep JS files in your project.

3. Include the script into your page (Source depends on where it was installed)

Place this somewhere after JQuery

<script src="/vendor/zephni/triggeronview.js"></script>

Basic example of usage

This is the most basic version, it sets the given element as both the trigger and the element to animate:

Note that we have set the default and in options. Everything within default will be ran straight away and set without any animation. The in option will set the animation once the trigger element comes into view. By default if you do not include an out option, default will be used to animate back from once the trigger element is out of view.

If you wish to have a different trigger element you can do this two ways:

Or you can target the elements the other way around:

triggerOnView can be assigned to multiple elements at once, eg. using a class. By default each one will use itself as both the trigger and element but either of these can be overriden across all as above.

Commonly you may have a single trigger, but multiple elements within that need to animate at the same time, to do this it makes sense to use the trigger element primarily, and pass an array of options that set the element for each one. Once again this can be done the other way around if needed:

Note that by default the 'relative' position is applied to all elements. To disable this pass defaultPosition: false.

The options object

List of available options and defaults:

Options explained

Option Description
triggerOffset sets a distance offset before triggering an event. In other words you may want to have part or all of the element fully in view before applying the annimation.
time the number of seconds to animate for. This can take decimals eg. 1.2 or 2.5.
delay the number of seconds to delay before triggering on both the in and out event. Can take decimals eg. 1.2 or 2.5.
inDelay the number of seconds to delay before triggering on the in event, this will override the in value set by 'delay'. Can take decimals eg. 1.2 or 2.5.
outDelay the number of seconds to delay before triggering on the out event, this will override the in value set by 'delay'. Can take decimals eg. 1.2 or 2.5.
element The element to run animation events on
trigger The trigger element that will run the animation on the target element once in view
easing This can accept any available JQuery animate easing type, see https://api.jquery.com/animate
defaultPosition In most cases a relative position will be required for the element so it can respond to directional positioning values but this can be changed if needed. This can accept any CSS position value.
default The default CSS to apply to the target element, this will be ran straight away and also be used as the out animation if out is not false.
in The CSS to animate once the in trigger has been called
out The CSS to animate once the out trigger has been called. Set to false to prevent out animation
callbackPreIn A callback function to be called as soon as the in trigger begins
callbackPreOut A callback function to be called as soon as the out trigger begins
callbackPostIn A callback function to be called as soon as the in trigger animation has ended
callbackPostOut A callback function to be called as soon as the out trigger animation has ended

Whats next?

I am just using this for myself so if I need to update it I will. But if you have any suggestions feel free to contact me.

Example page: https://www.zephni.com/repos/trigger-on-view-js/example

All versions of trigger-on-view-js 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 zephni/trigger-on-view-js contains the following files

Loading the files please wait ....