Monday, 30 October 2017

Plugin To Use

All-in-One WP MigrationEasy HTTPS (SSL) RedirectionHide/Unhide Menu for Guest/MemberWP Change Default From EmailWidget Options  Extended Widget 
By at
Labels: ,

Friday, 27 October 2017

Payment gateway ref

https://ibill.my/
http://billplz.com
By at

Sunday, 8 October 2017

CSS : ALIGN MULTIPLE IMAGES HORIZONTAL

.container2{
    text-align:center;
   
    border:0px solid #666;
}

.fake_img{
    display:inline-block;
    margin:0;
    padding:5px;
   
    border:0px solid #CCC;
}


<!-- html here -->

<div class="container2">

    <div class="fake_img">Content here
</div>
    <div class="fake_img">Content here  </div>
    <div class="fake_img">Content here </div>
    <div class="fake_img">Content here</div>
</div>



By at
Labels:

Thursday, 5 October 2017

WOW JS CLASSES animation

https://codepen.io/TimLamber/pen/dLxbF



COPY THIS TO HEAD

 <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
              <script>
              new WOW().init();
              </script>

 HOW TO SET CLASSES

<div data-wow-delay="1s" data-wow-duration="1s" class="wow fadeInDown wHighlight animated" style="visibility: visible;" > ... </div>

new WOW().init();
wow.js allows you to animate html elements on with animate.css on scroll past.


The classes sample 

<main class="wowBack clearfix">
  <section class="wowWrap">
    <h4>Wow.js & Animate.css</h4>
    <div class="wow bounce">bounce</div>
    <div class="wow flash">flash</div>
    <div class="wow pulse">pulse</div>
    <div class="wow rubberBand">rubberBand</div>
    <div class="wow shake">shake</div>
    <div class="wow swing">swing</div>
    <div class="wow tada">tada</div>
    <div class="wow wobble">wobble</div>
    <div class="wow bounceIn">bounceIn</div>
    <div class="wow bounceInDown">bounceInDown</div>
    <div class="wow bounceInLeft">bounceInLeft</div>
    <div class="wow bounceInRight">bounceInRight</div>
    <div class="wow bounceInUp">bounceInUp</div>
    <div class="wow bounceOut">bounceOut</div>
    <div class="wow bounceOutDown">bounceOutDown</div>
    <div class="wow bounceOutLeft">bounceOutLeft</div>
    <div class="wow bounceOutRight">bounceOutRight</div>
    <div class="wow bounceOutUp">bounceOutUp</div>
    <div class="wow fadeIn">fadeIn</div>
    <div class="wow fadeInDown">fadeInDown</div>
    <div class="wow fadeInDownBig">fadeInDownBig</div>
    <div class="wow fadeInLeft">fadeInLeft</div>
    <div class="wow fadeInLeftBig">fadeInLeftBig</div>
    <div class="wow fadeInRight">fadeInRight</div>
    <div class="wow fadeInRightBig">fadeInRightBig</div>
    <div class="wow fadeInUp">fadeInUp</div>
    <div class="wow fadeInUpBig">fadeInUpBig</div>
    <div class="wow fadeOut">fadeOut</div>
    <div class="wow fadeOutDown">fadeOutDown</div>
    <div class="wow fadeOutDownBig">fadeOutDownBig</div>
    <div class="wow fadeOutLeft">fadeOutLeft</div>
    <div class="wow fadeOutLeftBig">fadeOutLeftBig</div>
    <div class="wow fadeOutRight">fadeOutRight</div>
    <div class="wow fadeOutRightBig">fadeOutRightBig</div>
    <div class="wow fadeOutUp">fadeOutUp</div>
    <div class="wow fadeOutUpBig">fadeOutUpBig</div>
    <div class="wow flip">flip</div>
    <div class="wow flipInX">flipInX</div>
    <div class="wow flipInY">flipInY</div>
    <div class="wow flipOutX">flipOutX</div>
    <div class="wow flipOutY">flipOutY</div>
    <div class="wow lightSpeedIn">lightSpeedIn</div>
    <div class="wow lightSpeedOut">lightSpeedOut</div>
    <div class="wow rotateIn">rotateIn</div>
    <div class="wow rotateInDownLeft">rotateInDownLeft</div>
    <div class="wow rotateInDownRight">rotateInDownRight</div>
    <div class="wow rotateInUpLeft">rotateInUpLeft</div>
    <div class="wow rotateInUpRight">rotateInUpRight</div>
    <div class="wow rotateOut">rotateOut</div>
    <div class="wow rotateOutDownLeft">rotateOutDownLeft</div>
    <div class="wow rotateOutDownRight">rotateOutDownRight</div>
    <div class="wow rotateOutUpLeft">rotateOutUpLeft</div>
    <div class="wow rotateOutUpRight">rotateOutUpRight</div>
    <div class="wow hinge">hinge</div>
    <div class="wow rollIn">rollIn</div>
    <div class="wow rollOut">rollOut</div>
    <div class="wow zoomIn">zoomIn</div>
    <div class="wow zoomInDown">zoomInDown</div>
    <div class="wow zoomInLeft">zoomInLeft</div>
    <div class="wow zoomInRight">zoomInRight</div>
    <div class="wow zoomInUp">zoomInUp</div>
    <div class="wow zoomOut">zoomOut</div>
    <div class="wow zoomOutDown">zoomOutDown</div>
    <div class="wow zoomOutLeft">zoomOutLeft</div>
    <div class="wow zoomOutRight">zoomOutRight</div>
    <div class="wow zoomOutUp">zoomOutUp</div>
  </section><!--


