Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
296 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
(function () { | ||
'use strict'; | ||
var stems = document.querySelectorAll( '.stem' ); | ||
var flowers = document.querySelectorAll( '.flower' ); | ||
var colours = [ | ||
'deeppink', | ||
'black', | ||
'purple', | ||
'brown', | ||
'skyblue', | ||
'pink', | ||
'cornflowerblue', | ||
'orange', | ||
'darkseagreen', | ||
'gold', | ||
'maroon', | ||
'midnightblue', | ||
'yellow', | ||
'#003f07' | ||
]; | ||
var currentColour = 0; | ||
|
||
function toggleClass( element, className ) { | ||
if ( element.classList.contains( className ) ) { | ||
element.classList.remove( className ); | ||
} else { | ||
element.classList.add( className ); | ||
} | ||
} | ||
|
||
function cycleColour( direction ) { | ||
direction = direction || '+'; | ||
|
||
if ( direction === '-' ) { | ||
currentColour += 1; | ||
} else { | ||
currentColour -= 1; | ||
} | ||
|
||
if ( currentColour === -1 ) { | ||
currentColour = colours.length -1; | ||
} else if ( currentColour === colours.length ) { | ||
currentColour = 0; | ||
} | ||
|
||
return currentColour; | ||
} | ||
|
||
window.addEventListener( 'keyup', function ( event ) { | ||
var colour; | ||
var key = event.which; | ||
var keys = { | ||
z: 90, | ||
x: 88, | ||
c: 67, | ||
left: 37, | ||
right: 39 | ||
}; | ||
|
||
|
||
if ( key === keys.z ) { | ||
toggleClass( stems[ 0 ], 'alive' ); | ||
} else if ( key === keys.x ) { | ||
toggleClass( stems[ 1 ], 'alive' ); | ||
} else if ( key === keys.c ) { | ||
toggleClass( stems[ 2 ], 'alive' ); | ||
} else if ( key === keys.left ) { | ||
colour = cycleColour( '+' ); | ||
[].forEach.call( flowers, function ( flower ) { | ||
flower.style.backgroundColor = colours[ colour ]; | ||
}); | ||
} else if ( key === keys.right ) { | ||
colour = cycleColour( '-' ); | ||
[].forEach.call( flowers, function ( flower ) { | ||
flower.style.backgroundColor = colours[ colour ]; | ||
}); | ||
} | ||
}); | ||
|
||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
/** | ||
* StyleFix 1.0.3 & PrefixFree 1.0.7 | ||
* @author Lea Verou | ||
* MIT license | ||
*/(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=(/^[a-z]{3,10}:/.exec(i)||[""])[0],o=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(i)||[""])[0],u=/^([^?]*)\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()};l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^\/\//.test(n)?'url("'+s+n+'")':/^\//.test(n)?'url("'+o+n+'")':/^\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var l=document.createElement("style");l.textContent=n;l.media=t.media;l.disabled=t.disabled;l.setAttribute("data-href",t.getAttribute("href"));a.insertBefore(l,t);a.removeChild(t);l.media=t.media}};try{f.open("GET",r);f.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){f=new XDomainRequest;f.onerror=f.onprogress=function(){};f.onload=l;f.open("GET",r);f.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}};(function(){setTimeout(function(){t('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()})();(function(e){function t(e,t,r,i,s){e=n[e];if(e.length){var o=RegExp(t+"("+e.join("|")+")"+r,"gi");s=s.replace(o,i)}return s}if(!window.StyleFix||!window.getComputedStyle)return;var n=window.PrefixFree={prefixCSS:function(e,r,i){var s=n.prefix;n.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a<i.length;a++)o(i[a]);else for(var f in i)o(StyleFix.deCamelCase(f));var l={uses:0};for(var c in e){var h=e[c];l.uses<h&&(l={prefix:c,uses:h})}n.prefix="-"+l.prefix+"-";n.Prefix=StyleFix.camelCase(n.prefix);n.properties=[];for(var a=0;a<t.length;a++){var f=t[a];if(f.indexOf(n.prefix)===0){var p=f.slice(n.prefix.length);u(p)||n.properties.push(p)}}n.Prefix=="Ms"&&!("transform"in s)&&!("MsTransform"in s)&&"msTransform"in s&&n.properties.push("transform","transform-origin");n.properties.sort()})();(function(){function i(e,t){r[t]="";r[t]=e;return!!r[t]}var e={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};e["repeating-linear-gradient"]=e["repeating-radial-gradient"]=e["radial-gradient"]=e["linear-gradient"];var t={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width"};n.functions=[];n.keywords=[];var r=document.createElement("div").style;for(var s in e){var o=e[s],u=o.property,a=s+"("+o.params+")";!i(a,u)&&i(n.prefix+a,u)&&n.functions.push(s)}for(var f in t){var u=t[f];!i(f,u)&&i(n.prefix+f,u)&&n.keywords.push(f)}})();(function(){function s(e){i.textContent=e+"{}";return!!i.sheet.cssRules.length}var t={":read-only":null,":read-write":null,":any-link":null,"::selection":null},r={keyframes:"name",viewport:null,document:'regexp(".")'};n.selectors=[];n.atrules=[];var i=e.appendChild(document.createElement("style"));for(var o in t){var u=o+(t[o]?"("+t[o]+")":"");!s(u)&&s(n.prefixSelector(u))&&n.selectors.push(o)}for(var a in r){var u=a+" "+(r[a]||"");!s("@"+u)&&s("@"+n.prefix+u)&&n.atrules.push(a)}e.removeChild(i)})();n.valueProperties=["transition","transition-property"];e.className+=" "+n.prefix;StyleFix.register(n.prefixCSS)})(document.documentElement);(function(a){if(a)a.events={DOMNodeInserted:function(b){var b=b.target,c=b.nodeName;b.nodeType==1&&(/link/i.test(c)?a.link(b):/style/i.test(c)?a.styleElement(b):b.hasAttribute("style")&&a.styleAttribute(b))},DOMAttrModified:function(b){b.attrName==="style"&&(document.removeEventListener("DOMAttrModified",a.events.DOMAttrModified,false),a.styleAttribute(b.target),document.addEventListener("DOMAttrModified",a.events.DOMAttrModified,false))}},document.addEventListener("DOMContentLoaded",function(){document.addEventListener("DOMNodeInserted", | ||
a.events.DOMNodeInserted,false);document.addEventListener("DOMAttrModified",a.events.DOMAttrModified,false)},false)})(window.StyleFix); | ||
(function(a){if(a&&window.CSSStyleDeclaration)for(var b=0;b<a.properties.length;b++){var c=StyleFix.camelCase(a.properties[b]),d=a.prefixProperty(c),e=CSSStyleDeclaration.prototype,f=function(a){return function(){return this[a]}}(d),d=function(a){return function(b){this[a]=b}}(d);Object.defineProperty?Object.defineProperty(e,c,{get:f,set:d,enumerable:true,configurable:true}):e.__defineGetter__&&(e.__defineGetter__(c,f),e.__defineSetter__(c,d))}})(window.PrefixFree);(function($, self){ | ||
|
||
if(!$ || !self) { | ||
return; | ||
} | ||
|
||
for(var i=0; i<self.properties.length; i++) { | ||
var property = self.properties[i], | ||
camelCased = StyleFix.camelCase(property), | ||
PrefixCamelCased = self.prefixProperty(property, true); | ||
|
||
$.cssProps[camelCased] = PrefixCamelCased; | ||
} | ||
|
||
})(window.jQuery, window.PrefixFree);/** | ||
* -prefix-free plugin for rudimentary CSS variables support | ||
* @author Lea Verou | ||
*/ | ||
|
||
(function() { | ||
|
||
if(!window.StyleFix || !window.PrefixFree) { | ||
return; | ||
} | ||
|
||
// Feature test | ||
var prefix = PrefixFree.prefix, dummy = document.createElement('_').style; | ||
|
||
dummy.cssText = 'var-foo: red; background: var(foo);'; | ||
|
||
if (dummy.background) { // Unprefixed support | ||
return; | ||
} | ||
|
||
dummy.cssText = prefix + 'var-foo: red; background: ' + prefix + 'var(foo);'; | ||
|
||
if (dummy.background) { // Prefixed support | ||
|
||
StyleFix.register(function(css) { | ||
// var- properties | ||
css = css.replace(/(^|\{|\s|;)var-([\w-]+)\s*:/gi, '$1' + prefix + 'var-$2:'); | ||
|
||
// var() function | ||
return css.replace(/(\s|:|,)var\s*\(/gi, '$1' + prefix + 'var('); | ||
}); | ||
|
||
return; | ||
} | ||
|
||
// If we’re here, there’s no support. | ||
// But fear not young padawan, cause it’s time foooor… —wait for it— polyfilling! | ||
|
||
var vars = {}; | ||
|
||
StyleFix.register(function(css) { | ||
// We need to handle get and set at the same time, to allow overwriting of the same variable later on | ||
return css.replace(/(?:^|\{|\s|;)var-(?:[\w-]+)\s*:\s*[^;}]+|(\s|:|,)var\s*\(([\w-]+)\)/gi, function($0, before, id) { | ||
var declaration = $0.match(/(^|\{|\s|;)var-([\w-]+)\s*:\s*([^;}]+)/i); | ||
|
||
if (declaration) { | ||
vars[declaration[2]] = declaration[3]; | ||
} | ||
else { | ||
// Usage | ||
return before + (vars[id] || 'initial'); | ||
} | ||
}); | ||
}); | ||
|
||
|
||
})();/** | ||
* Polyfill for the vw, vh, vm units | ||
* Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/ | ||
* @author Lea Verou | ||
*/ | ||
|
||
(function() { | ||
|
||
if(!window.StyleFix) { | ||
return; | ||
} | ||
|
||
// Feature test | ||
var dummy = document.createElement('_').style, | ||
units = ['vw', 'vh', 'vmin', 'vmax'].filter(function(unit) { | ||
dummy.width = ''; | ||
dummy.width = '10' + unit; | ||
return !dummy.width; | ||
}); | ||
|
||
if(!units.length) { | ||
return; | ||
} | ||
|
||
StyleFix.register(function(css) { | ||
var w = innerWidth, h = innerHeight; | ||
|
||
return css.replace(RegExp('\\b(\\d+)(' + units.join('|') + ')\\b', 'gi'), function($0, num, unit) { | ||
switch (unit) { | ||
case 'vw': | ||
return num * w / 100 + 'px'; | ||
case 'vh': | ||
return num * h / 100 + 'px'; | ||
case 'vmin': | ||
return num * Math.min(w,h) / 100 + 'px'; | ||
case 'vmax': | ||
return num * Math.max(w,h) / 100 + 'px'; | ||
} | ||
}); | ||
}); | ||
|
||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
background: linear-gradient( skyblue, blue ); | ||
height: 100em; | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
} | ||
|
||
.flower, | ||
.sun { | ||
position: absolute; | ||
right: 20px; | ||
top: 50px; | ||
height: 100px; | ||
width: 100px; | ||
border-radius: 100px; | ||
background: yellow; | ||
border: 50px dotted #ff6633; | ||
box-sizing: content-box; | ||
box-shadow: 0 0 1000px white; | ||
} | ||
|
||
.grass { | ||
height: 20%; | ||
width: 100%; | ||
background: linear-gradient( darkgreen, green ); | ||
border-top: 1px solid darkgreen; | ||
box-shadow: 0 0 5px darkgreen; | ||
position: absolute; | ||
bottom: 0; | ||
left: 0; | ||
right: 0; | ||
} | ||
|
||
.stem { | ||
position: absolute; | ||
left: 50%; | ||
margin-left: -7.5px; | ||
background: linear-gradient( to left, lime, limegreen ); | ||
border: 1px solid darkgreen; | ||
border-bottom: none; | ||
bottom: 10%; | ||
width: 15px; | ||
height: 20px; | ||
transition: height 4.741s ease-in-out; | ||
} | ||
|
||
.stem.alive, | ||
.stem:active, | ||
.stem:hover { | ||
height: 200px; | ||
} | ||
|
||
.flower { | ||
border-color: white; | ||
border-width: 15px; | ||
box-shadow: 0 0 1px black; | ||
top: -30px; | ||
left: -25px; | ||
height: 30px; | ||
width: 30px; | ||
background-color: deeppink; | ||
transition: height 2s 3.4s ease-in-out, | ||
width 2s 3.4s ease-in-out, | ||
left 2s 3.4s ease-in-out, | ||
border-width 2s 3.4s ease-in-out, | ||
top 2s 3.4s ease-in-out, | ||
background-color .5s ease-in-out, | ||
-webkit-transform 2s 3.4s ease-in-out; | ||
} | ||
|
||
.alive .flower, | ||
.stem:hover .flower, | ||
.stem:active .flower { | ||
height: 60px; | ||
width: 60px; | ||
left: -55px; | ||
top: -60px; | ||
border-width: 30px; | ||
} | ||
|
||
#first { | ||
margin-left: -75px; | ||
margin-bottom: -20px; | ||
} | ||
|
||
#third { | ||
margin-left: 100px; | ||
margin-bottom: -10px; | ||
} |