Trip.js example

Change class name on click in jQuery

by André Masson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trip.js/3.3.3/trip.min.js"></script>
<h1>
  Trip.js tests
</h1>

<button id="btnToggler">Toggle DIV2 visibility</button>
<button id="btnStart">Start Trip.js</button>

<div class="trip-elements">
  <div class="your-own-trips" data-trip-index="1" data-trip-content="hi1" data-trip-position="n">hi</div>
  <div id="div2" class="your-own-trips" data-trip-index="2" data-trip-content="hi2" data-trip-position="n">I am Trip.js</div>
  <div class="your-own-trips" data-trip-index="3" data-trip-content="hi3" data-trip-position="s">I am 3rd trip!!!</div>
</div>

CSS

.hide-me {
  display: none;
}

.your-own-trips {
  background-color: grey;
  width: 200px;
  margin-bottom: 10px;
}

.trip-elements {
  margin-top: 60px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3)
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05)
  }
  70% {
    -webkit-transform: scale(0.9)
  }
  100% {
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
  }
  60% {
    opacity: 1;
   ...

JavaScript

var options = {
  delay: -1,
  showNavigation: true,
  showHeader: true
};
var trip = new Trip('.your-own-trips', options);

$("#btnToggler").click(function() {
  $('#div2').toggle();
});
$("#btnStart").click(function() {
  trip.start();
});