https://github.com/dmstr/yii2-parallax
https://github.com/dmstr/yii2-parallax
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dmstr/yii2-parallax
- Owner: dmstr
- Created: 2018-08-29T12:14:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-04T07:43:38.000Z (almost 8 years ago)
- Last Synced: 2024-08-09T21:14:49.495Z (almost 2 years ago)
- Language: PHP
- Size: 16.6 KB
- Stars: 2
- Watchers: 7
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Yii2 Parallax
===================
An extention to create AWESOME parallax effects.
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
-----
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
```html
```
* 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
```php
0.1, 'y' => -0.2, , 'startCondition' => 'visible']); ?>
= '... some content' ?>
```