--><section class="wowWrap">
  <h4>data-wow-delay=".25s"</h4>

  <div data-wow-delay=".25s" class="wow bounce">bounce</div>
  <div data-wow-delay=".25s" class="wow flash">flash</div>
  <div data-wow-delay=".25s" class="wow pulse">pulse</div>
  <div data-wow-delay=".25s" class="wow rubberBand">rubberBand</div>
  <div data-wow-delay=".25s" class="wow shake">shake</div>
  <div data-wow-delay=".25s" class="wow swing">swing</div>
  <div data-wow-delay=".25s" class="wow tada">tada</div>
  <div data-wow-delay=".25s" class="wow wobble">wobble</div>

  <div data-wow-delay=".25s" class="wow flip">flip</div>
  <div data-wow-delay=".25s" class="wow flipOutX">flipOutX</div>
  <div data-wow-delay=".25s" class="wow flipOutY">flipOutY</div>
  <div data-wow-delay=".25s" class="wow rotateOut">rotateOut</div>
  <div data-wow-delay=".25s" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
  <div data-wow-delay=".25s" class="wow rotateOutDownRight">rotateOutDownRight</div>
  <div data-wow-delay=".25s" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
  <div data-wow-delay=".25s" class="wow rotateOutUpRight">rotateOutUpRight</div>
  <div data-wow-delay=".25s" class="wow bounceOut">bounceOut</div>
  <div data-wow-delay=".25s" class="wow bounceOutDown">bounceOutDown</div>
  <div data-wow-delay=".25s" class="wow bounceOutLeft">bounceOutLeft</div>
  <div data-wow-delay=".25s" class="wow bounceOutRight">bounceOutRight</div>
  <div data-wow-delay=".25s" class="wow bounceOutUp">bounceOutUp</div>
  <div data-wow-delay=".25s" class="wow fadeOut">fadeOut</div>
  <div data-wow-delay=".25s" class="wow fadeOutDown">fadeOutDown</div>
  <div data-wow-delay=".25s" class="wow fadeOutDownBig">fadeOutDownBig</div>
  <div data-wow-delay=".25s" class="wow fadeOutLeft">fadeOutLeft</div>
  <div data-wow-delay=".25s" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
  <div data-wow-delay=".25s" class="wow fadeOutRight">fadeOutRight</div>
  <div data-wow-delay=".25s" class="wow fadeOutRightBig">fadeOutRightBig</div>
  <div data-wow-delay=".25s" class="wow fadeOutUp">fadeOutUp</div>
  <div data-wow-delay=".25s" class="wow fadeOutUpBig">fadeOutUpBig</div>
  <div data-wow-delay=".25s" class="wow hinge">hinge</div>
  <div data-wow-delay=".25s" class="wow rollOut">rollOut</div>
  <div data-wow-delay=".25s" class="wow zoomOut ">zoomOut</div>
  <div data-wow-delay=".25s" class="wow zoomOutDown">zoomOutDown</div>
  <div data-wow-delay=".25s" class="wow zoomOutLeft">zoomOutLeft</div>
  <div data-wow-delay=".25s" class="wow zoomOutRight">zoomOutRight</div>
  <div data-wow-delay=".25s" class="wow zoomOutUp">zoomOutUp</div>
  </section><!--

