<!-- First section -->
<header>
  <h1 class="animated bounceInDown">Animate.css</h1>
  <h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
  <span class="animated bounce"></span>
</header>

<!-- Scroll animations section -->
<h2 class="new-section">Scroll Animations</h2>
<div class="scroll-animations">
  <div class="animated">
    <span>&#9742;</span>
    <h3>Number One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>
  </div>
  <div class="animated">
    <span>&#9835;</span>
    <h3>Number Two</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>
  </div>
  <div class="animated">
    <span>&#9730;</span>
    <h3>Number Three</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis lacinia est. Nulla malesuada massa orci, vitae placerat lorem pharetra a.</p>
  </div>
</div>

<!-- Click animations section -->
<div class="click-animations">
  <h2 class="new-section">Click Animations</h2>
  <form>
    <input type="text" placeholder="Name" id="name" />
    <input type="text" placeholder="Email" id="email" />
    <textarea rows="7" placeholder="Message" id="message"></textarea>
  </form>
  <button>Send</button>
</div>

/* General/reset styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  color: #333;
}

.new-section {
  padding-top: 50px;
  text-align: center;
  font-size: 4em;
  font-weight: 100;
}

/* Header styles */

header {
  position: relative;
  text-align: center;
  height: 100vh;
  background: linear-gradient(to right, #69bcf4, #30cc8b);
  color: #fff;
}

header h1 {
  padding-top: 100px;
  padding-top: -webkit-calc(50vh - 113px);
  padding-top: expression(50vh - 113px);
  padding-top: -moz-calc(50vh - 113px);
  padding-top: -o-calc(50vh - 113px);
  padding-top: calc(50vh - 113px);
  font-size: 7em;
  font-weight: 100;
}

header h2 {
  font-size: 2em;
}

header span.animated {
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  bottom: 50px;
  height: 4px;
  width: 4px;
  border-radius: 2px;
  background: #fff;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

header span::before,
header span::after {
  position: absolute;
  top: -23px;
  content: "";
  height: 30px;
  width: 4px;
  border-radius: 2px;
  background: #fff;
}

header span::before {
  left: -10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
  transform:         rotate(-45deg);
}

header span::after {
  right: -10px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  transform:         rotate(45deg);
}

/* Scroll animations styles */

.scroll-animations {
  display: flex;
}

.scroll-animations div {
  flex-grow: 1;
  padding: 30px;
  text-align: center;
  opacity: 0;
  color: #333;
}

.scroll-animations div span {
  font-size: 4em;
  color: #5AA9E0;
}

.scroll-animations div h3 {
  font-size: 1.9em;
  font-weight: 400;
  margin-bottom: 10px;
}

/* Click animations styles */

.click-animations {
  margin-top: 35px;
  padding-bottom: 20px;
  background: #f6f8fa;
}

.click-animations input {
  display: block;
  margin: 20px auto;
  padding: 10px;
  height: 50px;
  width: 50%;
  font-size: 30px;
  outline: none;
  border: 2px solid transparent;
  transition: 0.3s;
}

.click-animations textarea {
  display: block;
  margin: 20px auto;
  padding: 10px;
  width: 50%;
  font-size: 30px;
  outline: none;
  border: 2px solid transparent;
  resize: none;
  transition: 0.3s;
}

.click-animations input:focus,
.click-animations textarea:focus {
  border-color: #30cc8b;
}

.click-animations button {
  display: block;
  margin: 20px auto;
  padding: 10px;
  width: 50%;
  font-size: 30px;
  border: none;
  outline: none;
  background: #30cc8b;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

.click-animations button:active {
  transform: scale(0.95);
}

.form-error {
  border-color: #F46036 !important;
}

/* Media queries */

@media (max-width: 759px) {
  header h1 {
    font-size: 5em;
  }
  
  .new-section {
    font-size: 3em;
  }
  
  .scroll-animations {
    display: block;
  }
  
  .scroll-animations div {
    padding: 20px 80px;
  }
  
  .click-animations input,
  .click-animations textarea,
  .click-animations button {
    width: 80%;
  }
}

@media (max-width: 475px) {
  .new-section {
    font-size: 2.5em;
  } 
  
  header h1 {
    font-size: 3.2em;
  }
  
  header h2,
  .funky-animations h3 {
    font-size: 1.5em;
  }
  
}
// Scroll function courtesy of Scott Dowding; http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling

$(document).ready(function() {
  // Check if element is scrolled into view
  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return elemBottom <= docViewBottom && elemTop >= docViewTop;
  }
  // If element is scrolled into view, fade it in
  $(window).scroll(function() {
    $(".scroll-animations .animated").each(function() {
      if (isScrolledIntoView(this) === true) {
        $(this).addClass("fadeInLeft");
      }
    });
  });

  // Click Animations
  $("button").on("click", function() {
    /*
    If any input is empty make it's border red and shake it. After the animation is complete, remove the shake and animated classes so that the animation can repeat.
    */

    // Check name input
    if ($("#name").val() === "") {
      $("#name")
        .addClass("form-error animated shake")
        .one(
          "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
          function() {
            $(this).removeClass("animated shake");
          }
        );
    } else {
      $("#name").removeClass("form-error");
    }

    // Check email input
    if ($("#email").val() === "") {
      $("#email")
        .addClass("form-error animated shake")
        .one(
          "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
          function() {
            $(this).removeClass("animated shake");
          }
        );
    } else {
      $("#email").removeClass("form-error");
    }

    // Check message textarea
    if ($("#message").val() === "") {
      $("#message")
        .addClass("form-error animated shake")
        .one(
          "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
          function() {
            $(this).removeClass("animated shake");
          }
        );
    } else {
      $("#message").removeClass("form-error");
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js