Skip to content

Instantly share code, notes, and snippets.

@kfrank
Created May 29, 2018 19:08
Show Gist options
  • Save kfrank/cca1f6f7a9a94d6f2a5664cc54c85966 to your computer and use it in GitHub Desktop.
Save kfrank/cca1f6f7a9a94d6f2a5664cc54c85966 to your computer and use it in GitHub Desktop.
Intersectional Design Considerations
<div class="scene">
<div class="carousel">
<div class="carousel__cell">
<div>
<h1 class="uppercase">Intersectional Design Considerations</h1>
<p>What is intersectionality? Why does this matter to technology design?</p>
<a href="#" class="random-button"><span>Explore</span></a>
</div>
</div>
<div class="carousel__cell">
<div>
<h1>Low-income + Non-binary</h1>
<p>Intro paragraph</p>
<h2>Case study</h2>
<p>Paragraph</p>
<h2>Other layers</h2>
<ul><li>List</li></ul>
<h2>Considerations</h2>
<ul><li>List</li></ul>
<h2>Resources</h2>
<ul><li>List</li></ul>
</div>
</div>
<div class="carousel__cell">
<div>
<h1>Black + </h1>
<p>Intro paragraph</p>
<h2>Case study</h2>
<p>Paragraph</p>
<h2>Other layers</h2>
<ul><li>List</li></ul>
<h2>Considerations</h2>
<ul><li>List</li></ul>
<h2>Resources</h2>
<ul><li>List</li></ul>
</div>
</div>
<div class="carousel__cell">4</div>
<div class="carousel__cell">5</div>
<div class="carousel__cell">6</div>
<div class="carousel__cell">7</div>
<div class="carousel__cell">8</div>
<div class="carousel__cell">9</div>
<div class="carousel__cell">10</div>
<div class="carousel__cell">11</div>
<div class="carousel__cell">12</div>
<div class="carousel__cell">13</div>
<div class="carousel__cell">14</div>
<div class="carousel__cell">15</div>
</div>
</div>
<div class="carousel-options">
<p style="display:none;">
<label>
Cells
<input class="cells-range" type="range" min="3" max="15" value="9" />
</label>
</p>
<p>
<button class="previous-button"></button>
<button class="next-button"></button>
</p>
<p style="display:none;">
Orientation:
<label>
<input type="radio" name="orientation" value="horizontal" checked />
horizontal
</label>
<label>
<input type="radio" name="orientation" value="vertical" />
vertical
</label>
</p>
</div>
var carousel = document.querySelector('.carousel');
var cells = carousel.querySelectorAll('.carousel__cell');
var cellCount; // cellCount set from cells-range input value
var selectedIndex = 0;
var cellWidth = carousel.offsetWidth;
var cellHeight = carousel.offsetHeight;
var isHorizontal = true;
var rotateFn = isHorizontal ? 'rotateY' : 'rotateX';
var radius, theta;
// console.log( cellWidth, cellHeight );
function rotateCarousel() {
var angle = theta * selectedIndex * -1;
carousel.style.transform = 'translateZ(' + -radius + 'px) ' +
rotateFn + '(' + angle + 'deg)';
}
var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener( 'click', function() {
selectedIndex--;
rotateCarousel();
});
var nextButton = document.querySelector('.next-button');
nextButton.addEventListener( 'click', function() {
selectedIndex++;
rotateCarousel();
});
var cellsRange = document.querySelector('.cells-range');
cellsRange.addEventListener( 'change', changeCarousel );
cellsRange.addEventListener( 'input', changeCarousel );
function changeCarousel() {
cellCount = cellsRange.value;
theta = 360 / cellCount;
var cellSize = isHorizontal ? cellWidth : cellHeight;
radius = Math.round( ( cellSize / 2.2) / Math.tan( Math.PI / cellCount ) );
for ( var i=0; i < cells.length; i++ ) {
var cell = cells[i];
if ( i < cellCount ) {
// visible cell
cell.style.opacity = 1;
var cellAngle = theta * i;
cell.style.transform = rotateFn + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
} else {
// hidden cell
cell.style.opacity = 0;
cell.style.transform = 'none';
}
}
rotateCarousel();
}
var orientationRadios = document.querySelectorAll('input[name="orientation"]');
( function() {
for ( var i=0; i < orientationRadios.length; i++ ) {
var radio = orientationRadios[i];
radio.addEventListener( 'change', onOrientationChange );
}
})();
function onOrientationChange() {
var checkedRadio = document.querySelector('input[name="orientation"]:checked');
isHorizontal = checkedRadio.value == 'horizontal';
rotateFn = isHorizontal ? 'rotateY' : 'rotateX';
changeCarousel();
}
// set initials
onOrientationChange();
* { box-sizing: border-box; }
body {
text-align: left;
overflow-x: hidden;
background-color: #F2F2F9;
font-family: 'Barlow', sans-serif;
}
.scene {
margin: 20px 0;
position: relative;
width: 800px;
min-height: 700px;
margin: 20px auto;
perspective: 1000px;
}
.carousel {
width: 100%;
min-height: 100%;
position: absolute;
/* transform: translateZ(-200px); */
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel__cell {
position: absolute;
width: 800px;
min-height: 700px;
left: 10px;
top: 10px;
padding: 2rem 4rem;
border-radius: 4px;
background-color: rgba(255,255,255, .9);
box-shadow: 0 5px 10px rgba(250, 249, 251, .75);
/* border: 2px solid black; */
font-size: 80px;
font-weight: bold;
color: #504E60;
text-align: left;
transition: transform 1s, opacity 1s;
display: flex;
align-items: center;
}
.carousel__cell > div {
width: 100%;
}
.carousel__cell h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
}
.carousel__cell h2 {
font-size: 1rem;
margin-bottom: 0;
text-transform: uppercase;
margin-top: 1.5rem;
letter-spacing: .05rem;
}
h2 + p {
margin-top: .5rem;
}
ul {
margin: .5rem 0;
padding-left: 1.5rem;
}
li {
font-weight: 400;
font-size: 1rem;
margin: 0;
line-height: 1;
}
.uppercase {
text-transform: uppercase;
font-weight: 800;
line-height: 1;
}
.carousel__cell p {
font-size: 1rem;
font-weight: 400;
margin-bottom: 1rem;
}
/* .carousel__cell:nth-child(9n+1) { background: hsla( 0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }
*/
.carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }
.carousel-options {
text-align: center;
/* position: relative; */
z-index: 2;
background: hsla(0, 0%, 100%, 0.8);
}
.previous-button, .next-button {
font-size: 2rem;
position: absolute;
top: 50%;
margin-top: -1rem;
}
.previous-button {
left: 2rem;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 25px solid #FFA500;
border-left: 0;
background: transparent;
content: "";
}
.next-button {
right: 2rem;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 25px solid #FF3D00;
border-right: 0;
background: transparent;
content: "";
}
.random-button {
background-color: #ECFF80;
border: none;
font-family: "Barlow", sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
line-height: 1rem;
letter-spacing: .05em;
padding: 1rem 2.5rem;
margin-left: .5rem;
transform: skewX(35deg);
z-index: 5000;
display: inline-block;
position: relative;
}
.random-button span {
display: inline-block;
transform: skewX(-35deg);
color: #48425C;
font-weight: 500;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment