Skip to content

Instantly share code, notes, and snippets.

@Kaoschuks

Kaoschuks/index.haml

Created August 20, 2021 17:15
Show Gist options
  • Save Kaoschuks/65929e1018d9b9c97c97d1ba698988fe to your computer and use it in GitHub Desktop.
Save Kaoschuks/65929e1018d9b9c97c97d1ba698988fe to your computer and use it in GitHub Desktop.
Download ZIP
Warp Drive! A pure CSS 3D Radial Menu
Raw
index.haml
.grain
.intro
.center
.core
.outer_one
-(1..36).each do
.outer_one__piece
.outer_two
-(1..36).each do
.outer_two__piece
.outer_three
-(1..36).each do
.outer_three__piece
.outer_four
-(1..36).each do
.outer_four__piece
.outer_five
-(1..36).each do
.outer_five__piece
.pieces
.future_ui__piece
%span Warp drive
.line
.tip
Yes, commander!
.future_ui__piece
%span Teleport
.line
.tip
Beam me up!
.future_ui__piece
%span Fusion core
.line
.tip
Engineering!
.future_ui__piece
%span Laser target
.line
.tip
Charge laz0rs!
.future_ui__piece
%span Shields
.line
.tip
Status report!
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
.future_ui__piece.blank
Raw
script.js
// Chrome only for the tme being!
Raw
style.scss
/* Variables */
// Core
$core_width: 50px;
$core_color:#de0b46;
$core_glow:0px 0px 70px 20px #de0b46;
// Outer 1
$outer_one_offset: 120px;
$outer_one_width: 10px;
$outer_one_height: 30px;
$outer_one_color: #de0b46;
$outer_one_glow: 0px 0px 20px 0px #de0b46;
// Outer 2
$outer_two_offset: 290px;
$outer_two_width: 28px;
$outer_two_height: 5px;
$outer_two_color: #de0b46;
$outer_two_glow: 0px 0px 20px 0px #de0b46;
// Outer 3
$outer_three_offset: 440px;
$outer_three_width: 55px;
$outer_three_height: 5px;
$outer_three_color: #55E2F9;
$outer_three_glow: 0px 0px 20px 0px #55E2F9;
// Outer 4
$outer_four_offset: 440px;
$outer_four_width: 6px;
$outer_four_height: 5px;
$outer_four_color: #de0b46;
$outer_four_glow: 0px 0px 20px 0px #de0b46;
// Outer 5
$outer_five_offset: 410px;
// Menu items
$menu_offset: 540px;
$menu_height: 20px;
$menu_color: transparent;
$menu_glow: 0px 0px 25px rgba(222, 11, 70, 0.27);
/* Placeholders */
%center{
left:0;
right:0;
top:50%;
position:absolute;
margin:auto;
transform:translateY(-50%);
}
%decal{
position:absolute;
width:$core_width;
height:$core_width;
left:50%;
}
%fade_loop{
@for $i from 1 through 36{
&:nth-of-type(#{$i}){
animation:fade 5s ($i/10 + 0s) infinite;
}
}
}
%fade_loop_alt{
@for $i from 1 through 36{
&:nth-of-type(#{$i}){
animation:fade 7s ($i/10 + 0s) infinite;
}
}
}
%circ_loop{
position: absolute;
@for $i from 1 through 36{
&:nth-of-type(#{$i}){
border-radius:2px;
transform:rotateZ($i*10 + (0deg));
}
}
}
%circ_loop_quart{
position: absolute;
@for $i from 1 through 36{
&:nth-of-type(#{$i}){
border-radius:2px;
transform:rotateZ($i*4 + (0deg));
}
}
}
%circ_loop_quart_alt{
position: absolute;
@for $i from 1 through 36{
&:nth-of-type(#{$i}){
border-radius:2px;
transform:rotateZ($i*4 + (0deg) - 180);
}
}
}
/* Styles */
.intro{
}
body{
height:100vh;
animation:intro_box 1s 1s forwards;
opacity:0;
perspective-origin: 50% -10%;
margin:0;
padding:0;
font-family:montserrat;
perspective:800;
background: radial-gradient(ellipse at top left, rgba(222, 11, 70, 0.26) -160%, rgba(255, 255, 255, 0) 103%), -webkit-radial-gradient(center, ellipse cover, #0C1019 0%, #0B0B0E 100%);
overflow:hidden;
.grain{
transform:scale(1) !important;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
pointer-events: none;
top: 0;
opacity: 1;
bottom: 0;
}
.center{
@extend %center;
transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.9);
height:$core_width;
width:$core_width;
animation:wiggle 20s infinite linear;
.core{
width:$core_width;
height:$core_width;
border-radius:$core_width;
background:$core_color;
box-shadow:$core_glow;
}
.outer_one{
@extend %decal;
transform:translateX(-$outer_one_offset) translateY(-50%);
&__piece{
width: $outer_one_width;
height: $outer_one_height;
background: $outer_one_color;
box-shadow:$outer_one_glow;
transform-origin: $outer_one_offset 0px;
@extend %circ_loop;
}
}
.outer_two{
@extend %decal;
transform:translateX(-$outer_two_offset) translateY(-50%);
&__piece{
width: $outer_two_width;
height: $outer_two_height;
background: $outer_two_color;
box-shadow:$outer_two_glow;
transform-origin: $outer_two_offset 0px;
@extend %circ_loop;
@extend %fade_loop;
}
}
.outer_three{
@extend %decal;
transform:translateX(-$outer_three_offset) translateY(-50%);
&__piece{
width: $outer_three_width;
height: $outer_three_height;
background: $outer_three_color;
box-shadow:$outer_three_glow;
transform-origin: $outer_three_offset 0px;
@extend %circ_loop_quart;
@extend %fade_loop;
}
}
.outer_four{
@extend %decal;
transform:translateX(-$outer_four_offset) translateY(-50%);
&__piece{
width: $outer_four_width;
height: $outer_four_height;
background: $outer_four_color;
box-shadow:$outer_four_glow;
transform-origin: $outer_four_offset 0px;
@extend %circ_loop_quart_alt;
@extend %fade_loop_alt;
}
}
.outer_five{
@extend %decal;
transform:translateX(-$outer_five_offset) translateY(-50%);
&__piece{
width: $outer_four_width;
height: $outer_four_height;
background: $outer_four_color;
box-shadow:$outer_four_glow;
transform-origin: $outer_five_offset 0px;
@extend %circ_loop_quart_alt;
@extend %fade_loop_alt;
}
}
.pieces{
@extend %decal;
transform:translateX($menu_offset) translateY(-50%);
.tip{
font-size: 17px;
position: absolute;
left: 105%;
opacity:0;
transition:all .2s .3s;
font-weight: 400;
color: #85DFE4;
width: 100%;
top: 70px;
}
span{
position: absolute;
top: 19px;
width: 270px;
LEFT: 34PX;
transform: translateZ(-770px) rotateZ(0deg);
transition:all .2s .1s;
}
.line{
width: 0px;
height: 5px;
left: -547px;
transform: rotatez(4deg);
top: 17px;
background: #DE0B46;
position: absolute;
opacity:0;
}
.future_ui__piece{
border: 3px solid #DE0B46;
position: absolute;
font-weight:900;
padding:30px;
font-size:30px;
box-shadow: 0px 0px 25px rgba(222, 11, 70, 0.27);
transform-style: preserve-3d;
transition: all 1s .1s;
color: white;
text-align: left;
@for $i from 1 through 36{
&:nth-of-type(#{$i}){
transform:rotateZ($i*10 + (0deg) - 55) rotateY(0deg);
width: 220 + random(73) + px;
&:hover{
cursor:pointer;
color:white;
animation:blink .4s .4s;
background:#DE0B46;
transform:rotate($i*10 + (0deg) - 55) translatex(20px);
box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
span{
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
left:240px;
transform: translateZ(100px) rotateZ(0deg);
}
.tip{
opacity:1;
left: 110%;
}
.line{
opacity:1;
width:547px;
transition:all .4s .2s;
}
}
}
}
height: $menu_height;
background: $menu_color;
color:white;
border-radius:100px !important;
box-shadow:$menu_glow;
transform-origin: - $menu_offset 0px;
@extend %circ_loop;
}
.blank{
opacity:0.1;
background:none;
pointer-events:none;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.27);
border:6px solid #3D4B6D !important;
}
}
}
}
/* animations */
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes fade{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@keyframes blink{
0%{opacity:1}
25%{opacity:0}
50%{opacity:1}
75%{opacity:0}
100%{opacity:1}
}
@keyframes in{
0%{opacity:0}
100%{opacity:1}
}
@keyframes inalt{
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
@keyframes wiggle{
0%{transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);}
25%{transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);}
50%{transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);}
75%{transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);}
100%{transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);}
}
@keyframes intro_box{
0%{opacity:0;transform:scale(0)}
20%{opacity:1;transform:scale(1.2)}
40%{transform:scale(0.89)}
60%{transform:scale(1.04)}
80%{transform:scale(0.98)}
100%{opacity:1;transform:scale(1)}
}
Raw
warp-drive-a-pure-css-3d-radial-menu.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment