cristinecula’s gists

cristinecula / index.html

Created August 2, 2019 12:12

JS Bin // source https://jsbin.com/jurudar

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
	</head>
	<body>
	Using web animations next polyfill + workaround

cristinecula / index.html

Created August 2, 2019 12:12

JS Bin // source https://jsbin.com/dehowowuso

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
	</head>
	<body>
	Using web animations polyfill

cristinecula / index.html

Created August 2, 2019 12:04

JS Bin // source https://jsbin.com/wubifok

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
	</head>
	<body>
	Using web animations next polyfill

cristinecula / index.html

Created August 2, 2019 12:02

JS Bin // source https://jsbin.com/wubifok

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
	</head>
	<body>
	Using web animations polyfill

cristinecula / index.html

Created August 2, 2019 12:00

JS Bin // source https://jsbin.com/wubifok

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	Native web animations
	<script>

cristinecula / index.html

Created August 2, 2019 11:58

JS Bin // source https://jsbin.com/cozuyahiyo

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	Test
	<script id="jsbin-javascript">

cristinecula / css-var-polyfill.js

Created May 13, 2017 06:54

CSS Variable Polyfill

	/*
	TODO:
	- Option to wait to apply anything until all <link>s are parsed or inject what we have and update as each <link> returns
	*/
	var cssVarPoly = {
	init: function() {
	if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) {
	return;
	}
	cssVarPoly.ratifiedVars = {};

cristinecula / component.html

Created March 27, 2017 05:39

	<!-- this binds `sy` to the current value of `window.scrollY` -->
	<:Window bind:scrollY='sy' on:orientationchange='set({angle: event.orientation.angle})'/>
	{{angle}}
	<!-- try changing the values that `sy` is multiplied by -
	values closer to 0 appear further away -->
	<div class='parallax-container'>
	<img style='transform: translate(0,{{-sy * 0.2}}px)' src='http://www.firewatchgame.com/images/parallax/parallax0.png'>
	<img style='transform: translate(0,{{-sy * 0.3}}px)' src='http://www.firewatchgame.com/images/parallax/parallax1.png'>
	<img style='transform: translate(0,{{-sy * 0.4}}px)' src='http://www.firewatchgame.com/images/parallax/parallax3.png'>
	<img style='transform: translate(0,{{-sy * 0.5}}px)' src='http://www.firewatchgame.com/images/parallax/parallax5.png'>

cristinecula / component.html

Created March 21, 2017 09:27

	<form>
	<label>
	<input type="radio" bind:group='interval' name="interval" value="monthly">
	<span>Monthly</span>
	</label>
	<label>
	<input type="radio" bind:group='interval' name="interval" value="yearly">
	<span>Yearly<span>Save 20%</span></span>
	</label>
	</form>

cristinecula / try-times.coffee

Created September 6, 2016 05:38

Cristian Necula cristinecula