--><section class="wowWrap">
<h4>data-wow-delay=".25s"</h4>


  <div data-wow-delay=".25s" class="wow bounceIn wHighlight">bounceIn</div>
  <div data-wow-delay=".25s" class="wow bounceInDown wHighlight">bounceInDown</div>
  <div data-wow-delay=".25s" class="wow bounceInLeft wHighlight">bounceInLeft</div>
  <div data-wow-delay=".25s" class="wow bounceInRight wHighlight">bounceInRight</div>
  <div data-wow-delay=".25s" class="wow bounceInUp wHighlight">bounceInUp</div>
  <div data-wow-delay=".25s" class="wow fadeIn wHighlight">fadeIn</div>
  <div data-wow-delay=".25s" class="wow fadeInDown wHighlight">fadeInDown</div>
  <div data-wow-delay=".25s" class="wow fadeInDownBig wHighlight">fadeInDownBig</div>
  <div data-wow-delay=".25s" class="wow fadeInLeft wHighlight">fadeInLeft</div>
  <div data-wow-delay=".25s" class="wow fadeInLeftBig wHighlight">fadeInLeftBig</div>
  <div data-wow-delay=".25s" class="wow fadeInRight wHighlight">fadeInRight</div>
  <div data-wow-delay=".25s" class="wow fadeInRightBig wHighlight">fadeInRightBig</div>
  <div data-wow-delay=".25s" class="wow fadeInUp wHighlight">fadeInUp</div>
  <div data-wow-delay=".25s" class="wow fadeInUpBig wHighlight">fadeInUpBig</div>
  <div data-wow-delay=".25s" class="wow flipInX wHighlight">flipInX</div>
  <div data-wow-delay=".25s" class="wow flipInY wHighlight">flipInY</div>
  <div data-wow-delay=".25s" class="wow lightSpeedIn wHighlight">lightSpeedIn</div>
  <div data-wow-delay=".25s" class="wow rotateIn wHighlight">rotateIn</div>
  <div data-wow-delay=".25s" class="wow rotateInDownLeft wHighlight">rotateInDownLeft</div>
  <div data-wow-delay=".25s" class="wow rotateInDownRight wHighlight">rotateInDownRight</div>
  <div data-wow-delay=".25s" class="wow rotateInUpLeft wHighlight">rotateInUpLeft</div>
  <div data-wow-delay=".25s" class="wow rotateInUpRight wHighlight">rotateInUpRight</div>
  <div data-wow-delay=".25s" class="wow rollIn wHighlight">rollIn</div>
  <div data-wow-delay=".25s" class="wow zoomIn wHighlight">zoomIn</div>
  <div data-wow-delay=".25s" class="wow zoomInDown wHighlight">zoomInDown</div>
  <div data-wow-delay=".25s" class="wow zoomInLeft wHighlight">zoomInLeft</div>
  <div data-wow-delay=".25s" class="wow zoomInRight wHighlight">zoomInRight</div>
  <div data-wow-delay=".25s" class="wow zoomInUp wHighlight">zoomInUp</div>
  </section><!-- --><section class="wowWrap">
  <h4>data-wow-duration="2s"<br> data-wow-iteration="100"</h4>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounce">bounce</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow flash">flash</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow pulse">pulse</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rubberBand">rubberBand</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow shake">shake</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow swing">swing</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow tada">tada</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow wobble">wobble</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceIn">bounceIn</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInDown">bounceInDown</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInLeft">bounceInLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInRight">bounceInRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInUp">bounceInUp</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOut">bounceOut</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutDown">bounceOutDown</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutLeft">bounceOutLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutRight">bounceOutRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutUp">bounceOutUp</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeIn">fadeIn</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInDown">fadeInDown</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInDownBig">fadeInDownBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInLeft">fadeInLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInLeftBig">fadeInLeftBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInRight">fadeInRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInRightBig">fadeInRightBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInUp">fadeInUp</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInUpBig">fadeInUpBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOut">fadeOut</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutDown">fadeOutDown</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutDownBig">fadeOutDownBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutLeft">fadeOutLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutRight">fadeOutRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutRightBig">fadeOutRightBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutUp">fadeOutUp</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutUpBig">fadeOutUpBig</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow flip">flip</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow flipInX">flipInX</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow flipInY">flipInY</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow flipOutX">flipOutX</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow flipOutY">flipOutY</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow lightSpeedIn">lightSpeedIn</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow lightSpeedOut">lightSpeedOut</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateIn">rotateIn</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInDownLeft">rotateInDownLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInDownRight">rotateInDownRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInUpLeft">rotateInUpLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInUpRight">rotateInUpRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOut">rotateOut</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutDownRight">rotateOutDownRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutUpRight">rotateOutUpRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow hinge">hinge</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rollIn">rollIn</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow rollOut">rollOut</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomIn">zoomIn</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInDown">zoomInDown</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInLeft">zoomInLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInRight">zoomInRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInUp">zoomInUp</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOut">zoomOut</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutDown">zoomOutDown</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutLeft">zoomOutLeft</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutRight">zoomOutRight</div>
  <div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutUp">zoomOutUp</div>
  </section><!--


