Skip to content

Instantly share code, notes, and snippets.

View califat's full-sized avatar

califat

1 follower · 6 following
View GitHub Profile
@califat
califat / script.babel
Created June 3, 2017 03:33 — forked from anonymous/script.babel
Waterdroplet WebGL Shader
/**
* Raindrop fragment shader, being used by PIXI.js in the EffectCanvas object
* {{uniforms: {time: {type: string, value: number}, iResolution: {type: string, value: [*]}}, fragment: string}}
*/
const shaderData = {
uniforms: {
iResolution: {
type: 'v2',
value: [
window.innerWidth,
@califat
califat / index.html
Created June 3, 2017 03:34 — forked from anonymous/index.html
mouse position color picker (scroll for saturation)
<div class="js-picker picker">
<svg class="cursor js-cursor" width="278" height="278" viewBox="0 0 278 278" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="#000"><g fill-rule="nonzero" fill="#000"><path class="filter" d="M179.023 128.25c2.18-2.186 2.18-5.68 0-7.866L63.425 4.596c-2.618-2.62-6.107-4.04-9.815-4.04H14.46C6.824.555.61 6.78.61 14.425v39.216c0 3.66 1.47 7.21 4.034 9.83l115.6 115.79c2.18 2.184 5.67 2.184 7.85 0l50.93-51.013z"/><path d="M270.74 259.384c11.23-16.658 7.796-39.324-6.38-53.58l-42.805-42.82 15.704-15.674c2.18-2.184 2.18-5.68 0-7.865l-11.78-11.797c-2.126-2.13-5.452-2.13-7.633-.11l-90.46 90.61c-2.02 2.185-1.964 5.57.108 7.647l11.778 11.797c2.18 2.185 5.67 2.185 7.852 0l15.704-15.675 43.893 43.966c18.05 18.024 48.857 15.894 64.016-6.5z"/></g></g></svg>
<header>
<h2 class="js-picker__colorName">Hot Pink</h2>
<h1 class="js-picker__colorValue">#ff69b4</h1>
</header>
</div>
@califat
califat / audio-visualizer2.markdown
Created June 7, 2017 02:41 — forked from anonymous/audio-visualizer2.markdown
Audio Visualizer2
@califat
califat / index.html
Created June 17, 2017 09:00 — forked from anonymous/index.html
Pure JavaScript Draggable Ball
<div id="ball"></div>
@califat
califat / index.html
Created June 17, 2017 09:01 — forked from anonymous/index.html
Pure JavaScript Draggable Dialog Box
<p><a href="javascript:setDialog('open', {title: 'Example Title', content: 'Hello!'});">Open Dialog!</a> <a href="javascript:setDialog('close');">Close Dialog!</a></p>
<h3>Advanced Example</h3>
<pre><code>document.getElementById('ny-btn').onclick = function() {
setDialog("open", {
title: "The Dialog Box Title",
width: 400,
height: 200,
content: "Hello!",
buttons: {
@califat
califat / index.html
Created June 17, 2017 09:02 — forked from anonymous/index.html
Pure JS Div Drag
<div id='container'>Drag the blue box around</div>
<div id='slider'></div>
@califat
califat / index.html
Created June 17, 2017 09:02 — forked from anonymous/index.html
Pure JS drag and drop functionality.
<!--First Drop Target-->
<h2>Drag my blocks panel to panel!</h2>
<div data-drop-target="true">
<div id="box1" draggable="true" class="box navy"></div>
<div id="box2" draggable="true" class="box red"></div>
<div id="box3" draggable="true" class="box green"></div>
<div id="box4" draggable="true" class="box orange"></div>
<div id="box5" draggable="true" class="box navy"></div>
<div id="box6" draggable="true" class="box red"></div>
<div id="box7" draggable="true" class="box green"></div>
@califat
califat / index.html
Created June 17, 2017 09:03 — forked from anonymous/index.html
Pure javascript draggable div (Touch and Mouse supported)
<!--http://JunesiPhone.com-->
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div id="slider" ><div id="inner">&#10143;</div></div>
</div>
</body>
@califat
califat / an-endless-hike-on-a-tiny-world.markdown
Created June 29, 2017 05:10 — forked from anonymous/an-endless-hike-on-a-tiny-world.markdown
An endless hike on a tiny world
@califat
califat / index.html
Created July 3, 2017 06:42 — forked from anonymous/index.html
jQuery | Fullscreen Hero Image Slider (Swipe Panels Theme)
<div class="container">
<!-- Panels -->
<div class="swipe">
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%201_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%208_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%209_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%205_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/3%20-%20Interiores%201_o.jpg"></div>
</div>