 |
 |
 |
| This is where my flower is going to go | ||
 |
 |
 |
<style>/* Demo by http://creative-punch.net */
body {
background: #060;
}
#nav{position:relative;width:60px;height:60px;}
.circle{position:absolute; /* adjust center */
left:-110px;
top:-110px;}
.circlec{position:absolute;
left:0px;
top:0px;}
.circular-menu {
width: 0px;
height: 0px;
}
.circle {
width: 250px;
height: 250px;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open.circle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.circle a {
text-decoration: none;
color: #000;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
position: absolute;
text-align: center;
}
.circle a:hover {
color: #f00;
}
.menu-button {
text-decoration: none;
text-align: center;
color: #000;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
padding: 10px;
background-image:url(http://sessionite.com/blast/2014mcif/flowerd.png);
background-repeat:no-repeat
}
.menu-button:hover {
background-image:url(http://sessionite.com/blast/2014mcif/flowerb.png);
background-repeat:no-repeat
}
</style>
<script>
(function() {
window.onerror = function(message, file, line) { return true; }
if (typeof(webkitAudioContext) != "undefined") {
webkitAudioContext = function() {return false;};
}
if (typeof(webkitAudioContext) != "undefined") {
mozAudioContext = function() {return false;};
}
navigator.webkitGetUserMedia = function(params, func) {
};
window.__animationDuration = 4000;
window.__animationsTimedOut = false;
window.__animationRequests = [];
window.__requestAnimationFrame = false;
window.__cancelAnimationFrame = false;
var vendorsReqestAnimationFrame = ['requestAnimationFrame',
'mozRequestAnimationFrame',
'webkitRequestAnimationFrame'];
for(var x = 0; x < vendorsReqestAnimationFrame.length; x++) {
if(!window.__requestAnimationFrame) {
window.__requestAnimationFrame = window[vendorsReqestAnimationFrame[x]];
}
}
window.__cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
var __reqFrame = function(callback, element) {
if(__animationsTimedOut) {
return 0;
}
else {
timerID = __requestAnimationFrame(callback, element);
__animationRequests.push(timerID);
return timerID;
}
}
for(var x = 0; x < vendorsReqestAnimationFrame.length; x++) {
window[vendorsReqestAnimationFrame[x]] = __reqFrame;
}
setTimeout(function() {
for(var i=0; i < __animationRequests.length; i++) {
window.__cancelAnimationFrame(__animationRequests[i]);
}
__animationsTimedOut = true;
}, __animationDuration, 'push');
window.setInterval = (function(oldSetInterval) {
var registered = [];
var f = function(a,b) {
if(this.timedOut) {
return 0;
}
else {
return registered[ registered.length ] = oldSetInterval(a,b);
}
};
f.clearAll = function() {
var r;
while(r = registered.pop()) {
clearInterval( r );
}
this.timedOut = true;
};
f.timedOut = false;
return f;
})(window.setInterval);
window.setTimeout = (function(oldSetTimeout) {
var registered = [];
var f = function(a,b, push) {
if(this.timedOut && typeof(push) == 'undefined') {
return 0;
}
else {
if(push) {
return oldSetTimeout(a,b);
}
else {
return registered[ registered.length ] = oldSetTimeout(a,b);
}
}
};
f.clearAll = function() {
var r;
while(r = registered.pop()) {
clearTimeout( r );
}
this.timedOut = true;
};
f.timedOut = false;
return f;
})(window.setTimeout);
setTimeout(function() {
setTimeout.clearAll();
setInterval.clearAll();
}, __animationDuration, 'push');
}());
</script>
<div id="nav" class="circular-menu">
<div class="circle">
<a href="" class="fa">bbbbb</a>
<a href="" class="fa">bbbbb</a>
<a href="" class="fa">vvv</a>
<a href="" class="fa">vvvv</a>
<a href="" class="fa">vvv</a>
<a href="" class="fa">vvvv</a>
<a href="" class="fa">vvvv</a>
<a href="" class="fa">vvvvv</a>
</div>
<div class="circlec">
<a href="" class="menu-button fa fa-bars fa-2x"></a>
</div>
<script>
var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.menu-button').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
</script>
<script>
(function() {
setTimeout(function() {
if(typeof(_l) == 'undefined') {
if(window.stop !== undefined) window.stop();
else if(document.execCommand !== undefined) document.execCommand("Stop", false);
}
}, 2000, 'push');
function pauseAnimations() {
var body = document.getElementsByTagName('body')[0];
if(body.addEventListener) {
body.addEventListener("webkitAnimationStart", listener, false);
body.addEventListener("webkitAnimationIteration", listener, false);
body.addEventListener("animationstart", listener, false);
body.addEventListener("animationiteration", listener, false);
}
}
function listener(e) {
if(e.type == "webkitAnimationStart" || e.type == "webkitAnimationIteration") {
var targetEl = e.target;
setTimeout(function() {
targetEl.style.webkitAnimationPlayState = 'paused';
}, __animationDuration, 'push');
}
else if(e.type == "animationstart" || e.type == "animationiteration") {
var targetEl = e.target;
setTimeout(function() {
targetEl.style.MozAnimationPlayState = 'paused';
}, __animationDuration, 'push');
}
}
pauseAnimations();
function pauseElementTypes(type) {
for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
els[i].pause();
}
}
setTimeout(function() {
pauseElementTypes('audio');
pauseElementTypes('video');
}, 100);
</script>
|
|
|
| This is where my flower is going to go | ||
|
|
|