--><!--


--><section class="wowWrap">
  <h4>data-wow-iteration="100"</h4>
  <div data-wow-iteration="100" class="wow bounce">bounce</div>
  <div data-wow-iteration="100" class="wow flash">flash</div>
  <div data-wow-iteration="100" class="wow pulse">pulse</div>
  <div data-wow-iteration="100" class="wow rubberBand">rubberBand</div>
  <div data-wow-iteration="100" class="wow shake">shake</div>
  <div data-wow-iteration="100" class="wow swing">swing</div>
  <div data-wow-iteration="100" class="wow tada">tada</div>
  <div data-wow-iteration="100" class="wow wobble">wobble</div>
  <div data-wow-iteration="100" class="wow bounceIn">bounceIn</div>
  <div data-wow-iteration="100" class="wow bounceInDown">bounceInDown</div>
  <div data-wow-iteration="100" class="wow bounceInLeft">bounceInLeft</div>
  <div data-wow-iteration="100" class="wow bounceInRight">bounceInRight</div>
  <div data-wow-iteration="100" class="wow bounceInUp">bounceInUp</div>
  <div data-wow-iteration="100" class="wow bounceOut">bounceOut</div>
  <div data-wow-iteration="100" class="wow bounceOutDown">bounceOutDown</div>
  <div data-wow-iteration="100" class="wow bounceOutLeft">bounceOutLeft</div>
  <div data-wow-iteration="100" class="wow bounceOutRight">bounceOutRight</div>
  <div data-wow-iteration="100" class="wow bounceOutUp">bounceOutUp</div>
  <div data-wow-iteration="100" class="wow fadeIn">fadeIn</div>
  <div data-wow-iteration="100" class="wow fadeInDown">fadeInDown</div>
  <div data-wow-iteration="100" class="wow fadeInDownBig">fadeInDownBig</div>
  <div data-wow-iteration="100" class="wow fadeInLeft">fadeInLeft</div>
  <div data-wow-iteration="100" class="wow fadeInLeftBig">fadeInLeftBig</div>
  <div data-wow-iteration="100" class="wow fadeInRight">fadeInRight</div>
  <div data-wow-iteration="100" class="wow fadeInRightBig">fadeInRightBig</div>
  <div data-wow-iteration="100" class="wow fadeInUp">fadeInUp</div>
  <div data-wow-iteration="100" class="wow fadeInUpBig">fadeInUpBig</div>
  <div data-wow-iteration="100" class="wow fadeOut">fadeOut</div>
  <div data-wow-iteration="100" class="wow fadeOutDown">fadeOutDown</div>
  <div data-wow-iteration="100" class="wow fadeOutDownBig">fadeOutDownBig</div>
  <div data-wow-iteration="100" class="wow fadeOutLeft">fadeOutLeft</div>
  <div data-wow-iteration="100" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
  <div data-wow-iteration="100" class="wow fadeOutRight">fadeOutRight</div>
  <div data-wow-iteration="100" class="wow fadeOutRightBig">fadeOutRightBig</div>
  <div data-wow-iteration="100" class="wow fadeOutUp">fadeOutUp</div>
  <div data-wow-iteration="100" class="wow fadeOutUpBig">fadeOutUpBig</div>
  <div data-wow-iteration="100" class="wow flip">flip</div>
  <div data-wow-iteration="100" class="wow flipInX">flipInX</div>
  <div data-wow-iteration="100" class="wow flipInY">flipInY</div>
  <div data-wow-iteration="100" class="wow flipOutX">flipOutX</div>
  <div data-wow-iteration="100" class="wow flipOutY">flipOutY</div>

  <div data-wow-iteration="100" class="wow lightSpeedIn">lightSpeedIn</div>
  <div data-wow-iteration="100" class="wow lightSpeedOut">lightSpeedOut</div>
  <div data-wow-iteration="100" class="wow rotateIn">rotateIn</div>
  <div data-wow-iteration="100" class="wow rotateInDownLeft">rotateInDownLeft</div>
  <div data-wow-iteration="100" class="wow rotateInDownRight">rotateInDownRight</div>
  <div data-wow-iteration="100" class="wow rotateInUpLeft">rotateInUpLeft</div>
  <div data-wow-iteration="100" class="wow rotateInUpRight">rotateInUpRight</div>
  <div data-wow-iteration="100" class="wow rotateOut">rotateOut</div>
  <div data-wow-iteration="100" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
  <div data-wow-iteration="100" class="wow rotateOutDownRight">rotateOutDownRight</div>
  <div data-wow-iteration="100" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
  <div data-wow-iteration="100" class="wow rotateOutUpRight">rotateOutUpRight</div>
  <div data-wow-iteration="100" class="wow hinge">hinge</div>
  <div data-wow-iteration="100" class="wow rollIn">rollIn</div>
  <div data-wow-iteration="100" class="wow rollOut">rollOut</div>
  <div data-wow-iteration="100" class="wow zoomIn">zoomIn</div>
  <div data-wow-iteration="100" class="wow zoomInDown">zoomInDown</div>
  <div data-wow-iteration="100" class="wow zoomInLeft">zoomInLeft</div>
  <div data-wow-iteration="100" class="wow zoomInRight">zoomInRight</div>
  <div data-wow-iteration="100" class="wow zoomInUp">zoomInUp</div>
  <div data-wow-iteration="100" class="wow zoomOut">zoomOut</div>
  <div data-wow-iteration="100" class="wow zoomOutDown">zoomOutDown</div>
  <div data-wow-iteration="100" class="wow zoomOutLeft">zoomOutLeft</div>
  <div data-wow-iteration="100" class="wow zoomOutRight">zoomOutRight</div>
  <div data-wow-iteration="100" class="wow zoomOutUp">zoomOutUp</div>
  </section><!--

