News Ticker Marquee VER 1 Float

Berita Ticker jQuery Marquee Ver 1 (Jam, Berita Teks Berjalan, Melayang Di Bawah) (Float) - Dengan Width Responsif

by Maharani Collection

HTML

<script src="https://cdn.rawgit.com/songketwarnetma/maharani-site-ma/master/jquery.marquee.min.js"></script>
<div class="newstickertb">
  <div class="jam">
    <script src='https://cdn.rawgit.com/songketwarnetma/maharani-site-ma/master/waktujammenit.js'></script>
  </div>
  <div class="marqueenews">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

CSS

.newstickertb .marqueenews {
  overflow: hidden;
  width: 95%;
  float: right
}

.newstickertb {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 150000;
  background-color: #DDD;
  font-family: Sans-serif
}

.newstickertb .jam {
  float: left;
  background-color: #111;
  color: #EEE
}

@media only screen and (max-width:700px) {
  .newstickertb .marqueenews {
    width: 90%
  }
}

@media only screen and (max-width:400px) {
  .newstickertb .marqueenews {
    width: 85%
  }
}

@media only screen and (max-width:300px) {
  .newstickertb .marqueenews {
    width: 80%
  }
}

JavaScript

//<![CDATA[
$('.marqueenews').marquee({
  duration: 9000,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true,
  gap: 10,
  pauseOnHover: true
});
//]]>