Skip to content

Instantly share code, notes, and snippets.

@colingourlay
Created October 25, 2016 23:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save colingourlay/fff140c5218125ab1cba5abe01baa6f8 to your computer and use it in GitHub Desktop.
Save colingourlay/fff140c5218125ab1cba5abe01baa6f8 to your computer and use it in GitHub Desktop.
requirebin sketch
require('pointer-css-variables')(true);
var height;
var nextHeight = window.innerHeight;
window.requestAnimationFrame(function updateHeight () {
if (nextHeight !== height) {
height = nextHeight;
document.documentElement.style.setProperty('--window-inner-height', height);
}
window.requestAnimationFrame(updateHeight);
});
window.addEventListener('resize', function () {
nextHeight = window.innerHeight;
});
setTimeout(function(){require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"pointer-css-variables":[function(require,module,exports){module.exports=pointer;var DEVICES=["pointer","mouse","touch","touches-0","touches-1","touches-2","touches-3","touches-4"];var MOUSE_DEVICES=DEVICES.filter(function(device){return device.indexOf("touch")===-1});var TOUCH_DEVICES=DEVICES.filter(function(device){return device!=="mouse"});var SYSTEMS=["client","page","screen"];var DIMENSIONS=["x","y"];var DEFAULTS=DEVICES.reduce(function(memo,device){SYSTEMS.forEach(function(system){DIMENSIONS.forEach(function(dimension){memo[["-",device,system,dimension].join("-")]=""})});return memo},{});function pointer(shouldUnset){if(!isSupported()){return new Error("CSS variables not supported")}var root=document.documentElement;var on=root.addEventListener.bind(root);var set=root.style.setProperty.bind(root.style);var raf=window.requestAnimationFrame.bind(window);var variables=Object.assign({},DEFAULTS);function update(devices,e){var _e=e;if(e.touches){_e=e.touches[0]}devices.forEach(function(device){SYSTEMS.forEach(function(system){DIMENSIONS.forEach(function(dimension){var point=_e;var touchIndex;var value;if(device.indexOf("-")>-1){touchIndex=+device.split("-")[1];if(e.touches[touchIndex]==null){return}point=e.touches[touchIndex]}value=point[system+dimension.toUpperCase()];variables[["-",device,system,dimension].join("-")]=value})})})}function unset(){Object.keys(variables).forEach(function(variable){variables[variable]=""})}function tick(){Object.keys(variables).forEach(function(variable){set(variable,variables[variable])});raf(tick)}on("mousemove",function(e){update(MOUSE_DEVICES,e)});on("touchmove",function(e){update(TOUCH_DEVICES,e)});if(shouldUnset){on("mouseleave",unset);on("touchend",unset);on("touchcancel",unset)}raf(tick)}function isSupported(){return window.CSS&&window.CSS.supports&&window.CSS.supports("--yep",0)}},{}]},{},[]);require("pointer-css-variables")(true);var height;var nextHeight=window.innerHeight;window.requestAnimationFrame(function updateHeight(){if(nextHeight!==height){height=nextHeight;document.documentElement.style.setProperty("--window-inner-height",height)}window.requestAnimationFrame(updateHeight)});window.addEventListener("resize",function(){nextHeight=window.innerHeight})},0);
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"pointer-css-variables": "1.0.0"
}
}
<!-- contents of this file will be placed inside the <body> -->
<div class="Canvas">
<img class="Image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
</div>
<!-- contents of this file will be placed inside the <head> -->
<style>
.Canvas {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.Image {
--scale: calc(var(--pointer-client-y, 100vh) / var(--window-inner-height, 100vh));
width: 50vmin; /* half size */
height: auto;
transform: scale(calc(var(--scale, 1) * 2));
transition: transform .125s;
will-change: transform;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment