Skip to content

Instantly share code, notes, and snippets.

View jordandobson's full-sized avatar
🥽

Jordan Dobson jordandobson

🥽
128 followers · 187 following
View GitHub Profile
@jordandobson
jordandobson / - Detect Resize
Last active August 29, 2015 14:06
Detect Resize and OS / Device Type
$(window).bind('resize', function(){
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size.indexOf("break2") !=-1){
// Do stuff for breakpoint 2
} else if (size.indexOf("tablet") !=-1){
// Do stuff for tablet
@jordandobson
jordandobson / CLS.js
Created June 8, 2011 00:15
Mobile JavaScript Library for HTML Class Attribute Manipulation
(function(document){
window.CLS = window.CLS || {};
CLS.add = function(el, cn){
if(!CLS.exists(el, cn)){
el.className = el.className ? el.className + ' ' + cn : cn;
}
}
@jordandobson
jordandobson / vignette.css
Created November 25, 2010 09:28
Examples of adding a Vignette to Photos with CSS3 Gradients. Code sampled from: http://cl.ly/3Nxc
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
@stakes
stakes / frameless.coffee
Last active April 14, 2017 21:08
Framer.js module to open prototypes in Frameless
# Add the following line to your project in Framer Studio.
# `frameless = require "frameless"`
frameless = {}
# Directly opens the prototype in Frameless
frameless.open = ->
intent = "frameless://"
url = intent + window.location.host + window.location.pathname + "/"
window.location.replace url
@MikeMcChillin
MikeMcChillin / Full Height & width background video or image
Last active May 31, 2017 10:18
Full height background video / image from FiftyThree Paper
Set inline width & height.
Video, img alternative natural width & height: 1920 x 1080
21mb video O_O
http://codepen.io/MikeMcChillin/pen/wKGFz
@sskylar
sskylar / default.html
Last active October 21, 2017 05:31
Front end site translations with Siteleaf v2 (http://www.siteleaf.com) and jquery.localize.js (https://github.com/coderifous/jquery-localize).
<html>
<body>
<h1 data-localize="{{page.id}}.title">{{page.title}}</h1>
<div data-localize="{{page.id}}.body">
{{content}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
@elliottkember
elliottkember / stateAnimationOptions.coffee
Last active March 14, 2019 14:11
Framer.js per-transition animationOptions!
myLayer.states.stateAnimationOptions =
'a-b':
time: 0.1
'b-c':
time: 0.8
'c-d':
time: 0.5
myLayer.states.add
a: opacity: 1
@davo
davo / Colors.tsx
Created May 21, 2019 21:38
Reusing Framer X Shared Colors on a Function Component
import * as React from 'react'
import { Stack, Frame } from 'framer'
import { colors } from './canvas'
export function Colors() {
const [colorsTokens] = React.useState(() => {
return Object.keys(colors).map(key => colors[key])
})
return (
@jonastreub
jonastreub / useGyro.ts
Created May 12, 2019 12:13
A hook making it fun to work with the gyroscope
import { useState, useEffect } from "react"
interface WorldOrientation {
/** A number representing the motion of the device around the z axis, expressed in degrees with values ranging from 0 to 360. */
alpha: number
/** A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 to 180. This represents a front to back motion of the device. */
beta: number
/** A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 to 90. This represents a left to right motion of the device. */
gamma: number
}
@koenbok
koenbok / qc-framer.js
Created May 14, 2014 15:04
QC Spring Value Converter
var QcValueConverter = {
tensionFromQcValue: function(qcValue) {
return (qcValue - 30.0) * 3.62 + 194.0;
},
qcValueFromTension: function(tension) {
return (tension - 194.0) / 3.62 + 30.0;
},
frictionFromQcValue: function(qcValue) {