rayelliott
/
css-orbital
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

account for variable number of orbitals

This commit is contained in:
Ray Elliott 2022-04-19 19:34:16 +01:00
parent 19c508ecf8
commit 4da5a11cb9
2 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,7 +9,7 @@
<div id="app" class="wrapper"> <div id="app" class="wrapper">
<ul class="orbitals clockwise"> <ul class="orbitals clockwise">
<li class="orbital bg bg--red pulse shadow"> <li class="orbital bg bg--red pulse">
<div class="orbital-content content-center anti-clockwise"> <div class="orbital-content content-center anti-clockwise">
<div class="feature"> <div class="feature">
<div class="feature-item primary"> <div class="feature-item primary">

86
style.css
View File

@ -1,16 +1,15 @@
:root { :root {
--count__orbitals: 8;
--width__inner-content: 11em; --width__inner-content: 11em;
--width__orbital: 7.5em; --width__orbital: 7.5em;
--radius__orbital: 14em; --radius: 14em;
--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);
--duration__rotation: 50s; --duration__rotation: 50s;
--duration__pulse: 1.5s; --duration__pulse: 1.5s;
--duration__image-hover: 0.3s; --duration__image-hover: 0.3s;
--duration__feature-hover: 0.3s; --duration__feature-hover: 0.3s;
--width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
} }
body, html { body, html {
@ -51,48 +50,51 @@ ul, li {
border-radius: 50%; border-radius: 50%;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(calc(-50% + var(--x-offset)), calc(-50% - var(--y-offset)));
&:nth-child(1) {
/* top */
transform: translate(-50%, calc(-50% - var(--radius__orbital)));
} }
&:nth-child(2) { .orbital {
/* top right */ /* --angle must be in radians so multiply by 2 * pi */
transform: translate(calc(-50% + var(--radius__orbital--diagonal)), calc(-50% - var(--radius__orbital--diagonal))); --angle: calc(6.28318530360 * var(--index) / var(--count__orbitals));
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
--sin-term1: var(--angle);
--sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
--sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
--sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
--sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
--sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
--cos-term1: 1;
--cos-term2: calc((var(--angle) * var(--angle)) / 2);
--cos-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24);
--cos-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 720);
--cos-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 40320);
--cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5));
--x-offset: calc(var(--radius) * var(--cos));
--y-offset: calc(var(--radius) * var(--sin));
&:nth-child(1) { --index: 0; }
&:nth-child(2) { --index: 1; }
&:nth-child(3) { --index: -1; }
&:nth-child(4) { --index: 2; }
&:nth-child(5) { --index: -2; }
&:nth-child(6) { --index: 3; }
&:nth-child(7) { --index: -3; }
&:nth-child(8) { --index: 4; }
&:nth-child(9) { --index: -4; }
&:nth-child(10) { --index: 5; }
&:nth-child(11) { --index: -5; }
&:nth-child(12) { --index: 6; }
} }
&:nth-child(3) {
/* right */
transform: translate(calc(-50% + var(--radius__orbital)), -50%);
}
&:nth-child(4) {
/* bottom right */
transform: translate(calc(-50% + var(--radius__orbital--diagonal)), calc(-50% + var(--radius__orbital--diagonal)));
}
&:nth-child(5) {
/* bottom */
transform: translate(-50%, calc(-50% + var(--radius__orbital)));
}
&:nth-child(6) {
/* bottom left */
transform: translate(calc(-50% - var(--radius__orbital--diagonal)), calc(-50% + var(--radius__orbital--diagonal)));
}
&:nth-child(7) {
/* left */
transform: translate(calc(-50% - var(--radius__orbital)), -50%);
}
&:nth-child(8) {
/* top left */
transform: translate(calc(-50% - var(--radius__orbital--diagonal)), calc(-50% - var(--radius__orbital--diagonal)));
}
}
.orbital-content { .orbital-content {
width: 100%; width: 100%;