Skip to content

Instantly share code, notes, and snippets.

@cscuderi
cscuderi / 60fps.css
Last active December 30, 2015 01:09
JavaScript that toggles a universal class on scroll to disable pointer events. Removes the class when the user stops scrolling. From http://www.thecssninja.com/javascript/pointer-events-60fps
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
@cscuderi
cscuderi / break-text.css
Last active August 29, 2015 14:16
Breaks text cross-browser
.break-text {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
@cscuderi
cscuderi / inline-svg-with-fallback.html
Created September 1, 2014 00:54
Inline SVG with fallback
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>
@cscuderi
cscuderi / animate-svg-path.js
Created September 1, 2014 00:52
Animate SVG path
var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating