claudejanz/yii2-scrollmagic

Yii2 ScrollMagic integration

Yii2 ScrollMagic

, _(*1)

Yii2 ScrollMagic integration, _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

php composer.phar require --prefer-dist claudejanz/yii2-scrollmagic "*"

or add, _(*5)

"claudejanz/yii2-scrollmagic": "*"

to the require section of your composer.json file., _(*6)

Usage

Once the extension is installed, simply use it in your code by :, _(*7)

 [
//        'triggerHook'=> "onEnter",
//    ]
        ]);
$i = 0;

while ($i  'home_banner']);
    echo Html::img('@web/images/prangins.jpg', ['class' => 'img-responsive']);
    echo Html::beginTag('div', ['class' => 'container']);
    $title = 'Klod.ch';
    echo Html::tag('p', $title, ['class' => 'title', 'id' => 'title_' . $i]);
    $teaser = 'Une agence digitale';
    echo Html::tag('p', $teaser, ['class' => 'teaser', 'id' => 'teaser_' . $i]);
    $text = 'Nous développons des applications & des sites Web

Société Basée à Prangins';
    echo Html::tag('p', $text, ['class' => 'baseline', 'id' => 'baseline_' . $i]);
    echo Html::endTag('div');
    echo Html::endTag('section');


// create a Screen
    $scene = new ScrollScene(['triggerElement' => '#title_' . $i]);
// create a Timeline
    $timeline = new TimelineMax(['yoyo' => true]);

// create Tweens
    $tween1 = TweenMax::from("#title_$i", 0.5, ['autoAlpha' => 0, 'scale' => 0]);
    $tween2 = TweenMax::to("#title_$i", 0.5, ['backgroundColor' => 'red', 'delay' => -0.25]);
    $tween3 = TweenMax::from("#teaser_$i", 0.5, ['autoAlpha' => 0, 'y' => 120]);
    $tween4 = TweenMax::to("#teaser_$i", 0.5, ['color' => 'darkgreen']);
    $tween5 = TweenMax::from("#baseline_$i", 0.5, ['autoAlpha' => 0, 'x' => 120]);

// add tweens to timeline
    $timeline->add($tween1)->add($tween2)->add($tween3)->add($tween4)->add($tween5);

// attach timeline to scene
    $scene->setTween($timeline);

// add indicator
    $scene->addIndicators(['name' => $i . ' (duration: 0)']);

//add to controller
    $scene->addTo($controller);
    $i++;
}
?>