News Ticker Marquee VER 3 Float

Berita Ticker jQuery Marquee Ver 3 (Logo, Berita Teks Berjalan, Melayang Di Atas, Gulir Dibawah jQuery tunjukkan, Sosial Media) (Float) - Dengan Width Responsif

by Maharani Collection

HTML

<script src="https://cdn.rawgit.com/songketwarnetma/maharani-site-ma/master/jquery.marquee.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="newstickertb">
  <div class="logo">
    <img src="https://4.bp.blogspot.com/-0pZQZAVuno0/V4t-r2dtQTI/AAAAAAAABsk/glfIXKLeV3Aav0ARtJTKOcssTQ8eSWxVgCLcB/s1600/fixed-google-logo-font.png" style="height: 20px" />
  </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>
  <ul>
    <li class="more"><a href="#"><i class="fa fa-plus"></i></a></li>
    <li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="googleplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
  </ul>
</div>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

CSS

.newstickertb .marqueenews {
  overflow: hidden;
  width: 80%;
  float: left
}

.newstickertb {
  position: fixed;
  top: -200px;
  left: 0;
  width: 100%;
  z-index: 150000;
  background-color: #4285F4;
  color: #FFF;
  font-family: Sans-serif;
  transition: all .4s ease-out
}

.newstickertb .logo {
  float: left;
  background-color: #FFF
}

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

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

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

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

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

@media only screen and (max-width:500px) {
  .newstickertb .marqueenews {
    width: 75%
  }
  .newstickertb .facebook {
    display: none
  }
  .newstickertb .twitter {
    display: none
  }
  .newstickertb .googleplus {
    display: none
  }
  .newstickertb .instagram {
    display: none
  }
}

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

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

.newstickertb ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  float: right
}

.newstickertb ul li {
  float: right;
  border-right: 1px solid #bbb;
  transition: all .4s ease-out
}

.newstickertb ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 2px 7px;
  text-decoration: none
}

.newstickertb .facebook {
  background-color: #3B5998
}

.newstickertb .twitter {
  background-color: #55ACEE
}

.newstickertb .googleplus {
  background-color: #EA4335
}

.newstickertb .instagram {
  background-color: #3F729B
}

.newstickertb .more {
  background-color: #FBBC05
}

.newstickertb...

JavaScript

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

//<![CDATA[
$(window).scroll(function() {
  $(".newstickertb").css($(this).scrollTop() > 100 ? {
    top: "0px"
  } : {
    top: "-200px"
  })
});
//]]>