--><section class="wowWrap">
  <h4>wow-data-offset="200"</h4>
  <div data-wow-offset="200" class="wow bounce">bounce</div>
  <div data-wow-offset="200" class="wow flash">flash</div>
  <div data-wow-offset="200" class="wow pulse">pulse</div>
  <div data-wow-offset="200" class="wow rubberBand">rubberBand</div>
  <div data-wow-offset="200" class="wow shake">shake</div>
  <div data-wow-offset="200" class="wow swing">swing</div>
  <div data-wow-offset="200" class="wow tada">tada</div>
  <div data-wow-offset="200" class="wow wobble">wobble</div>
  <div data-wow-offset="200" class="wow bounceIn">bounceIn</div>
  <div data-wow-offset="200" class="wow bounceInDown">bounceInDown</div>
  <div data-wow-offset="200" class="wow bounceInLeft">bounceInLeft</div>
  <div data-wow-offset="200" class="wow bounceInRight">bounceInRight</div>
  <div data-wow-offset="200" class="wow bounceInUp">bounceInUp</div>
  <div data-wow-offset="200" class="wow bounceOut">bounceOut</div>
  <div data-wow-offset="200" class="wow bounceOutDown">bounceOutDown</div>
  <div data-wow-offset="200" class="wow bounceOutLeft">bounceOutLeft</div>
  <div data-wow-offset="200" class="wow bounceOutRight">bounceOutRight</div>
  <div data-wow-offset="200" class="wow bounceOutUp">bounceOutUp</div>
  <div data-wow-offset="200" class="wow fadeIn">fadeIn</div>
  <div data-wow-offset="200" class="wow fadeInDown">fadeInDown</div>
  <div data-wow-offset="200" class="wow fadeInDownBig">fadeInDownBig</div>
  <div data-wow-offset="200" class="wow fadeInLeft">fadeInLeft</div>
  <div data-wow-offset="200" class="wow fadeInLeftBig">fadeInLeftBig</div>
  <div data-wow-offset="200" class="wow fadeInRight">fadeInRight</div>
  <div data-wow-offset="200" class="wow fadeInRightBig">fadeInRightBig</div>
  <div data-wow-offset="200" class="wow fadeInUp">fadeInUp</div>
  <div data-wow-offset="200" class="wow fadeInUpBig">fadeInUpBig</div>
  <div data-wow-offset="200" class="wow fadeOut">fadeOut</div>
  <div data-wow-offset="200" class="wow fadeOutDown">fadeOutDown</div>
  <div data-wow-offset="200" class="wow fadeOutDownBig">fadeOutDownBig</div>
  <div data-wow-offset="200" class="wow fadeOutLeft">fadeOutLeft</div>
  <div data-wow-offset="200" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
  <div data-wow-offset="200" class="wow fadeOutRight">fadeOutRight</div>
  <div data-wow-offset="200" class="wow fadeOutRightBig">fadeOutRightBig</div>
  <div data-wow-offset="200" class="wow fadeOutUp">fadeOutUp</div>
  <div data-wow-offset="200" class="wow fadeOutUpBig">fadeOutUpBig</div>
  <div data-wow-offset="200" class="wow flip">flip</div>
  <div data-wow-offset="200" class="wow flipInX">flipInX</div>
  <div data-wow-offset="200" class="wow flipInY">flipInY</div>
  <div data-wow-offset="200" class="wow flipOutX">flipOutX</div>
  <div data-wow-offset="200" class="wow flipOutY">flipOutY</div>
  <div data-wow-offset="200" class="wow lightSpeedIn">lightSpeedIn</div>
  <div data-wow-offset="200" class="wow lightSpeedOut">lightSpeedOut</div>
  <div data-wow-offset="200" class="wow rotateIn">rotateIn</div>
  <div data-wow-offset="200" class="wow rotateInDownLeft">rotateInDownLeft</div>
  <div data-wow-offset="200" class="wow rotateInDownRight">rotateInDownRight</div>
  <div data-wow-offset="200" class="wow rotateInUpLeft">rotateInUpLeft</div>
  <div data-wow-offset="200" class="wow rotateInUpRight">rotateInUpRight</div>
  <div data-wow-offset="200" class="wow rotateOut">rotateOut</div>
  <div data-wow-offset="200" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
  <div data-wow-offset="200" class="wow rotateOutDownRight">rotateOutDownRight</div>
  <div data-wow-offset="200" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
  <div data-wow-offset="200" class="wow rotateOutUpRight">rotateOutUpRight</div>
  <div data-wow-offset="200" class="wow hinge">hinge</div>
  <div data-wow-offset="200" class="wow rollIn">rollIn</div>
  <div data-wow-offset="200" class="wow rollOut">rollOut</div>
  <div data-wow-offset="200" class="wow zoomIn">zoomIn</div>
  <div data-wow-offset="200" class="wow zoomInDown">zoomInDown</div>
  <div data-wow-offset="200" class="wow zoomInLeft">zoomInLeft</div>
  <div data-wow-offset="200" class="wow zoomInRight">zoomInRight</div>
  <div data-wow-offset="200" class="wow zoomInUp">zoomInUp</div>
  <div data-wow-offset="200" class="wow zoomOut">zoomOut</div>
  <div data-wow-offset="200" class="wow zoomOutDown">zoomOutDown</div>
  <div data-wow-offset="200" class="wow zoomOutLeft">zoomOutLeft</div>
  <div data-wow-offset="200" class="wow zoomOutRight">zoomOutRight</div>
  <div data-wow-offset="200" class="wow zoomOutUp">zoomOutUp</div>
  </section><!--
