I wanted to give the look and feel of looking at flash cards on a table.
A Pen by Charlotte Tan on CodePen.
I wanted to give the look and feel of looking at flash cards on a table.
A Pen by Charlotte Tan on CodePen.
<div class="row text-center"> | |
<div class="small-9 small-centered columns"> | |
<button id="get-quote" class="button">Be Inspired!</button> | |
<button id="tweet" class="button"><i class="fa fa-twitter"></i></button> | |
</div> | |
</div> | |
<div class="row text-center"> | |
<div class="small-9 medium-7 large-5 small-centered columns"> | |
<div id="cardStack"></div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="small-6 small-centered columns"> | |
<div id="credits">Quotes from: <a href="http://forismatic.com/en/api/">http://forismatic.com/en/api/</a></div> | |
</div> | |
</div> |
I wanted to give the look and feel of looking at flash cards on a table.
A Pen by Charlotte Tan on CodePen.
$(function() { | |
var quoteApi = 'http://api.forismatic.com/api/1.0/?jsonp=?'; | |
var twitterApi = 'https://twitter.com/intent/tweet'; | |
function getQuote() { | |
$.getJSON(quoteApi, { | |
method: "getQuote", | |
format: "jsonp", | |
lang: "en" | |
}, | |
function(data) { | |
var $quote = $("<div>", { | |
class: "quote" | |
}).text(data.quoteText.trim()); | |
var $author = $("<div>", { | |
class: "author" | |
}).text(data.quoteAuthor.trim()); | |
// -3 <= deg <= 3 | |
var deg = Math.floor(Math.random() * 7) - 3; | |
var $card = $("<div>", { | |
class: "card" | |
}).append($quote).append($author).css("transform", "rotate(" + deg + "deg)").addClass("animated fadeIn"); | |
var $cardStack = $("#cardStack"); | |
var $cards = $cardStack.children(); | |
var cardsLen = $cards.length; | |
var maxCards = 3; | |
if (cardsLen >= maxCards) { | |
var numberToRemove = cardsLen - maxCards; | |
$cards.each(function(index, ele) { | |
var $ele = $(ele); | |
if (index <= numberToRemove) { | |
$ele.addClass("animated fadeOut").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { | |
$ele.remove(); | |
}); | |
} | |
}); | |
} | |
$cardStack.append($card); | |
}); | |
} | |
function tweet() { | |
var quote = $(".quote").last().text(); | |
var author = $(".author").last().text() || 'Unknown'; | |
var tweetStr = quote + ' - ' + author; | |
var tweetUrl = twitterApi + '?text=' + encodeURIComponent(tweetStr); | |
window.open(tweetUrl, '_blank'); | |
} | |
$("#get-quote").click(getQuote); | |
$("#tweet").click(tweet); | |
getQuote(); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
.button { | |
border-radius: 4px; | |
margin-top: 15vh; | |
} | |
#cardStack { | |
position: relative; | |
} | |
.card { | |
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), | |
0 2px 10px 0 rgba(0, 0, 0, 0.12); | |
color: #272727; | |
border-radius: 2px; | |
padding: 1.3rem; | |
margin: 1.3rem 0; | |
background-color: white; | |
width: 100%; | |
position: absolute; | |
animation-duration: 0.5s; | |
.quote { | |
padding: 1.3rem; | |
font-weight: 300; | |
border-radius: 0 0 2px 2px; | |
} | |
} | |
#credits { | |
bottom: 0.5rem; | |
position: fixed; | |
right: 0.5rem; | |
font-size: 0.85rem; | |
} |
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |