LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
 

Wow.js & Animate.css

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

data-wow-delay=".25s"

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
flip
flipOutX
flipOutY
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
hinge
rollOut
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

data-wow-delay=".25s"

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

data-wow-duration="2s"
data-wow-iteration="100"

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

data-wow-iteration="100"

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

wow-data-offset="200"

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
CSS
.wowBack {
  background:#222;
  position:relative; overflow:hidden;
}
.wowWrap div {
  background:#27ae60; 
  display:block;
  width:100%;
  margin:5% 0;
  text-align:center;
  padding-top:20%;
  padding-bottom:20%;
}

.wowWrap {
  width:16.66%;
  float:left;
  padding: 0 .5%;
}

.wowWrap h4{
  position:fixed;
  z-index:200;
  width:100%;
  padding:1% 0% 1% 0%;
  margin:0;
  color:white;  
  font-size:1.35vw;
  background:rgba(22,22,22,.3)
}

.wowWrap div:first-of-type{
  margin-top:25%; }

/*I've assigned class wHighlight to all the animate.css classes that add elements onto the page with delay.  */
.wHighlight {background:#28a !important}
JS
new WOW().init();


/* http://mynameismatthieu.com/WOW/

wow.js allows you to animate html elements on with animate.css on scroll past.

It is a two step process only

STEP 1 
Add the CSS class="wow" to any HTML element that you wish to animate on scroll past.  It will be invisible until the user scrolls to reveal it.  If you wish to use delay, then only the options in blue below would be invisible until the user scrolls past.

STEP 2
Pick an animation style from animate.css and add the CSS class to the HTML element.

STEP 1 & 2 Example
Reveal This
OPTIONAL CHOICES You can also add data-wow-xxxx to your HTML element from Step 1 & 2. There are four choices. It is okay to use all four on one HTML element. data-wow-duration="2s" Change the animation duration to 2s; data-wow-delay=".5s" Half second delay before the animation starts data-wow-offset="300" Distance in pixels to start the animation (related to the bottom of browser viewport and the top of hidden box. When the user scrolls and reach this distance the hidden box is revealed. data-wow-iteration="4" Number of times the animation is repeated */

Description

when using delay with wow.js only a few of the animate.css classes keep elements invisible until scroll past. They are highlighted blue.
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv