A list with animated reveals

about.markdown

A list with animated reveals

A Pen by Oltika on CodePen.

License.

index.html

<h1>Animated Steps</h1>
<div class="steps">
  <ol>
    <li>
      <h3 class="heading">Heading for list item 1</h3>
      <p>Quisque tristique id sapien vitae sagittis. Nam vel consectetur magna. Suspendisse quis blandit nisl. Praesent mattis sapien id enim pharetra, vel bibendum nisi fringilla. Mauris ultricies, felis eu dignissim ornare, lorem urna accumsan orci, quis scelerisque erat turpis at sapien. Nullam luctus sem sit amet mi ultrices congue.</p>        
      <p>Vestibulum euismod urna ac posuere vestibulum. Suspendisse potenti. Quisque lacinia lacus ultricies interdum gravida. Sed ultrices rutrum magna ac consequat.</p>
    </li>
    <li>
      <h3 class="heading">Heading for list item 2</h3>
       <p>Quisque tristique id sapien vitae sagittis. Nam vel consectetur magna. Suspendisse quis blandit nisl. Praesent mattis sapien id enim pharetra, vel bibendum nisi fringilla. Mauris ultricies, felis eu dignissim ornare, lorem urna accumsan orci, quis scelerisque erat turpis at sapien. Nullam luctus sem sit amet mi ultrices congue.</p>        
      <p>Vestibulum euismod urna ac posuere vestibulum. Suspendisse potenti. Quisque lacinia lacus ultricies interdum gravida. Sed ultrices rutrum magna ac consequat.</p>
    </li>
    <li>
      <h3 class="heading">Heading for list item 3</h3>
       <p>Quisque tristique id sapien vitae sagittis. Nam vel consectetur magna. Suspendisse quis blandit nisl. Praesent mattis sapien id enim pharetra, vel bibendum nisi fringilla. Mauris ultricies, felis eu dignissim ornare, lorem urna accumsan orci, quis scelerisque erat turpis at sapien. Nullam luctus sem sit amet mi ultrices congue.</p>        
      <p>Vestibulum euismod urna ac posuere vestibulum. Suspendisse potenti. Quisque lacinia lacus ultricies interdum gravida. Sed ultrices rutrum magna ac consequat.</p>
    </li>
    <li>
      <h3 class="heading">Heading for list item 4</h3>
       <p>Quisque tristique id sapien vitae sagittis. Nam vel consectetur magna. Suspendisse quis blandit nisl. Praesent mattis sapien id enim pharetra, vel bibendum nisi fringilla. Mauris ultricies, felis eu dignissim ornare, lorem urna accumsan orci, quis scelerisque erat turpis at sapien. Nullam luctus sem sit amet mi ultrices congue.</p>        
      <p>Vestibulum euismod urna ac posuere vestibulum. Suspendisse potenti. Quisque lacinia lacus ultricies interdum gravida. Sed ultrices rutrum magna ac consequat.</p>
    </li>
    <li>
      <h3 class="heading">Heading for list item 5</h3>
       <p>Quisque tristique id sapien vitae sagittis. Nam vel consectetur magna. Suspendisse quis blandit nisl. Praesent mattis sapien id enim pharetra, vel bibendum nisi fringilla. Mauris ultricies, felis eu dignissim ornare, lorem urna accumsan orci, quis scelerisque erat turpis at sapien. Nullam luctus sem sit amet mi ultrices congue.</p>        
      <p>Vestibulum euismod urna ac posuere vestibulum. Suspendisse potenti. Quisque lacinia lacus ultricies interdum gravida. Sed ultrices rutrum magna ac consequat.</p>
    </li>
    <li>
      <h3 class="heading">Heading for list item 6</h3>
       <p>Quisque tristique id sapien vitae sagittis. Nam vel consectetur magna. Suspendisse quis blandit nisl. Praesent mattis sapien id enim pharetra, vel bibendum nisi fringilla. Mauris ultricies, felis eu dignissim ornare, lorem urna accumsan orci, quis scelerisque erat turpis at sapien. Nullam luctus sem sit amet mi ultrices congue.</p>        
      <p>Vestibulum euismod urna ac posuere vestibulum. Suspendisse potenti. Quisque lacinia lacus ultricies interdum gravida. Sed ultrices rutrum magna ac consequat.</p>
    </li>
  </ol>
</div>

script.js

$("li").waypoint(function(){
		$(this).toggleClass('seen');
	}, { 
		offset: 'bottom-in-view'
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>

style.scss

@import "bourbon";

$yellow: #fec424;
$blue: #13171b;
$circle-width: 50px;

@include keyframes(bounce) {
  50% {
    @include transform(translateY(10px));
  }
}

/* -------------------------------- Reset */

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700|Lato:400,700);

body {
  background: $blue;
  color: $blue;
  font-family: 'Ubuntu', sans-serif;
  h1 {
    text-align: center;
    margin: 20px 20px 0px 20px;
    color: white;
    font-size: 30px;
    text-transform: uppercase;
  }
}

/* -------------------------------- Step by step */

.steps {
  padding: 20px;
	ol {
    counter-reset: li; // Initiate a counter for use in pseudo elemntes
    margin-left: $circle-width + 15px;
    position: relative; // For positionig dots
    li {
      background: white;
      margin: 1em auto;
      padding: 1em;
      position: relative; // For positioning arrow
      opacity: 0;
      @include transform(translateX(-100px));
      @include transition(all 1s);
      &:before {
        content: counter(li); // Add list item number to element for styling
        counter-increment: li; // Increment counter
        display: inline-block;
        position: absolute;
        z-index: 2;
        top: 0;
        left: -$circle-width - 5px;
        background-color: $yellow;
        font-size: $circle-width / 2 + 5;
        border-radius: $circle-width;
        line-height: $circle-width / 2;
        padding: 10px;
        height: $circle-width / 2;
        width: $circle-width / 2;
        text-align: center;
        overflow: hidden;
        font-weight: bold;
        color: $blue;
        opacity: 0;
        @include transform(translateX(100px));
        @include transition(all 1s 1s);
      }
      &:after {
        content: "";
        position: absolute;
        top: 18px;
        right: 100%;
        @include triangle(10px, white, 'left');
      }
      .heading {
        color: $yellow;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        border-bottom: solid 1px $yellow;
        font-size: 24px;
        font-size: normal;
      }
      p {
        font-size: 18px;
        margin-bottom: 1em;
        line-height: 1.5em;
      }
      &.seen { // Waypoint animation goodness
        opacity: 1;
        @include transform(translateX(0px));
        &:before {
          opacity: 1;
          @include transform(translateX(0));
        }
      }
    }
  }
  
/* -------------------------------- Codepen presentation only */
  
  &:before,
  &:after {
    position: fixed;
    left: 50%;
    z-index: 3;
    text-align: center;
    display: block;
    color: white;
    @include animation(bounce infinite 1s 1s);
  }
  &:before {
    content: "Scroll";
    font-size: 10px;
    text-transform: uppercase;
    bottom: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px; 
    margin-left: -30px;
    background: rgba(black, 0.2);
    text-shadow: 0 0 5px rgba(black, 0.5);
  }
  &:after {
    content: "";
    bottom: 40px;
    margin-left: -5px;
    @include triangle(10px, white, 'down');
  }
}