--></main>




<!--
ALL CHOICES
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


-->

  1. Create a subfolder in your child theme called css
  2. Place animate.min.css there.
  3. Create a subfolder in your child theme called js
  4. Place wow.min.js there.
  5. Add following lines to the functions.php file on wp


//* Enqueue Animate.CSS and WOW.js
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {
wp_enqueue_style( ‘animate’, get_stylesheet_directory_uri() . ‘/css/animate.min.css’ );
wp_enqueue_script( ‘wow’, get_stylesheet_directory_uri() . ‘/js/wow.min.js’, array(), ”, true );
}
//* Enqueue script to activate WOW.js
add_action(‘wp_enqueue_scripts’, ‘sk_wow_init_in_footer’);
function sk_wow_init_in_footer() {
add_action( ‘print_footer_scripts’, ‘wow_init’ );
}
//* Add JavaScript before </body>
function wow_init() { ?>
<script type=”text/javascript”>
new WOW().init();
</script>
<?php }

By at
Labels: , ,

Tuesday, 3 October 2017

Refer : SSL HTTPS

https://www.sslforfree.com/
By at
Labels: ,

ANIMATION : FLY IN animation

DEMO

Copy This CSS Code



/*------------------------------------------------*/
/*--------[GQ - CUSTOM FLY-IN ANIMATIONS]---------*/
/*------------------------------------------------*/

