Skip to content

Commit

Permalink
gh ribbon fix, remove extra whitespace
Browse files Browse the repository at this point in the history
  • Loading branch information
@hakimel
hakimel committed Feb 25, 2014
1 parent 928c059 commit bd84075
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 59 deletions.
26 changes: 13 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
<!doctype html>
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>stroll.js - CSS3 Scroll Effects</title>

<meta name="description" content="A collection of CSS3 scroll effects and animations.">
<meta name="author" content="Hakim El Hattab">

<!-- Redirect to the mobile index page if we're on a touch device -->
<script>if( 'ontouchstart' in window ) window.location = 'mobile.html';</script>

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/example.css">
<link rel="stylesheet" href="css/stroll.css">
</head>

<body>

<header>
stroll.js - CSS3 scroll effects. <small>Created by <a href="http://twitter.com/hakimel">@hakimel</a>. Tested in Chrome/Safari/FF/iOS/Android 4.x. In the mood for more CSS? <a href="http://hakim.se/experiments">Here you go</a>.</small>

<div>
<a href="http://twitter.com/share" class="twitter-share-button" data-text="CSS3 list scroll effects created by @hakimel" data-url="http://lab.hakim.se/scroll-effects" data-count="small" data-related="hakimel"></a>
<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fscroll-effects%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>

<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fscroll-effects%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
</div>
</header>

<div id="main">
<article>
<h2>Grow</h2>
Expand Down Expand Up @@ -79,7 +79,7 @@ <h2>Papercut</h2>
<h2>Twirl (CSS 3D)</h2>
<ul class="twirl"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>
</article>
<!--
<!--
<article>
<h2>Skew</h2>
<ul class="skew"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>
Expand All @@ -95,7 +95,7 @@ <h2>Zipper</h2>
<article>
<h2>Fade</h2>
<ul class="fade"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>
</article>
</article>
-->
</div>

Expand All @@ -107,9 +107,9 @@ <h2>Fade</h2>

<!-- Third party shizzle -->

