A Pen by Ryan Boylett.

index.html

<!--

  Hey! Go take a look at Matthew Bird's positively wonderful dribbble shot!
  http://dribbble.com/shots/1436240-Quote-App-Concept

-->

<div class="slider">
  <ul class="widget">
    <li>
      <img src="http://s2.cdn.ryanboylett.co.uk/generic/image_jpg_00005.jpg" />
      <blockquote>
        Culture is a mass hallucination, and when you step outside the mass hallucination you see it for what it's worth.
        <credit>Terence Mckenna</credit>
      </blockquote>
    </li>
    <li>
      <img src="http://25.media.tumblr.com/ae324e7244c389e47e1095065d6969db/tumblr_n1iq25Wq701st5lhmo1_1280.jpg" />
      <blockquote>
        The pessimist complains about the wind;<br />
        the optimist expects it to change;<br />
        the realist adjusts the sails.
        <credit>William Arthur Ward</credit>
      </blockquote>
    </li>
    <li>
      <img src="http://25.media.tumblr.com/d2f4810531ede7d2ad23504b695cd229/tumblr_n1iq6fDee61st5lhmo1_1280.jpg" />
      <blockquote>
        Experience is not what happens to you;<br />
        it's what you do with what happens to you.
        <credit>Aldous Huxley</credit>
      </blockquote>
    </li>
    <li>
      <img src="http://31.media.tumblr.com/f0cb0d2bc887555434fa3afe0530e1cf/tumblr_n1ipr3bTo11st5lhmo1_1280.jpg" />
      <blockquote>
        By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest.
        <credit>Confucius</credit>
      </blockquote>
    </li>
  </ul>
  <div class="controls">
    <div class="top">
      <a href="#close"><i class="fa fa-times"></i></a>
      <a href="#share"><i class="fa fa-reply"></i></a>
    </div>
    <div class="bottom">
      <label>0 of 0</label>
      <hr />
      <div class="buttons">
        <a href="#next"><i class="fa fa-chevron-right"></i></a>
        <a href="#prev"><i class="fa fa-chevron-left"></i></a>
        <a href="#like"><i class="fa fa-thumbs-up"></i></a>
        <a href="#search"><i class="fa fa-search"></i></a>
        <a href="#comments"><i class="fa fa-comments"></i></a>
      </div>
    </div>
  </div>
</div>

Quote-App-Concept-by-Matthew-Bird.markdown

Quote App Concept by Matthew Bird

Go take a look at this amazing dribbble by Matthew Bird! http://dribbble.com/shots/1436240-Quote-App-Concept

A Pen by Ryan Boylett on CodePen.

License.

script.js

function roll()
{
  var slider = $('.slider > .widget');
    slider.removeClass('do-slide');
  
  $('.slider > .controls > .bottom > label').html(slider.find('> li').first().attr('num') + ' of ' + slider.find('> li').size());
  
  window.sliderTimeout = setTimeout(function()
  {
    slider.addClass('do-slide');
    window.sliderTimeout = setTimeout(function()
    {
      slider.find('> li').first().appendTo(slider);
      roll();
    }, 1000);
  }, 5000);
}

$(function()
{
  $('.slider > .widget > li').each(function()
  {
    $(this).attr('num', $(this).index() + 1);
  });
  
  $('.slider a').click(function()
  {
    switch($(this).attr('href'))
    {
      case '#share':
        alert('You clicked share!\nGood for you! :)');
        break;
      case '#close':
        alert('This would trigger a widget.close() event');
        break;
      case '#like':
        alert('You clicked like!\nAwesome! :D');
        break;
      case '#search':
        alert('This would trigger a modal with a search box');
        break;
      case '#comments':
        alert('This would trigger a modal with any comments');
        break;
      case '#prev':
        window.clearTimeout(window.sliderTimeout);
        $('.slider > .widget').addClass('backwards-slide').find('> li').last().prependTo('.slider > .widget');
        window.sliderTimeout = setTimeout(function()
        {
          $('.slider > .widget').removeClass('backwards-slide');
          roll();
        }, 1000);
        break;
      case '#next':
        window.clearTimeout(window.sliderTimeout);
        $('.slider > .widget').addClass('do-slide');
        window.sliderTimeout = setTimeout(function()
        {
          $('.slider > .widget').removeClass('do-slide').find('> li').first().appendTo('.slider > .widget');
          roll();
        }, 1000);
        break;
    }
    return false;
  });
  
  roll();
});

style.css

@import url(http://fonts.googleapis.com/css?family=Gafata);
@import url(http://s1.cdn.ryanboylett.co.uk/fonts/fontawesome/fontawesome.css);

html
{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://s1.cdn.ryanboylett.co.uk/images/wallpapers/008.jpg);
  background-size: 100% 100%;
}

body
{
  font-family: "Gafata", sans-serif;
  font-weight: normal;
  text-shadow: 0 0 1px #FFF;
  color: #FFF;
}

.slider
{
  position: relative;
  width: 600px;
  height: 450px;
  overflow: hidden;
  margin: 50px auto;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, .33);
}

.slider > .widget
{
  position: absolute;
  width: 99999999px;
  height: 450px;
  white-space: nowrap;
}

.slider > .widget.do-slide
{
  animation-name: do-slide;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

.slider > .widget.backwards-slide
{
  animation-name: do-slide;
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  animation-duration: 1s;
  animation-direction: reverse;
  animation-timing-function: ease-in;
}

.slider > .widget > li
{
  position: relative;
  float: left;
  width: 600px;
  height: 450px;
  background: #000;
  white-space: normal;
}

.slider > .widget > li, .slider > .widget > li > img
{
  width: 600px;
  height: 450px;
}

.slider > .widget > li > img { opacity: .6 }

.slider > .widget > li > blockquote
{
  position: absolute;
  z-index: 1;
  top: 25%;
  left: 50%;
  width: 420px;
  margin: 0 0 0 -210px;
  text-align: center;
  font-size: 24px;
  line-height: 28px;
}

.slider > .widget > li > blockquote > credit
{
  display: block;
  position: absolute;
  top: 130%;
  right: 7%;
  font-size: 18px;
}

.slider > .widget > li > blockquote > credit:before
{
  content: "- ";
  padding: 0 5px 0 0;
  font-size: 14px;
}

.slider > .controls
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.slider > .controls > .top
{
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  padding: 20px;
}

.slider > .controls > .top > a
{
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  color: #FFF;
  border: 2px solid #FFF;
  border-radius: 50%;
}

.slider > .controls > .top > a[href="#close"] { float: right }

.slider > .controls > .bottom
{
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 25%;
  text-align: center;
}

.slider > .controls > .bottom > label
{
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: .66;
}

.slider > .controls > .bottom > hr
{
  display: block;
  margin: 13px 0;
  height: 1px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.slider > .controls > .bottom > .buttons > a
{
  margin: 0 15px;
  text-decoration: none;
  font-size: 18px;
  color: #FFF;
}

.slider > .controls > .bottom > .buttons > a[href="#next"] { margin: 0; float: right }
.slider > .controls > .bottom > .buttons > a[href="#prev"] { margin: 0; float: left }

@keyframes do-slide
{
  0% { left: 0 }
  100% { left: -600px }
}