Circle placement, trigonometry
This commit is contained in:
parent
56f21908ff
commit
cd1d8fa1a7
|
@ -3,8 +3,8 @@ var sass = require('gulp-sass');
|
||||||
var sourcemaps = require('gulp-sourcemaps');
|
var sourcemaps = require('gulp-sourcemaps');
|
||||||
var autoprefixer = require('gulp-autoprefixer');
|
var autoprefixer = require('gulp-autoprefixer');
|
||||||
|
|
||||||
var input = './stylesheets/**/*.scss';
|
var input = './stylesheets/style.scss';
|
||||||
var output = './public/css';
|
var output = './stylesheets';
|
||||||
var sassOptions = {
|
var sassOptions = {
|
||||||
errLogToConsole: true,
|
errLogToConsole: true,
|
||||||
outputStyle: 'expanded'
|
outputStyle: 'expanded'
|
||||||
|
|
|
@ -1,33 +1,33 @@
|
||||||
@import "trigonometry";
|
@import "trigonometry";
|
||||||
|
|
||||||
$circles: 4;
|
$circles: 4;
|
||||||
|
$points: 12;
|
||||||
|
$angle: pi() / 5;
|
||||||
|
|
||||||
* {
|
.imbb_container {
|
||||||
|
font-family: 'Gotham SSm A','Gotham SSm B',Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||||
|
height: inherit;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
@for $i from 0 through $circles {
|
||||||
font-family: 'Gotham SSm A','Gotham SSm B',Helvetica Neue,Helvetica,Arial,sans-serif;
|
.circle-#{$i} {
|
||||||
}
|
$width: 80% - $i*10%;
|
||||||
|
|
||||||
$i: 0;
|
|
||||||
@while $i < $circles {
|
|
||||||
#human-$i {
|
|
||||||
left: (1 - sin($i*pi()/4)) * 1%;
|
|
||||||
top: (1 - cos($i*pi()/4)) * 1%;
|
|
||||||
}
|
|
||||||
.small-$i {
|
|
||||||
left: (1 - sin($i*pi()/4)) * 1%;
|
|
||||||
top: (1 - cos($i*pi()/4)) * 1%;
|
|
||||||
}
|
|
||||||
.circle-$i {
|
|
||||||
$width: 80% - $i*5%;
|
|
||||||
width: $width;
|
width: $width;
|
||||||
margin: ((100% - $width) / 2) auto;
|
top: ($i - 1)*5%;
|
||||||
position: relative;
|
left: ($i - 1)*5%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: $i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $points {
|
||||||
|
#human-#{$i},
|
||||||
|
.small-#{$i} {
|
||||||
|
@include on-circle($i, $points);
|
||||||
}
|
}
|
||||||
$i: $i + 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.humans {
|
.humans {
|
||||||
|
@ -76,8 +76,6 @@ $i: 0;
|
||||||
.avatars {
|
.avatars {
|
||||||
display: block;
|
display: block;
|
||||||
animation: rotat 100s linear infinite;
|
animation: rotat 100s linear infinite;
|
||||||
/*left:0;
|
|
||||||
top:0;*/
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
@ -98,8 +96,15 @@ $i: 0;
|
||||||
border: 5px solid white;
|
border: 5px solid white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-$circles {
|
.circle-#{$circles} {
|
||||||
animation-play-state: paused;
|
&, .avatars {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: 15% 15%;
|
||||||
|
max-width: 70%;
|
||||||
|
max-height: 70%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.circles {
|
.circles {
|
||||||
border: 1px dashed;
|
border: 1px dashed;
|
||||||
|
|
|
@ -60,3 +60,44 @@
|
||||||
@function tan($angle) {
|
@function tan($angle) {
|
||||||
@return sin($angle) / cos($angle);
|
@return sin($angle) / cos($angle);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* on-circle takes a radius, position on a circle, number of possible positions and returns top and left properties
|
||||||
|
*
|
||||||
|
* $radius {Number} radius of the circle in pixels
|
||||||
|
* $ordinalPosition {Number} the position of the item on the circle, counting from 1 (North) through N
|
||||||
|
* $positions {Number} the number of positions on the circle
|
||||||
|
* $originX {Number} optional X origin point for the circle, defaults to the radius
|
||||||
|
* $originY {Number} optional Y origin point for the circle, defaults to the radius
|
||||||
|
* $offsetX {Number} optional X offset for the item, you might use 1/2 of the width of an item, default is 0
|
||||||
|
* $offsetY {Number} optional Y offset for the item, you might use 1/2 of the height of an item, default is 0
|
||||||
|
*/
|
||||||
|
@mixin on-circle ($ordinalPosition, $positions, $radius: 90%, $originX: 0, $originY: 0, $offsetX: 0, $offsetY: 0) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
Determine the angle for the position:
|
||||||
|
Multiply the adjusted zero-based index of the position by the degrees-per-position (360 degrees divided by the
|
||||||
|
number of positions) and subtract 90 degrees (adjusting to begin at North)
|
||||||
|
*/
|
||||||
|
$positionAngleDegrees: ($ordinalPosition - 1)*360/$positions - 90;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Convert the angle to radians:
|
||||||
|
Multiply the angle by pi and then divide by 180 degrees.
|
||||||
|
|
||||||
|
NOTE: This step is necessary because of a bug in handling of the degrees unit when doing iterations, AFAICT
|
||||||
|
*/
|
||||||
|
$positionAngleRadians: $positionAngleDegrees * pi() / 180;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Apply the parametric equation of the circle,
|
||||||
|
http://en.wikipedia.org/wiki/Circle#Equations
|
||||||
|
via:
|
||||||
|
http://stackoverflow.com/questions/839899/how-do-i-calculate-a-point-on-a-circles-circumference
|
||||||
|
|
||||||
|
x = [origin x] + (r * cos angle)
|
||||||
|
y = [origin y] + (r * sin angle)
|
||||||
|
*/
|
||||||
|
top: #{$originY + $offsetY + $radius * sin($positionAngleRadians)}px;
|
||||||
|
left: #{$originX + $offsetX + $radius * cos($positionAngleRadians)}px;
|
||||||
|
}
|
||||||
|
|
17
userlist.php
17
userlist.php
|
@ -76,7 +76,7 @@ function imbb_usergalaxy() {
|
||||||
));
|
));
|
||||||
?>
|
?>
|
||||||
<div class="all">
|
<div class="all">
|
||||||
<div class="container">
|
<div class="imbb_container">
|
||||||
<div class="circles circle-1">
|
<div class="circles circle-1">
|
||||||
<?php
|
<?php
|
||||||
for ($i = 1; $i <= count($query); $i++) {
|
for ($i = 1; $i <= count($query); $i++) {
|
||||||
|
@ -107,7 +107,10 @@ function imbb_usergalaxy() {
|
||||||
$i++;
|
$i++;
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<div class="circles circle-2">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="circles circle-2">
|
||||||
|
<div class="avatars">
|
||||||
<?php if (isset($posts[2])) {
|
<?php if (isset($posts[2])) {
|
||||||
foreach ($posts[2] as $post) {
|
foreach ($posts[2] as $post) {
|
||||||
galaxyuser($post, $i);
|
galaxyuser($post, $i);
|
||||||
|
@ -115,7 +118,10 @@ function imbb_usergalaxy() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<div class="circles circle-3">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="circles circle-3">
|
||||||
|
<div class="avatars">
|
||||||
<?php if (isset($posts[1])) {
|
<?php if (isset($posts[1])) {
|
||||||
foreach ($posts[1] as $post) {
|
foreach ($posts[1] as $post) {
|
||||||
galaxyuser($post, $i);
|
galaxyuser($post, $i);
|
||||||
|
@ -123,17 +129,18 @@ function imbb_usergalaxy() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="circles circle-4">
|
<div class="circles circle-4">
|
||||||
|
<div class="avatars">
|
||||||
<?php if (isset($posts[0])) {
|
<?php if (isset($posts[0])) {
|
||||||
foreach ($posts[0] as $post) {
|
foreach ($posts[0] as $post) {
|
||||||
echo '<img src="'.get_post_meta( $post->ID, 'imbb_image', TRUE ).'">';
|
echo '<img src="'.get_post_meta( $post->ID, 'imbb_image', TRUE ).'">';
|
||||||
$i++;
|
$i++;
|
||||||
}
|
}
|
||||||
} ?>
|
} ?>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
<?php
|
||||||
|
|
Reference in a new issue