WbwKOo

index.html

<div class="feed">
  
  
    <div class="item last">
    <div class="back"></div>
    <div class="overlay">
      <div class="title">
        Ander nieuwsbericht
      </div>
      <div class="short">
        Dat maakt het voor pluimveebedrijven in het waterrijke Zeeland, West-Brabant, Zuid-Holland en Noord-Holland weer mogelijk om te handelen met de rest van het land. Vanaf vannacht mogen dus weer eendagskuikens en broedeieren door het hele land worden vervoerd.
      </div>
    </div>
  </div>

    <div class="item first">
    <div class="back"></div>
    <div class="overlay">
      <div class="title">
        Titel van het nieuwsbericht.
      </div>
      <div class="short">
        Uitkeringsgerechtigden vinden dat in strijd met het sociale zekerheidsverdrag tussen Nederland en Marokko, waarin uitkeringen worden beschermd. Omdat Marokko niet wil meewerken aan het verlagen van de uitkeringen heeft het Nederlandse kabinet inmiddels een wetsvoorstel ingediend om dat verdrag met Marokko op te zeggen.
      </div>
    </div>
  </div>
  
</div>

<div class="top-parts">
  <div class="logo">
    <img src="http://i.imgur.com/jrP7qfE.png" alt="ITPH" />
  </div>
  <div class="logo npo">
    <img src="http://i.imgur.com/WSyNzcM.png" alt="NPO Nieuws" />
  </div>

  <div class="progress">
    <div class="bar"></div>
  </div>
</div>

script.js

$('.item.last').css({
  right: -$( document ).width(),
  left: $( document ).width()
});

$('.item.last .overlay div').css({
  opacity: 0
});

nextItem();

function reset() {
  $('.progress .bar').css({
    width: '0%'
  });
}

function nextItem() {

  $('.progress .bar').animate({
    width: '100%'
  },2000, 'linear', function() {
    $('.item.first .overlay div').animate({
      opacity: 0
    }, 500, function() {

      $('.item.first').animate({
        right: $( document ).width() /2,
        left: -$( document ).width() /2
      }, 800);

      $('.item.last').animate({
        right: 0,
        left: 0
      }, 800 ,function() {
        $('.item.last .overlay div').animate({
          opacity: 1
        }, 500, function(){
          reset();
          nextItem();
        });
      });

    });

  });

}

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto);

.feed {
  position: absolute;
  overflow: hidden;
  top: 0; right: 0; bottom: 0; left: 0;
}

.top-parts {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
}

.item {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.item.last {
  z-index: 100;
}

.back {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url('http://content.nos.nl/data/image/xxxl/2014/12/14/733674.jpg') center;
  background-size: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); /* W3C */
  padding: 80px 40px 40px 40px;
  
}

.title {
  color: white;
  font-family: 'Roboto Slab';
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 3em;
  margin-bottom: 20px;
}

.short {
  color: white;
  font-family: 'Roboto';
  font-size: 1.3em;
  letter-spacing: 0.3px;
}

.progress {
  position: absolute;
  bottom: 15px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: rgba(255,255,255,0.1);
}

.progress .bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255,255,255,0.3);
}

.logo img {
  position: absolute;
  padding: 40px;
  height: 70px;
  right: 0;
}

.logo.npo img {
  left: 0;
}

WbwKOo.markdown

WbwKOo

A Pen by Bert on CodePen.

License.