<a href="https://github.com/hakimel/stroll.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
<a href="https://github.com/hakimel/stroll.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</body>
</html>
68 changes: 34 additions & 34 deletions js/stroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
* stroll.js 1.2 - CSS scroll effects
* http://lab.hakim.se/scroll-effects
* MIT licensed
*
*
* Copyright (C) 2012 Hakim El Hattab, http://hakim.se
*/
(function(){

"use strict";

// When a list is configured as 'live', this is how frequently
// When a list is configured as 'live', this is how frequently
// the DOM will be polled for changes
var LIVE_INTERVAL = 500;

Expand All @@ -27,30 +27,30 @@
function refresh() {
if( active ) {
requestAnimFrame( refresh );

for( var i = 0, len = lists.length; i < len; i++ ) {
lists[i].update();
}
}
}

/**
* Starts monitoring a list and applies classes to each of
* its contained elements based on its position relative to
* Starts monitoring a list and applies classes to each of
* its contained elements based on its position relative to
* the list's viewport.
*
* @param {HTMLElement} element
*
* @param {HTMLElement} element
* @param {Object} options Additional arguments;
* - live; Flags if the DOM should be repeatedly checked for changes
* repeatedly. Useful if the list contents is changing. Use
* repeatedly. Useful if the list contents is changing. Use
* scarcely as it has an impact on performance.
*/
function add( element, options ) {
// Only allow ul/ol
if( !element.nodeName || /^(ul|li)$/i.test( element.nodeName ) === false ) {
return false;
}
// Delete duplicates (but continue and re-bind this list to get the
// Delete duplicates (but continue and re-bind this list to get the
// latest properties and list items)
else if( contains( element ) ) {
remove( element );
Expand Down Expand Up @@ -79,10 +79,10 @@
}

/**
* Stops monitoring a list element and removes any classes
* Stops monitoring a list element and removes any classes
* that were applied to its list items.
*
* @param {HTMLElement} element
*
* @param {HTMLElement} element
*/
function remove( element ) {
for( var i = 0; i < lists.length; i++ ) {
Expand Down Expand Up @@ -114,10 +114,10 @@
}

/**
* Calls 'method' for each DOM element discovered in
* Calls 'method' for each DOM element discovered in
* 'target'.
*
* @param target String selector / array of UL elements /
*
* @param target String selector / array of UL elements /
* jQuery object / single UL element
* @param method A function to call for each element target
*/
Expand Down Expand Up @@ -155,16 +155,16 @@
}

/**
* The basic type of list; applies past & future classes to
* The basic type of list; applies past & future classes to
* list items based on scroll state.
*/
function List( element ) {
this.element = element;
}

/**
* Fetches the latest properties from the DOM to ensure that
* this list is in sync with its contents.
/**
* Fetches the latest properties from the DOM to ensure that
* this list is in sync with its contents.
*/
List.prototype.sync = function() {
this.items = Array.prototype.slice.apply( this.element.children );
Expand All @@ -185,7 +185,7 @@
this.update( true );
}

/**
/**
* Apply past/future classes to list items outside of the viewport
*/
List.prototype.update = function( force ) {
Expand Down Expand Up @@ -244,9 +244,9 @@


/**
* A list specifically for touch devices. Simulates the style
* of scrolling you'd see on a touch device but does not rely
* on webkit-overflow-scrolling since that makes it impossible
* A list specifically for touch devices. Simulates the style
* of scrolling you'd see on a touch device but does not rely
* on webkit-overflow-scrolling since that makes it impossible
* to read the up-to-date scroll position.
*/
function TouchList( element ) {
Expand All @@ -273,9 +273,9 @@
}
TouchList.prototype = new List();

/**
* Fetches the latest properties from the DOM to ensure that
* this list is in sync with its contents. This is typically
/**
* Fetches the latest properties from the DOM to ensure that
* this list is in sync with its contents. This is typically
* only used once (per list) at initialization.
*/
TouchList.prototype.sync = function() {
Expand Down Expand Up @@ -308,7 +308,7 @@
}

/**
* Binds the events for this list. References to proxy methods
* Binds the events for this list. References to proxy methods
* are kept for unbinding if the list is disposed of.
*/
TouchList.prototype.bind = function() {
Expand All @@ -333,7 +333,7 @@

TouchList.prototype.onTouchStart = function( event ) {
event.preventDefault();

if( event.touches.length === 1 ) {
this.touch.isActive = true;
this.touch.start = event.touches[0].clientY;
Expand Down Expand Up @@ -366,7 +366,7 @@

var sameDirection = ( this.touch.value > this.touch.previous && this.velocity < 0 )
|| ( this.touch.value < this.touch.previous && this.velocity > 0 );

if( this.touch.isAccellerating && sameDirection ) {
clearInterval( this.touch.accellerateTimeout );

Expand Down Expand Up @@ -414,7 +414,7 @@
}
};

/**
/**
* Apply past/future classes to list items outside of the viewport
*/
TouchList.prototype.update = function( force ) {
Expand All @@ -438,7 +438,7 @@
this.velocity *= 0.95;
}

// Cut off early, the last fraction of velocity doesn't have
// Cut off early, the last fraction of velocity doesn't have
// much impact on movement
if( Math.abs( this.velocity ) < 0.15 ) {
this.velocity = 0;
Expand All @@ -450,7 +450,7 @@
this.top.value = scrollTop - this.touch.offset;

var scrollBottom = scrollTop + this.listHeight;

// One loop to make our changes to the DOM
for( var i = 0, len = this.items.length; i < len; i++ ) {
var item = this.items[i];
Expand Down Expand Up @@ -499,7 +499,7 @@
window.stroll = {
/**
* Binds one or more lists for scroll effects.
*
*
* @see #add()
*/
bind: function( target, options ) {
Expand All @@ -510,7 +510,7 @@

/**
* Unbinds one or more lists from scroll effects.
*
*
* @see #remove()
*/
unbind: function( target ) {
Expand Down
24 changes: 12 additions & 12 deletions mobile.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>stroll.js - CSS3 Scroll Effects</title>

<meta name="description" content="A collection of CSS3 scroll effects and animations.">
Expand All @@ -13,9 +13,9 @@

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/example.css">
<link rel="stylesheet" href="css/stroll.css">

Expand All @@ -27,7 +27,7 @@

ul {
position: relative;
width: 100%;
width: 100%;
}
ul li {
padding: 25px 20px;
Expand Down Expand Up @@ -96,7 +96,7 @@
}
</style>
</head>

<body>

<div class="settings-toggle"></div>
Expand Down Expand Up @@ -208,15 +208,15 @@
}, false );

/**
* Changes to a new type of effect style, this also updates
* Changes to a new type of effect style, this also updates
* the settings UI to highlight the correct style.
*
*
* @param {String} type The name of the effect to apply
*/
function changeEffect( type ) {
var previousSelector = document.querySelector( '.settings .effects .' + exampleList.className ),
currentSelector = document.querySelector( '.settings .effects .' + type );

exampleList.className = type;

if( previousSelector ) {
Expand All @@ -229,7 +229,7 @@
}

/**
* Updates the list height to match the window height for
* Updates the list height to match the window height for
* the demo. Also re-binds the list with stroll.js.
*/
function updateHeight() {
Expand All @@ -241,6 +241,6 @@

})();
</script>

</body>
</html>

0 comments on commit bd84075

Please sign in to comment.