Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Update animate-in demo

Browse Source 
Update prism.js and prism.css. Include plugin to allow external files with data-src attribute
pull/111/head
Glen Cheney 8 years ago
parent 244f89aaba
commit 832503415d
8 changed files with 96 additions and 81 deletions
Show Stats Download Patch File Download Diff File

16
_posts/2013-08-25-animated.html
Unescape Escape View File

@ -3,6 +3,7 @@ layout: default
title: Animate In Demo
description: When elements enter the viewport, they transition in from zero opacity and from the bottom.
image: /demos/animated.jpg
prism: true
extraJS: [ "viewport.js", "demos/animate-in.js" ]
---
<div class="container">
@ -31,11 +32,18 @@ extraJS: [ "viewport.js", "demos/animate-in.js" ]
</div>
<div class="container">
<div class="container has-code-block">
<div class="row">
<h2>Shuffle.js</h2>
<p>{{ site.longDescription }}</p>
<p>This demo was inspired by <a href="http://tympanus.net/codrops/">codrops</a>&rsquo; demo <a href="http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/">Loading effects for grid items with css animations</a>.</p>
<div class="col-12@sm">
<p>This demo was inspired by <a href="http://tympanus.net/codrops/">codrops</a>&rsquo; demo <a href="http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/">Loading effects for grid items with css animations</a>.</p>
</div>
<div class="col-12@sm">
<h2>Source code for this demo</h2>
<p>Link to <a href="{{ site.baseurl }}/js/demos/animate-in.js">demo source</a></p>
<div class="code-block">
<pre rel="JavaScript" data-src="{{ site.baseurl }}/js/demos/animate-in.js"></pre>
</div>
</div>
</div>
</div>

2
_scss/_global.scss
Unescape Escape View File

@ -4,7 +4,7 @@
box-sizing: border-box;
}
pre {
pre.max-height {
max-height: 30em;
}

8
_scss/_site-nav.scss
Unescape Escape View File

@ -56,6 +56,14 @@
background-color: $wetAsphalt;
}
.has-code-block .code-block pre {
margin-bottom: 0;
}
.has-code-block + .site-footer {
margin-top: 0;
}
.site-footer__credit {
margin: 0;
text-align: right;

45
css/prism.css
Unescape Escape View File

@ -1,3 +1,4 @@
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
@ -7,12 +8,15 @@
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
@ -24,6 +28,18 @@ pre[class*="language-"] {
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
@ -47,6 +63,7 @@ pre[class*="language-"] {
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
@ -67,13 +84,19 @@ pre[class*="language-"] {
.token.property,
.token.tag,
.token.boolean,
.token.number {
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string {
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
@ -83,7 +106,7 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0,0%,100%,.5);
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
@ -92,15 +115,23 @@ pre[class*="language-"] {
color: #07a;
}
.token.function {
color: #DD4A68;
}
.token.regex,
.token.important {
.token.important,
.token.variable {
color: #e90;
}
.token.important {
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;

8
css/style.css
Unescape Escape View File

@ -366,7 +366,7 @@ textarea {
*::after {
box-sizing: border-box; }
pre {
pre.max-height {
max-height: 30em; }
picture {
@ -917,6 +917,12 @@ h3:hover > a {
padding: 1em 0;
background-color: #34495E; }
.has-code-block .code-block pre {
margin-bottom: 0; }
.has-code-block + .site-footer {
margin-top: 0; }
.site-footer__credit {
margin: 0;
text-align: right; }

41
js/demos/animate-in.js
Unescape Escape View File

@ -1,45 +1,43 @@
'use strict';
var Shuffle = window.shuffle;
var Viewport = window.viewport;
function toArray(arrayLike) {
if ('from' in Array) {
return Array.from(arrayLike);
}
return Array.prototype.slice.call(arrayLike);
}
var Viewport = window.Viewport;
var Demo = function () {
this.element = document.getElementById('grid');
this.gridItems = toArray(this.element.querySelectorAll('.picture-item'));
this.sizer = this.element.querySelector('.shuffle__sizer');
this.gridItems = this.element.querySelectorAll('.picture-item');
var sizer = this.element.querySelector('.shuffle__sizer');
this.shuffle = new Shuffle(this.element, {
itemSelector: '.picture-item',
sizer: this.sizer,
sizer: sizer,
});
this.addViewportItems();
// Add the transition class to the items after ones that are in the viewport
// have received the `in` class.
setTimeout(function () {
this.addTransitionToItems();
}.bind(this), 100);
};
/**
* Loop through each grid item and add it to the viewport watcher.
*/
Demo.prototype.addViewportItems = function () {
var handler = this.showItemsInViewport;
this.gridItems.forEach(function () {
for (var i = 0; i < this.gridItems.length; i++) {
Viewport.add({
element: this,
element: this.gridItems[i],
threshold: 130,
enter: handler,
enter: this.showItemsInViewport,
});
});
}
};
/**
* Add the `in` class to the element after it comes into view.
*/
Demo.prototype.showItemsInViewport = function () {
this.classList.add('in');
};
@ -49,9 +47,10 @@ Demo.prototype.showItemsInViewport = function () {
* visible ones will snap into place.
*/
Demo.prototype.addTransitionToItems = function () {
this.gridItems.forEach(function (item) {
item.querySelector('.picture-item__inner').classList.add('picture-item__inner--transition');
});
for (var i = 0; i < this.gridItems.length; i++) {
var inner = this.gridItems[i].querySelector('.picture-item__inner');
inner.classList.add('picture-item__inner--transition');
}
};
/**

19
js/prism.js
View File

File diff suppressed because one or more lines are too long

38
js/viewport.js
Unescape Escape View File

@ -1,38 +1,4 @@
// Viewport Helper
// --------------------------------------------
//
// * **Class:** Viewport
// * **Version:** 1.0
// * **Modified:** 06/26/2013
// * **Author:** Glen Cheney
// * **Dependencies:** jQuery 1.7+, SONY Settings, throttle/debounce
//
// *Notes:*
//
// If you need to be notified when an element is scrolled into view, use this module.
// This module keeps track of all elements that want to be watched and caches their offsets
// and dimensions in order to keep scrolling as smooth as possible.
//
// *Example Usage:*
//
// Viewport.add({
// element: document.getElementById('some-wrapper'),
// threshold: '50%',
// enter: function( element ) {
// console.log('the top of "element" is 50% in view');
// },
// leave: function() {
// console.log('bottom of element has left the viewport');
// }
// });
//
// *Viewport.add parameters:*
//
// * `element` is a DOM element and `callback` is a function. `this` in the callback is the element.
// * Using an options object, a `threshold` can be set.
// It is either an integer value from the bottom of the window, a string percentage, or a float
// between 0 and 1 which represents the percent.
//
// Legacy Viewport helper.
(function( $ ) {
@ -131,7 +97,7 @@
$window.on('resize.viewport', $.proxy( self.onResize, self ));
// Throttle scrolling because it doesn't need to be super accurate
$window.on('scroll.viewport', $.throttle( self.throttleTime, $.proxy( self.onScroll, self ) ));
$window.on('scroll.viewport', $.proxy( self.onScroll, self ));
self.hasActiveHandlers = true;
},

Write Preview
Loading…
Cancel
Save