Skip to content

Commit

Permalink
Add files
Browse files Browse the repository at this point in the history 
Signed-off-by: Victor Coulon <victa.talawa@gmail.com>
  • Loading branch information
@Victa
Victa committed Dec 3, 2011
1 parent 13b7238 commit 5889e46
Show file tree
Hide file tree
Showing 4 changed files with 797 additions and 0 deletions.
45 changes: 45 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Path menu in pure CSS3</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/app.css" />
</head>
<body>
<section id="main">
<h1>Path menu in pure CSS3</h1>
<p>I'm fall in love with the new UI of <a href="http://path.com">Path</a>. I really love the user interaction design
like the "add menu". So, as I'm a front-end developer, I tried to recreate the same thing on my browser.</p>
<p>Firstly, I posted a video of the effect on <a href="http://dribbble.com/shots/339001-Path-menu-recreated-in-css3">dribbble</A> and now, I share my code.</p>
<h2>An experiment in CSS</h2>
<p>I made the choice to do this with only html/css3 and no images whatsoever.<br>
There is <strong>0 line of javascript</strong>.<br>
I'm aware that you can do the same with a bit of javascript to be compliant with others browsers. But, It was not my goal :)</p>
<h2>How was this made?</h2>
<p>To calculate the coordinates of items and generate the animation, I used Sass+Compass.<br>
I used a math formula in order to add the items's position on the arc of circle. So, you can add or remove items without rewrite the code.<br>
Finally, I generate a keyframe animation for each item. To be honnest, I had a lot of problems to use keyframes and Sass.
It's for this reason, that it's only compliant with Webkit.</p>
<p>You can fork <strong><a href="http://github.com/victa/path-menu">the source</a></strong> on github !</p>
<p><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="_victa">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></p>
<hr />
<p>Follow <a href="http://twitter.com/_victa">me</a> on Twitter! And ask any questions you want or send comments.</p>
<p><small><strong>Note:</strong> This only works in Webkit (better result in Safari).</small></p>
</section>

<input type="checkbox" id="menu" class="menuControl" checked="checked"> <!-- Hidden -->
<label for="menu">
<div class="circle-container">
<button class="circle">&#10006;</button>
</div>
</label>
<ul class="items">
<li>&#9733;</li>
<li>&#9733;</li>
<li>&#9733;</li>
<li>&#9733;</li>
<li>&#9733;</li>
<li>&#9733;</li>
</ul>
</body>
</html>
78 changes: 78 additions & 0 deletions sass/_layout.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
// General
body{
background:whiteSmoke;
font:13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
font-weight:400;
color:#333;
text-shadow:0 1px 0 white;
}
#main {width:600px;margin:12px 0 0 300px;}
h1,h2{font-size:24px;margin-bottom:16px;color: #3A3A3A;line-height: 1.4;font-weight: bold;}
h2{font-size:16px;padding-top:8px;}
p,h2{margin-bottom:8px;}
p:last-of-type{margin-top:-6px;}
small{font-size: 86.7%;color:#9C9A9A;}
hr{height:0px;border:0px;border-top:1px solid #CCC;border-bottom:1px solid white;background:transparent;margin:24px 0;}
a,a:visited { color: #84B9D3;font-weight:bold;text-decoration:none; }
a:hover { text-decoration:underline; }
strong{font-weight:bold;}

// Label + checkbox tricks
#menu{display:none;}
#menu:checked ~ label .circle {
@include transform(rotate(0deg));
}


// Red button
.circle-container {
position:fixed;bottom:10px;left:10px;height:40px;width:40px;
@include box-shadow(0 0 10px rgba(0,0,0,0.7));
@include border-radius(20px);
.circle {
position:fixed;bottom:10px;left:10px;
height:40px;width:40px;
cursor:pointer;
z-index:2;
border:0px;
font-size:30px;
line-height:40px;
text-align:center;
color:white;
padding:0px;
@include transition(all .2s linear);
@include linear-gradient(color-stops(#e85738, #cb2c16));
@include box-shadow(0 0 0 4px white, 0 0 0 5px rgba(0,0,0,0.3));
@include border-radius(20px);
@include transform-style(preserve-3d);
@include appearance(none);
@include transform(rotate(45deg));
&:active:before{
content:"";
display:block;
position:absolute;
top:-5px;left:-5px;right:-5px;bottom:-5px;
background:rgba(0,0,0,0.3);
pointer-events:none;
@include border-radius(25px);
}
}
}

// Items
.items li {
position:fixed;
bottom:20px;left:20px;
display:block;
height:26px;width:26px;
color:white;
text-align:center;
line-height:26px;
font-size:18px;
@include box-shadow(0 0 0 4px white, 0 0 0 5px rgba(0,0,0,0.3), inset 0 0 1px black);
@include linear-gradient(color-stops(#433f3c, #44403d));
@include border-radius(13px);
@include transform-style(preserve-3d);
}
76 changes: 76 additions & 0 deletions sass/app.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
@import "compass/reset","compass/css3";
@import "layout";

// ============== Vars =====================
$items: 6; // number of items
$arc: 90; // arc of the circle
$angle: $arc/$items; // angle between items
$space:170; // a value in pixel. It's the space between the red circle and the items
$circleCenterX: 30; // the X coord of the red circle center
$circleCenterY: 30; // the Y coord of the red circle center
$disappearDelay: 50;

// Generate items position + keyframes animation
@for $i from 1 through $items {
// I'm not really good in math, so I suppose that they have a better way to calcul coordinates :)
$rad: ( $angle * ($i - 1) + $angle/2 ) * (pi()/180);
$x:round(($circleCenterX + $space) * cos($rad) );
$y:round(-($circleCenterY + $space) * sin($rad) );

// Coords for the rebound during the animation
$xm: round($x * 1.15);
$ym: round($y * 1.15);

$disappearDelay: $disappearDelay * 1.35;

// CSS checkbox + label tricks
#menu:checked ~ .items li:nth-child(#{$i}) {
-webkit-animation-name: "appear-'#{$i}'";
-webkit-animation-duration: 240ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: (20 * $i)+ms;
}

#menu:not(:checked) ~ .items li:nth-child(#{$i}) {
-webkit-animation-name: "disappear-'#{$i}'";
-webkit-animation-duration: (320 + $disappearDelay)+ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}

// Generate keyframes
@-webkit-keyframes "appear-'#{$i}'" {
0% {
-webkit-transform:translate3d(0, 0, 0px) rotateZ(270deg);
-webkit-animation-timing-function:cubic-bezier(1,.6,.57,.75);
}
80% {
-webkit-animation-timing-function:cubic-bezier(.45,.97,.51,.78);
-webkit-transform:translate3d($xm+px, $ym+px,0px) rotateZ(0deg);
}
100% {
-webkit-transform:translate3d($x+px, $y+px,0px);
}
}

@-webkit-keyframes "disappear-'#{$i}'" {
0% {
-webkit-transform:translate3d($x+px, $y+px,0px) rotateZ(0deg);
-webkit-animation-timing-function:cubic-bezier(1,.6,.57,.75);
}
70% {
-webkit-transform:translate3d($xm+px, $ym+px,0px) rotateZ(360deg);
-webkit-animation-timing-function:cubic-bezier(.45,.97,.51,.78)
}
100% {
-webkit-transform:translate3d(0,0,0px) rotateZ(540deg);
}
}

}





Loading

0 comments on commit 5889e46

Please sign in to comment.