Cubes Advent Calendar

Today we’d like to share a fun little Advent calendar with you. The idea is mainly inspired by the Singles 2016 page of Adult Swim. When hovering over the boxes, they rotate in a fun way and when we click on a box, all boxes disappear with an animation. Then some content shows up, also animating with individual effects. Additionally, we have the option to tilt the whole calendar according to the hover position.
We’ve created some demos for your inspiration and hope that you can use this as a base for your Christmas ideas.

The animations are powered by Julian Garnier’s anime.js. We also use some text animations based on one of our previous demos, Inspiration for Letter Effects, where we employ Charming.js by Yuan Qing. The snow animation if from Om Shankar’s gist snow.html.

For our Advent calendar we are using a Flexbox layout. The cubes are created from a “flat” structure and transformed into a multi-element structure that allows us to create the three-dimensional look. The respective content elements follow, each enclosed in a content__block:

<div class="calendar-wrap">

	<div class="calendar">
		
		<div class="cubes">

			<div class="cube">
				<div class="cube__side cube__side--back"></div>
				<div class="cube__side cube__side--left"></div>
				<div class="cube__side cube__side--right"></div>
				<div class="cube__side cube__side--bottom"></div>
				<div class="cube__side cube__side--top"></div>
				<div class="cube__side cube__side--front">
					<div class="cube__number">1</div>
				</div>
			</div>

			<div class="cube">
				<!-- ... -->
			</div>
			<!-- ... -->
		</div><!-- /cubes -->

		<h2 class="title">The Title</h2>

	</div><!-- /calendar -->

	<div class="content">

		<div class="content__block">
			<h3 class="content__title">The Title</h3>
			<p class="content__description">If everyone demanded peace instead of another television set, then there'd be peace.</p>
			<p class="content__meta">John Lennon</p>
		</div>

		<div class="content__block">
			<!-- ... -->
		</div>

		<div class="content__number">0</div>

		<button class="btn-back" aria-label="Back to the grid view">↵</button>

	</div>
	<!-- /content -->
</div>

The shared styles of all demos are defined in common.css while individual adjustments are made in style1.css, style2.css and style3.css.

Note that the initial structure has some data attributes that are used for the background color animation, the inactive class and to construct the title element that appears on hover. Have a look at the html files to see the markup.

Some interesting styles are the ones for building the cubes container and its cubes. Note that the cubes container gets created dynamically in our script. We explicitly use calc() here to show how the padding of the main calendar container is calculated. For seven boxes in a row, we subtract the width of them (counting with their margins) from the viewport width and divide it by two in order to get the padding for one side.

.calendar {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	/* we always want 7 boxes in a row */
	padding: 3em calc((100vw - (7 * (7vw + 1vw)))/2);
}

.js .calendar {
	position: absolute;
	perspective: 1000px;
	padding: 0 calc((100vw - (7 * (7vw + 1vw)))/2) 5em;
}

.no-js .calendar {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
}

/* Cubes container */

.cubes {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

The cube is a 3D construct that needs to have the correct transforms for the sides. We use viewport units to make our cube responsive.

/* Single cube */

.cube {
	position: relative;
	display: block;
	flex: none;
	width: 7vw;
	height: 7vw;
	margin: 0.5vw;
}

.js .cube {
	flex: auto;
	transform-style: preserve-3d;
}

/* Push to the right weekday (we have to push 3 boxes) */

.js .cube:first-child {
	margin-left: calc(((7vw + 1vw) * 3) + 0.5vw);
}

.js .cube:not(.cube--inactive) {
	cursor: pointer;
}

/* Cube sides and rotations */

.cube__side {
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	backface-visibility: hidden;
}

.cube__side--front {
	position: relative;
	transform: translateZ(3.5vw);
}

.cube__side--back {
	transform: rotateY(180deg) translateZ(3.5vw);
}

.cube__side--right {
	transform: rotateY(90deg) translateZ(3.5vw);
}

.cube__side--left {
	transform: rotateY(-90deg) translateZ(3.5vw);
}

.cube__side--top {
	transform: rotateX(90deg) translateZ(3.5vw);
}

.cube__side--bottom {
	transform: rotateX(-90deg) translateZ(3.5vw);
}

Each demo has an individual script file where you’ll find all the functionality and the animations.

• ChromeSupported
• FirefoxNot supported
• Internet ExplorerSupported from version E
• SafariSupported
• OperaSupported

Update: If you need a fix for Firefox, check out xem’s solution here and here. Read more about it in this GitHub issue. Thank you, xem!

References and Credits

• anime.js by Julian Garnier
• Charming.js by Yuan Qing
• Christmas vector patterns designed by Freepik.