phpnt / yii2-wow
Yii2 wow
0.0.1
2017-04-12 06:44 UTC
Requires
- php: >=5.4.0
- bower-asset/wow: *
- phpnt/animate-css: *
- yiisoft/yii2: *
This package is auto-updated.
Last update: 2024-09-27 02:29:23 UTC
README
描述
在滚动时调用动画。好的 Animate.css 朋友 :-) 可以轻松设置动画参数:样式、延迟、长度、位移、迭代。
DEMO
- 支持 phpNT
社交媒体
安装
php composer.phar require "phpnt/yii2-wow" "*"
或
composer require phpnt/yii2-wow
或添加到 composer.json 文件
"phpnt/yii2-wow": "*"
视图
<?php use phpnt\wow\WowAsset; WowAsset::register($this); ?>
<div class="container"> <div class="col-md-12 text-center"> <div class="row"> <div class="col-md-4 wow bounce"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow flip"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow bounceInUp"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow zoomIn"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow hinge"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow lightSpeedIn"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow rollIn"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow swing"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> <div class="col-md-4 wow shake"> <p class="circle bg-primary" style="border-radius: 200px; height: 200px; width: 200px;"></p> </div> </div> </div> </div>