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.
<!-- | |
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> |
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.
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(); | |
}); |
@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 } | |
} |