Experiment

Trying out wow.js. What is a experiment How do you make a experiment? This script and codes were developed by Todd Moy on 18 December 2021, Saturday.

How do I make an experiment?
  1. Experiment Previews
  2. Experiment HTML Codes
  3. Experiment CSS Codes
  4. Experiment JS Codes
Experiment Previews

Experiment HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Experiment</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrapper">
  <h1>Hello.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur ratione inventore ipsa assumenda nostrum laudantium et similique libero blanditiis, eveniet ab, cumque culpa qui eaque, nemo. Asperiores, magnam, doloribus.</p>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
  <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
  <p>Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
  <img src="//placehold.it/500x230" class="wow fadeOut" />
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Experiment CSS Codes

* {
  box-sizing: border-box;
}

body {
  background-color: #5598e2;
}

.wrapper {
  width: 500px;
  margin: 0 auto;
  background-color: white;
  padding: 2rem;
}
.wrapper img {
  width: 100%;
}

Experiment JS Codes

// uses wow : cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js

new WOW().init();
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.