Skip to content

Instantly share code, notes, and snippets.

@jlank

jlank/GBP.markdown

Created January 29, 2014 00:43
Show Gist options
  • Save jlank/8679540 to your computer and use it in GitHub Desktop.
Save jlank/8679540 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by John Lancaster.
Raw
GBP.markdown

GBP

A Great British Pound coin spinning, created with 3D transforms and animation in CSS. I was reminded of old PS1 loading screens, where they just spun the disc forever, and never actually loaded a game. Perhaps that was just my experience.

Webkit only for now, just because.

A Pen by John Lancaster on CodePen.

License.

Raw
index.html
<!-- The New Coin -->
<div class="container">
<div class="coin2">
<div class="front"></div>
<div id="object">
<span>some text</span>
</div>
</div>
<span id="btn" class="purse flipcard">
<div class="coin">
<div class="front"></div>
<div class="back"></div>
<div class="side">
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
</div>
</div>
</span>
<a href="#" id="slideUpBtn" class="button">Slide Up &#8593;</a>
<div id="transition_events">
<h5>Events</h5>
<ul>
</ul>
</div>
</div>
<!-- The Original Coin
<div class="purse">
<div class="coin">
<div class="front"></div>
<div class="back"></div>
<div class="side">
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
</div>
</div>
</div>
-->
Raw
script.js
/*
Add the 'skeleton' class to .coin
for x-ray vision, and to see how
the side of the coin is constructed.
*/
var addTransitionEvent = function(text) {
$("#transition_events ul").append('<li>'+text+' <small class="muted">' + new Date() + '</small></li>');
}
var counter = 0;
var myButton = $('#btn'),
myBox = $('#object');
myButton.mousedown(function() {
myBox.addClass("slideUp");
//myBox.removeClass('hide');
counter++;
addTransitionEvent("Animation complete: " + counter);
$('#object span').html("+" + counter);
});
myBox.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
//myBox.addClass('hide');
myBox.removeClass("slideUp");
});
Raw
style.less
// Settings -------------------
@coin_diam: 160px;
@coin_diam_small: (@coin_diam * 0.94);
@coin_depth: (@coin_diam_small * 0.1);
@spin_speed: 1s;
// Wrapper --------------------
.purse {
height: @coin_diam_small;
width: @coin_diam_small;
position: absolute;
top: 50%; left: 50%;
margin-top: (@coin_diam_small * -0.5);
margin-left: (@coin_diam_small * -0.5);
-webkit-perspective: 1000;
}
// The Coin -------------------
.coin2 {
height: @coin_diam;
width: @coin_diam;
position: absolute;
.front {
position: absolute;
height: @coin_diam;
width: @coin_diam;
border-radius: 50%;
background-size: cover;
}
}
.coin {
height: @coin_diam_small;
width: @coin_diam_small;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50%;
-webkit-animation: spin @spin_speed infinite;
-webkit-animation-timing-function: linear;
// Faces --------------------
.front,
.back {
position: absolute;
height: @coin_diam_small;
width: @coin_diam_small;
border-radius: 50%;
background-size: cover;
}
.front {
-webkit-transform: translateZ((@coin_depth / 2));
// Images are included at the end...
}
.back {
-webkit-transform: translateZ((@coin_depth / -2)) rotateY(180deg);
// Images are included at the end...
}
// The Side -----------------
// Reveal the ‘secret’ by adding
// .skeleton to the coin element.
.side {
// How many facets you want
@facets: 32;
// How many spokes you need
@spokes: (@facets / 2);
// Help figure out the length of each facet
@degs: sin( pi() / (@facets));
// Get the length
@facet_length: (@coin_diam_small * @degs);
-webkit-transform: translateX( (@coin_diam_small * 0.45) );
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
// Structural Component
.spoke {
height: (@coin_diam_small);
width: (@coin_depth);
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
// The Facets
&:before,
&:after {
content: '';
display: block;
height: @facet_length;
width: (@coin_depth);
position: absolute;
-webkit-transform: rotateX(((180deg - (360 / @facets)) / 2)); // Get the right angle
background: hsl(42, 52%, 68%);
background: linear-gradient(
to bottom,
hsl(42, 60%, 75%) 0%,
hsl(42, 60%, 75%) 74%,
hsl(42, 40%, 60%) 75%,
hsl(42, 40%, 60%) 100%
);
background-size: 100% ((@facets * @facet_length) / 144);
}
// One at each end
&:before {
-webkit-transform-origin: top center;
}
&:after {
bottom: 0;
-webkit-transform-origin: center bottom;
}
}
// This is a loop that positions the spokes
.make_sides(@index) when (@index > 0) {
.spoke:nth-child(@{index}) {
-webkit-transform:
rotateY(90deg)
rotateX( (180deg / (@spokes)) * @index);
}
.make_sides(@index - 1);
}
// This is the loop happening
.make_sides(@spokes);
}
}
// Body, obviously
body {
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
// Just an animation
@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
}
}
// The images...
.coin .front {
background-image: url("http://i.imgur.com/nNthhn7.png");
}
.coin2 .front {
background-image: url("http://i.imgur.com/nNthhn7.png");
}
.coin .back {
background-image: url("http://i.imgur.com/2IGwQpx.png");
}
// bounce css: http://jsfiddle.net/GEEtx/
.container .coin2{
height: @coin_diam;
width: @coin_diam;
position: absolute;
top: 50%; left: 50%;
margin-top: (@coin_diam * -0.5);
margin-left: (@coin_diam * -0.5);
-webkit-perspective: 1000;
z-index:1000;
}
.flipcard{
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
}
//.allowhover:hover{
#btn:active {
//.flip {
-moz-animation-name: bounce;
-moz-animation-duration: .5s;
-moz-animation-iteration-count: 1 ;
-moz-animation-direction: normal;
-webkit-animation-name: bounce;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1 ;
-webkit-animation-direction: normal;
}
@-moz-keyframes bounce {
25% { top:7px; }
45% { top:40px; }
64% { top:19px; }
76% { top:40px; }
96% { top: 25px opacity:95; }
100% { top:40px; opacity:0; }
}
@-webkit-keyframes bounce {
25% { top:7px; }
45% { top:40px; }
64% { top:19px; }
76% { top:40px; }
96% { top: 25px opacity:95; }
100% { top:40px; opacity:0; }
}
#object span{
color: green;
font-size: 30px;
font-family: Comic Sans, Comic Sans MS;
position: relative;
left: 40%;
top: -45px;
}
// click css http://stackoverflow.com/questions/18376815/trigger-animation-on-element-click-in-pure-css
// slide up: http://www.justinaguilar.com/animations/css/animations.css
/*
==============================================
slideUp
==============================================
*/
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%); opacity: 0;
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%); opacity: 0;
}
}
#object{
visibility: hidden;
}
.hide {
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment