baraja-js
Version:
A plugin for spreading items in a card-like fashion.
318 lines (285 loc) • 12.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Baraja: A Plugin for Spreading Items in a Card-Like Fashion</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Baraja: A Plugin for Spreading Items in a Card-Like Fashion" />
<meta name="keywords" content="javascript, plugin, transform, css3, cards, spread, items, web development" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="../dist/baraja.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Development/GammaGallery/">
<strong>« Previous Demo:</strong> Gamma Gallery
</a>
<span class="right">
<a href="http://dribbble.com/jdelamancha">Illustrations by Jason Custer</a>
<a href="http://tympanus.net/codrops/?p=12050">
<strong>Back to the Codrops Article</strong>
</a>
</span>
</div>
<!--/ Codrops top bar -->
<header class="clearfix">
<h1>Baraja <span>A plugin for spreading items in a card-like fashion</span></h1>
</header>
<section class="main">
<nav class="actions">
<span id="nav-fan">Fan right</span>
<span id="nav-fan2">Fan left</span>
<span id="nav-fan3">Fan right (asym.)</span>
<span id="nav-fan4">Fan left (asym.)</span>
<span id="nav-fan5">Rotated spread (horizontal)</span>
<span id="nav-fan6">Rotated spread (vertical)</span>
<span id="nav-fan7">Linear spread right</span>
<span id="nav-fan8">Linear spread left</span>
<span id="nav-fan9">Linear spread right (irregular)</span>
<span id="nav-fan10">Linear spread left (irregular)</span>
<span id="nav-fanOther1">other</span>
<span id="nav-fanOther2">other</span>
<span id="nav-fanOther3">other</span>
<span id="nav-fanOther4">other...</span>
<span id="add">Add items</span>
</nav>
<div class="baraja-demo">
<ul id="baraja-el" class="baraja-container">
<li><img src="images/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
<li><img src="images/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
<li><img src="images/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
<li><img src="images/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
<li><img src="images/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
<li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
<li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
<li><img src="images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
<li><img src="images/10.jpg" alt="image10"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
<li><img src="images/11.jpg" alt="image11"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
<li><img src="images/12.jpg" alt="image12"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
<li><img src="images/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
<li><img src="images/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
<li><img src="images/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
<li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
<li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
</ul>
</div>
<nav class="actions light">
<span id="nav-prev"><</span>
<span id="nav-next">></span>
<span id="close">close</span>
</nav>
</section>
</div>
<script type="text/javascript" src="../dist/baraja.min.js"></script>
<script type="text/javascript">
var baraja = window.baraja(document.getElementById('baraja-el'));
// Left arrow
document.getElementById('nav-prev')
.addEventListener('click', function() {
baraja.previous();
});
// Right arrow
document.getElementById('nav-next')
.addEventListener('click', function() {
baraja.next();
});
// Fan right
document.getElementById('nav-fan')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { x : 25, y : 100 },
speed: 500,
range: 90,
center: true
});
});
// Fan left
document.getElementById('nav-fan2')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { x : 75, y : 100 },
speed: 500,
range: 90,
center: true
});
});
// Fan right (asym.)
document.getElementById('nav-fan3')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { minX : 20, maxX : 80, y : 100 },
speed: 500,
range: 90,
translation: 60,
center: true
});
});
// Fan left (asym.)
document.getElementById('nav-fan4')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { minX : 20, maxX : 80, y : 100 },
speed: 500,
range: 90,
translation: 60,
center: true
});
});
// Rotated spread (horizontal)
document.getElementById('nav-fan5')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { x : 50, y : 200 },
speed: 500,
range: 100,
center: true
});
});
// Rotated spread (vertical)
document.getElementById('nav-fan6')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { x : 200, y : 50 },
speed: 500,
range: 80,
center: true
});
});
// Linear spread right
document.getElementById('nav-fan7')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { x : 50, y : 200 },
speed: 500,
range: 20,
translation: 300,
center: false
});
});
// Linear spread left
document.getElementById('nav-fan8')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { x : 50, y : 200 },
speed: 500,
range: 20,
translation : 300,
center: false
});
});
// Linear spread right (irregular)
document.getElementById('nav-fan9')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { x : 50, y : 200 },
speed: 500,
range: 20,
translation: 300,
center: false,
scatter: true
});
});
// Linear spread left (irregular)
document.getElementById('nav-fan10')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { x : 50, y : 200 },
speed: 500,
range: 20,
translation: 300,
center: false,
scatter: true
});
});
// Other 1
document.getElementById('nav-fanOther1')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { x : 25, y : 100 },
speed: 500,
range: 130,
center: false
});
});
// Other 2
document.getElementById('nav-fanOther2')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { x : 50, y : 90 },
speed: 500,
range: 360,
center: false
});
});
// Other 3
document.getElementById('nav-fanOther3')
.addEventListener('click', function() {
baraja.fan({
direction: 'left',
easing: 'ease-out',
origin: { x : 50, y : 100 },
speed: 500,
range: 330,
center: true
});
});
// Other 4
document.getElementById('nav-fanOther4')
.addEventListener('click', function() {
baraja.fan({
direction: 'right',
easing: 'ease-out',
origin: { minX : 20, maxX : 80, y : 100 },
speed: 500,
range: 90,
translation: 60,
center: true,
scatter: true
});
});
// Close
document.getElementById('close')
.addEventListener('click', function() {
baraja.close();
});
// Add items
var addElm = document.getElementById('add');
addElm.addEventListener('click', function() {
if (!addElm.classList.contains('disabled')) {
addElm.classList.add('disabled');
baraja.add('<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li><li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li><li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li><li><img src="images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>');
}
});
</script>
</body>
</html>