PHPackages                             dmstr/yii2-parallax - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. dmstr/yii2-parallax

ActiveYii2-extension[Utility & Helpers](/categories/utility)

dmstr/yii2-parallax
===================

An extention to create AWESOME parallax effects.

0.1.0(7y ago)29.6k↓67.6%1MITPHP

Since Aug 29Pushed 7y ago5 watchersCompare

[ Source](https://github.com/dmstr/yii2-parallax)[ Packagist](https://packagist.org/packages/dmstr/yii2-parallax)[ RSS](/packages/dmstr-yii2-parallax/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (1)Versions (2)Used By (0)

Yii2 Parallax
=============

[](#yii2-parallax)

An extention to create AWESOME parallax effects.

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
composer require --prefer-dist dmstr/yii2-parallax "*"

```

or add

```
"dmstr/yii2-parallax": "*"

```

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

1. Register desired asset bundle in view
2. Set the x and y to define direction and velocity. An extra optional parameter (startCondition) tells the element when it should start moving. use "asap" to move the element as soon as the scroll event fires. Use "visible" (default value) for those elements that should move as soon they become visible in the viewport.
3. Scroll to see the AWESOME effect.

\[data-parallax="{x}, {y}, {when}"\]

Example with 3 parallax elements

```

```

- TIP: try it with css transitions on transform to create nicer effect.
- TIP: to make realistic parallax effects, closer (alsor bigger) elements should move faster than elements tha are farther (also smaller).

Example widget usage

```