//- ----------
//- I have dreams! Hover on me, and I will chase it, and I will fly!
//- ----------
- var pixels = [
- [".............", ".............", ".............", ".............",
- ".......aa....", ".............", ".............", ".............",
- ".......bb....", ".............", ".............", ".............",
- "............."],
- [".............", ".............", ".............", ".............",
- ".......2d....", ".............", ".............", ".............",
- ".......2c....", ".............", ".............", ".............",
- "............."],
- [".............", ".............", ".............", ".....111.....",
- ".....111d....", ".....111.....", ".....111.....", ".....111.....",
- ".....111c....", ".....111.....", ".............", ".............",
- "............."],
- [".............", ".............", ".....111.....", ".....111.....",
- ".....111.....", ".....111.....", ".....111.....", ".....111.....",
- ".....111.....", ".....111.....", ".....111.....", ".............",
- "............."],
- [".....fff.....", ".....111.....", ".....111.....", ".....111.....",
- ".....111.....", ".....111.....", ".....1112....", ".....111.....",
- ".....111.....", ".....111.....", ".....111.....", ".....111.....",
- ".....fff....."],
- [".....ggg.....", ".....111.....", ".....111.....", ".....11e.....",
- ".....111.....", ".....111.....", ".....11122...", ".....111.....",
- ".....111.....", ".....11e.....", ".....111.....", ".....111.....",
- ".....ggg....."],
- [".....hhh.....", ".............", ".....111.....", ".....111.....",
- ".....113.....", ".....111.....", ".....111.....", ".....111.....",
- ".....113.....", ".....111.....", ".....111.....", ".............",
- ".....hhh....."],
- [".............", ".............", ".....111.....", ".....11e.....",
- ".....111.....", ".....111.....", ".....111.....", ".....111.....",
- ".....111.....", ".....11e.....", ".....111.....", ".............",
- "............."],
- [".............", ".............", ".............", ".....111.....",
- ".....111.....", ".....111.....", ".....111.....", ".....111.....",
- ".....111.....", ".....111.....", ".............", ".............",
- "............."],
- [".............", ".............", ".............", ".............",
- ".....111.....", ".....111.....", ".....111.....", ".....111.....",
- ".....111.....", ".............", ".............", ".............",
- "............."],
- [".............", ".............", ".............", ".............",
- ".............", "......4......", "......4......", "......4......",
- ".............", ".............", ".............", ".............",
- "............."],
- [".............", ".............", ".............", ".............",
- ".............", ".............", "......1......", ".............",
- ".............", ".............", ".............", ".............",
- "............."],
- [".............", ".............", ".............", ".............",
- ".............", ".............", "......1......", ".............",
- ".............", ".............", ".............", ".............",
- "............."]
- ];
.container
.viewbox
.object
- for (var x = 0; x < pixels.length; x++)
.layer(class="layer-" + (x + 1))
- for (var y = 0; y < pixels[x].length; y++)
- for (var z = 0; z < pixels[x][y].length; z++)
- var className = "";
- if (pixels[x][y][z] === "1")
- className = "pixel-yellow"
- else if (pixels[x][y][z] === "2")
- className = "pixel-orange"
- else if (pixels[x][y][z] === "3")
- className = "pixel-black"
- else if (pixels[x][y][z] === "4")
- className = "pixel-red"
- else if (pixels[x][y][z] === "a")
- className = "pixel-orange-hide"
- else if (pixels[x][y][z] === "b")
- className = "pixel-hide-orange"
- else if (pixels[x][y][z] === "c")
- className = "pixel-orange-hide pixel-hover-hide"
- else if (pixels[x][y][z] === "d")
- className = "pixel-hide-orange pixel-hover-hide"
- else if (pixels[x][y][z] === "e")
- className = "pixel-yellow pixel-black-hover"
- else if (pixels[x][y][z] === "f")
- className = "pixel-yellow pixel-blink-1"
- else if (pixels[x][y][z] === "g")
- className = "pixel-yellow pixel-blink-2"
- else if (pixels[x][y][z] === "h")
- className = "pixel-yellow pixel-blink-3"
.pixel(class=className)
- if (className !== "")
- for (var i = 1; i <= 6; i++)
.pixel-box(class="pixel-box-" + i)
// ----------
// I have dreams! Hover on me, and I will chase it, and I will fly!
// ----------
// ----- Variable declarations
$pixel-count: 13;
$container-background-color: #2cb700;
$container-perspective: 80vmin;
$viewbox-background-color: #088200;
$viewbox-size: 90vmin;
$viewbox-width: $viewbox-size;
$viewbox-height: $viewbox-size;
$object-background-color: rgba(0, 0, 0, 0.6);
$object-size: $pixel-count * 2;
$object-width: #{$object-size}vmin;
$object-height: #{$object-size}vmin;
$object-translate: (($viewbox-size - $object-size) / 2) - 5vmin;
$object-animation-time: 15000ms;
$layer-size: $object-size;
$layer-width: #{$object-size}vmin;
$layer-height: #{$object-size}vmin;
$layer-hover-translate: 6vmin;
$pixel-size: 2vmin;
$pixel-width: $pixel-size;
$pixel-height: $pixel-size;
$pixel-animation-time: 500ms;
$pixel-animation-time-2: 250ms;
$pixel-colors: (
'yellow': ('color': #f0f015, 'darken': 10%),
'orange': ('color': #f5af23, 'darken': 10%),
'black': ('color': #3a3a3a, 'darken': 10%),
'red': ('color': #f24242, 'darken': 15%),
'yellow-hide': ('color': #f0f015, 'darken': 10%, 'blink': 1),
'hide-yellow': ('color': #f0f015, 'darken': 10%, 'blink': 0),
'orange-hide': ('color': #f5af23, 'darken': 10%, 'blink': 1),
'hide-orange': ('color': #f5af23, 'darken': 10%, 'blink': 0),
'black-hover': ('color': #3a3a3a, 'darken': 10%, 'hover': 1),
'blink-1': ('color': #f0f015, 'darken': 10%, 'hover': 1, 'time': 1),
'blink-2': ('color': #f0f015, 'darken': 10%, 'hover': 1, 'time': 2),
'blink-3': ('color': #f0f015, 'darken': 10%, 'hover': 1, 'time': 3)
);
// ----- CSS Styles
html, body, .container {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container, .viewbox {
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: $container-background-color;
overflow: hidden;
perspective: $container-perspective;
}
.viewbox {
background-color: $viewbox-background-color;
width: $viewbox-width;
height: $viewbox-height;
border-radius: 50%;
transform-style: preserve-3d;
transform: rotateX(65deg) rotateZ(45deg);
@each $pixel-color-name, $pixel-color-obj in $pixel-colors {
$pixel-color: map-get($pixel-color-obj, 'color');
$pixel-darken: map-get($pixel-color-obj, 'darken');
$pixel-blink: map-get($pixel-color-obj, 'blink');
$pixel-hover: map-get($pixel-color-obj, 'hover');
$pixel-time: map-get($pixel-color-obj, 'time');
&:not(:hover) .pixel-#{$pixel-color-name} .pixel-box {
@if ($pixel-blink != null) {
animation: pixel-animate-#{$pixel-color-name}
$pixel-animation-time steps(1, end) infinite;
@keyframes pixel-animate-#{$pixel-color-name} {
@if $pixel-blink == 1 {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@else {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
}
}
@else {
@if ($pixel-time != null) {
@if ($pixel-time == 1) {
opacity: 1;
}
@elseif ($pixel-time == 2) {
opacity: 0;
}
@elseif ($pixel-time == 3) {
opacity: 0;
}
}
}
}
&:hover {
@for $i from 1 through $pixel-count {
.layer-#{$i} {
transform: translateZ(
#{($pixel-size * ($i - 1) + $layer-hover-translate)}
);
}
}
.pixel-hover-hide {
opacity: 0;
}
@if ($pixel-hover != null) {
.pixel-#{$pixel-color-name} .pixel-box {
background-color: $pixel-color;
&.pixel-box-1, &.pixel-box-2, &.pixel-box-3 {
background-color: darken($pixel-color, $pixel-darken);
}
@if ($pixel-time != null) {
@if ($pixel-time == 1) {
animation: blink-1-animation $pixel-animation-time-2
steps(1, end) infinite;
@keyframes blink-1-animation {
0% { opacity: 1; }
33.33333% { opacity: 0; }
66.66667% { opacity: 0; }
100% { opacity: 1; }
}
}
@elseif ($pixel-time == 2) {
animation: blink-2-animation $pixel-animation-time-2
steps(1, end) infinite;
@keyframes blink-2-animation {
0% { opacity: 0; }
33.33333% { opacity: 1; }
66.66667% { opacity: 0; }
100% { opacity: 0; }
}
}
@elseif ($pixel-time == 3) {
animation: blink-3-animation $pixel-animation-time-2
steps(1, end) infinite;
@keyframes blink-3-animation {
0% { opacity: 0; }
33.33333% { opacity: 0; }
66.66667% { opacity: 1; }
100% { opacity: 0; }
}
}
}
}
}
}
@if ($pixel-hover == null) {
.pixel-#{$pixel-color-name} .pixel-box {
background-color: $pixel-color;
&.pixel-box-1, &.pixel-box-2, &.pixel-box-3 {
background-color: darken($pixel-color, $pixel-darken);
}
}
}
}
}
.object {
background-color: $object-background-color;
width: $object-width;
height: $object-height;
position: relative;
border-radius: 50%;
transform-style: preserve-3d;
animation: object-rotate $object-animation-time linear infinite;
@keyframes object-rotate {
from { transform: rotate(0deg) translate(0, $object-translate); }
to { transform: rotate(-360deg) translate(0, $object-translate); }
}
}
.layer {
width: $layer-width;
height: $layer-height;
display: grid;
grid-template-columns: repeat($pixel-count, #{$pixel-count}fr);
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
@for $i from 1 through $pixel-count {
&.layer-#{$i} {
transform: translateZ(#{$pixel-size * ($i - 1)});
}
}
}
.pixel {
width: $pixel-width;
height: $pixel-height;
position: relative;
transform-style: preserve-3d;
}
.pixel-box {
width: $pixel-width;
height: $pixel-height;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
&.pixel-box-2 {
transform-origin: top left;
transform: rotateY(-90deg);
}
&.pixel-box-3 {
transform-origin: top left;
transform: rotateX(90deg);
}
&.pixel-box-4 {
transform-origin: bottom right;
transform: rotateY(90deg);
}
&.pixel-box-5 {
transform-origin: bottom right;
transform: rotateX(-90deg);
}
&.pixel-box-6 {
transform: translateZ($pixel-size);
}
}
// ----------
// I have dreams! Hover on me, and I will chase it, and I will fly!
// ----------
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.