waypoint dialogue boxes

plugin: http://imakewebthings.com/waypoints/guides/getting-started/

HTML:

<p id="waypoint-1" class="waypoint">
 Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque ut neque. Suspendisse feugiat. In hac habitasse platea dictumst. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.
 </p>

<p id="waypoint-2" class="waypoint">
 Phasellus gravida semper nisi. Phasellus gravida semper nisi. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Praesent turpis. Ut non enim eleifend felis pretium feugiat.
 </p>

<p>
 Nulla porta dolor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Fusce a quam. Ut non enim eleifend felis pretium feugiat.
 </p>

<p>
 Nulla porta dolor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Fusce a quam. Ut non enim eleifend felis pretium feugiat.
 </p>


HAMLET: To thine own self be true, and it must follow, as the night the day.

<br>

SHAKESPEARE: Brevity is the soul of wit.

SCSS:

.dialogue-box{
 @include clearfix;
 max-width:750px;
 }

.dialogue-right, .dialogue-left{
 &:hover{
 cursor:default;
 }
 }

.dialogue-right{
 display:inline-block;
 float:right;
 margin-right:1rem;
 background-color:rgb(255, 194, 0);
 padding:.2em;
 margin-bottom:.5em;
 }

.dialogue-left{
 display:inline-block;
 float:left;
 margin-left:3em;
 background-color:rgb(255, 194, 0);
 padding:.2em;
 margin-bottom:1rem;
 }

JS:

var waypoint = new Waypoint({
 element: document.getElementById('waypoint-1'),
 handler: function(direction) {
 console.log('Basic waypoint triggered');

revealOne();
 }
 });

var waypoint = new Waypoint({
 element: document.getElementById('waypoint-2'),
 handler: function(direction) {
 console.log('Basic waypoint triggered');

revealTwo();

}
 });
 function revealOne(){
 $('#show-one').show({
 duration: 800,
 easing:"swing"
 });
 }

function revealTwo(){
 $('#show-two').show({
 duration: 500,
 easing:"swing"
 });
 }
waypoint dialogue boxes