Skip to content

Instantly share code, notes, and snippets.

<!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
<!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
<!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
<!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
<!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>
<!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
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 = {};
<!-- 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'>
<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>
tryTimes = (f, times, interval) ->
new Promise (resolve, reject) ->
tries = 0
doIt = ->
++tries
try
result = f()
if result
clear()