Skip to content

Instantly share code, notes, and snippets.

@hugeuser
hugeuser / skeleton HTML
Last active August 29, 2015 13:56
"Scroll-Jacking" in Full Screen.
<div id="projects">
<section id="project-0" class="slide active"></section>
<section id="project-1" class="slide active"></section>
<section id="project-2" class="slide active"></section>
</div>
@hugeuser
hugeuser / CSS
Last active August 29, 2015 13:56
"Scroll-Jacking" in Full Screen
#projects {
height:100%;
}
.slide {
position: absolute;
top:0;
left:0;
height: 0;
width: 100%;
@hugeuser
hugeuser / JavaScript
Last active June 26, 2018 13:13
"Scroll-Jacking" in Full Screen.
var delta;
var currentSlideIndex = 0;
function elementScroll (e) {
// --- Scrolling up ---
if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
delta--;
@hugeuser
hugeuser / Mobile
Last active August 10, 2016 18:47
"Scroll-Jacking in Full Screen."
var delta;
dragThreshold = 0.15;// "percentage" to drag before engaging
dragStart = null; // used to determine touch / drag distance
percentage = 0,
target,
previousTarget;
function touchStart(event) {
if (dragStart !== null) { return; }
@hugeuser
hugeuser / Sass Warning
Created February 27, 2014 19:02
Warning
@extending an outer selector from within @media is deprecated.
You may only @extend selectors within the same directive.
This will be an error in Sass 3.3.
It can only work once @extend is supported natively in the browser.
@hugeuser
hugeuser / config.rb
Created February 27, 2014 19:08
config.rb
http_path = "/"
css_dir = "Includes/styles"
sass_dir = "Includes/styles"
images_dir = "Includes/images"
generated_images_dir = "Includes/images/generated"
javascripts_dir = "Includes/scripts"
relative_assets = true
@hugeuser
hugeuser / Sprite Map Mixin
Last active August 29, 2015 13:56
adjustment options
$sprites-spacing: 2px;
@import "sprites/*.png";
//this will create a variable named $sprites-sprites
$sprites_x2-spacing: 4px;
@import "sprites_x2/*.png";
//this will create a variable named $sprites_x2-sprites
@mixin get-sprite( $map, $sprite, $x2: false, $adjustX: 0, $adjustY: 0, $repeat: no-repeat ){
//For use in media queries. Regular @import <dir>-sprite(file-name) does not fully work.
@hugeuser
hugeuser / Usage
Created February 27, 2014 19:09
Usage
//normal desktop icon
@include get-sprite( $sprites-sprites, icon );
//2x dpi mobile icon
@include get-sprite( $sprites_x2-sprites, icon, true, 0, 1 );
@hugeuser
hugeuser / Output
Created February 27, 2014 19:10
Output
//normal desktop icon
background: url('../images/generated/sprites-xxxxxxxxxxx.png') 0 -209px no-repeat;
width: 33px;
height: 14px;
//2x dpi mobile icon
background: url('../images/generated/sprites_x2-xxxxxxxxxxx.png') 0 -234px no-repeat;
-webkit-background-size: 217px auto;
-moz-background-size: 217px auto;
-o-background-size: 217px auto;
@hugeuser
hugeuser / adding customizations to vimrc
Created February 27, 2014 21:59
adding customizations to vimrc
$ vim ~/.vimrc
i
filetype indent on
Esc
:w
:so %