/* hide overflow */
    .gq_s_slider1 {
        overflow:hidden;}

/* font */
    .gq_s_slider1 p {
        color: #2aa6c2;
        font-size: 46px;
        line-height: 46px;
        background: #ffffff;
        padding: 7px 25px 14px;
        display: inline-block;
        display: -webkit-inline-box;
        margin-bottom: 28px;
        border-radius: 4px;}

/* offset padding */
    .gq_text_slidein_r1 {padding-left: 20%;}
.gq_text_slidein_r2 {padding-left: 40%;}
.gq_text_slidein_r3 {padding-left: 60%;}
.gq_text_slidein_r4 {padding-left: 80%;}

 
    .gq_text_slidein_l1 {padding-right: 20%;}
    .gq_text_slidein_l2 {padding-right: 40%;}
.gq_text_slidein_l3 {padding-right: 60%;}
.gq_text_slidein_l4 {padding-right: 80%;}

/*code

gq-animated gq-waypoint gq_text_slidein_l2 gq_animation_left1
gq-animated gq-waypoint gq_text_slidein_r2 gq_animation_right1

*/

/* right */

.gq_animation_right1.gq-animated {
        -webkit-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeRight 1.0 1 cubic-bezier(0.77, 0, 0.175, 1);}

.gq_animation_right2.gq-animated {
        -webkit-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);}

 .gq_animation_right3.gq-animated {
        -webkit-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeRight 3 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);}

.gq_animation_right4.gq-animated {
        -webkit-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeRight 3 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);}

/* left*/
 

    .gq_animation_left1.gq-animated {
        -webkit-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}

 

    .gq_animation_left2.gq-animated {
        -webkit-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}

  .gq_animation_left3.gq-animated {
        -webkit-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}

  .gq_animation_left4.gq-animated {
        -webkit-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
        animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}

 

/* keyframe animations */
    @-webkit-keyframes GQfadeLeft {
        0% {opacity: 0; -webkit-transform: translateX(-100%);}
        100% {opacity: 1!important; -webkit-transform: translateX(0);}}
    @-moz-keyframes GQfadeLeft {
        0% {opacity: 0;-moz-transform: translateX(-100%);}
        100% {opacity: 1!important; -moz-transform: translateX(0);}}
    @-o-keyframes GQfadeLeft {
        0% {opacity: 0; -o-transform: translateX(-100%);}
        100% {opacity: 1!important; -o-transform: translateX(0);}}
    @keyframes GQfadeLeft {
        0% {opacity: 0; transform: translateX(-100%);}
        100% {opacity: 1!important; transform: translateX(0);}}

    @-webkit-keyframes GQfadeRight {
        0% {opacity: 0; -webkit-transform: translateX(100%);}
        100% {opacity: 1!important; -webkit-transform: translateX(0);}}
    @-moz-keyframes GQfadeRight {
        0% {opacity: 0; -mox-transform: translateX(100%);}
        100% {opacity: 1!important; -moz-transform: translateX(0);}}
    @-o-keyframes GQfadeRight {
        0% {opacity: 0; -0-transform: translateX(100%);}
        100% {opacity: 1!important; -o-transform: translateX(0);}}
    @keyframes GQfadeRight {
        0% {opacity: 0; transform: translateX(100%);}
        100% {opacity: 1!important; transform: translateX(0);}}


USE THIS CSS CLASSES


 FROM LEFT

 gq-animated gq-waypoint gq_text_slidein_l1 gq_animation_left1
gq-animated gq-waypoint gq_text_slidein_l2 gq_animation_left2
gq-animated gq-waypoint gq_text_slidein_l3 gq_animation_left3
gq-animated gq-waypoint gq_text_slidein_l4 gq_animation_left4

 FROM RIGHT

 gq-animated gq-waypoint gq_text_slidein_r1 gq_animation_right1
gq-animated gq-waypoint gq_text_slidein_r2 gq_animation_right2
gq-animated gq-waypoint gq_text_slidein_r3 gq_animation_right3
gq-animated gq-waypoint gq_text_slidein_r4 gq_animation_right4

COPY THIS SCRIPT PUT IN BODY

<script>
(function($) {
    var $animation_elements = $('.gq-waypoint'),
        $window = $(window);
   
    function check_if_in_view() {
        var window_height = $window.height(),
            window_top_position = $window.scrollTop(),
            window_bottom_position = (window_top_position + window_height);
   
        $animation_elements.each(function() {
            var $element = $(this),
                element_height = $element.outerHeight(),
                element_top_position = $element.offset().top,
                element_bottom_position = (element_top_position + element_height);
   
            //check to see if this element is within viewport
            if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                $element.addClass('gq-animated');
            } else {
                $element.removeClass('gq-animated');
            }
        });
    }
   
    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>
By at
Labels: , ,

Sunday, 1 October 2017

KIV : WOW FORM

Wow Forms – create any form with custom style
By at
Labels:

WP PLUGIN - ANIMATION & HOVER


  1. Hover Effects – easily create any hover effect
  2. CSS hero Animator
By at
Labels: , ,
Subscribe to: Posts (Atom)

email mailto: pretext

 <a href="mailto:designoutsourced.com+info@gmail.com?subject=Maklumat%20lanjut%20pakej&body=Hai,%20saya%20berminat%20tahu%20lebi...

  • Vue CLI V2 And V3
    Looking at  vue-cli repository  I see two different ways of scaffolding vue projects. The  v3  (beta) version, installed as  npm install ...
  • 2) Angular : 3 Must Component file
    component need at least this 3 component file 1. customers.component.ts import { Component , OnInit } from '@angular/core...