CodePen Embed - Swissted CSS: The Clash

<main class="main">
	<section class="poster">
		<div class="poster__body">
			<header class="poster__header">
				<div class="poster__meta">

					<div class="poster__meta--col">
						<p>£2.25 / friday</p>
						<p>december 22 1978</p>
					</div>

					<div class="poster__meta--col-wide">
						<p>christmas party</p>
						<p>with the slits and the innocents</p>
					</div>

					<div class="poster__meta--col-wide">
						<p>friars aylesbury at maxwell hall</p>
						<p>aylesbury, buckinghamshire, england</p>
					</div>
				</div>

				<h1 class="poster__main-title">the clash</h1>
			</header>

			<div class="illustration">

				<div class="illustration__column">
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
				</div>

				<div class="illustration__column">
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
				</div>

				<div class="illustration__column">
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
				</div>

				<div class="illustration__column">
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
					<div class="illustration__square">
						<div class="illustration__circle illustration__circle--red illustration__circle--edge"></div>
						<div class="illustration__circle illustration__circle--black"></div>
						<div class="illustration__circle illustration__circle--blue"></div>
					</div>
				</div>

			</div>
		</div>
	</section>
</main>

// Variables
$main: #ee3824
$text: #0c0c16
$square: #dbe1d5
$blue: #009ecb

// keyframes

// mixins

=clearfix
	&:after, &:before
		content: " "
		display: table
	&:after
		clear: both
	
=center($horizontal: true, $vertical: true)
	position: absolute
	@if $horizontal and $vertical
		top: 50%
		left: 50%
		transform: translate(-50%, -50%)
	@else if $horizontal
		left: 50%
		transform: translate(-50%, 0)
	@else if $vertical
		top: 50%
		transform: translate(0, -50%)

=position($position, $top, $right, $bottom, $left)
	position: $position
	top: $top
	right: $right
	bottom: $bottom
	left: $left

=size($width, $height: $width)
	width: $width
	height: $height
		
// Base

html
	font-size: 10px
	@media (max-width: 32rem)
		font-size: 8px
		@media (max-width: 26rem)
			font-size: 6px
			@media (max-width: 18rem)
				font-size: 4px
				@media (max-width: 14rem)
					font-size: 2px
					@media (max-width: 10rem)
						font-size: 1px
		
*
	box-sizing: border-box

body
	color: $text
	font-family: 'Helvetica Neue', sans-serif
	font-weight: 600
	-webkit-font-smoothing: antialiased
	-moz-osx-font-smoothing: grayscale
	
.main
	+position(absolute, 0, 0, 0, 0)
	background: radial-gradient(darken($main, 10%), $main 100%)
	z-index: 1

// Modules

.poster
	+size(42rem, calc(42rem / 0.71031746031))
	+center

	&:before, &:after
		content: ""
		width: 50%
		position: absolute
		bottom: .2em
		box-shadow: 0 0 1em .4em rgba($text, .6)
		z-index: -1
	
	&:before
		left: 1.8em
		transform: rotate(-3deg)

	&:after
		right: 1.8em
		transform: rotate(3deg)

	&__body
		background: $main
		+size(42rem, calc(42rem / 0.71031746031))
		+center
		box-shadow: 0 2px .4em rgba($text, .4)
	
	&__header
		+size(100%, 26%)
		position: relative
	
	&__meta
		+size(100%, auto)
		font-size: .8rem
		line-height: 1.5
		padding: 2em 1.6em
		+clearfix
		
		&--col
			display: inline-block
			width: 25%
			float: left
		
		&--col-wide
			display: inline-block
			width: 37.5%
			float: left
	
	&__main-title
		font-size: 4.8rem
		+position(absolute, null, null, -.3em, .2em)
		
.illustration
	+size(100%, 73.8%)
	overflow: hidden

	&__column
		+size(25%, 100%)
		float: left
		margin-top: .2em
		&:nth-child(1) .illustration__circle--black
			display: none
			
	
	&__square
		+size(7.4rem)
		margin: 3.1rem 0 0 1.6rem
		background: $square
		transform: rotate(-45deg)
		transform-origin: center
		position: relative
		z-index: 1
		&:nth-child(1) .illustration__circle--black
			display: none

	&__circle
		+size(86%)
		+center
		border-radius: 50%
		z-index: 10
	
		&--red
			background: $main
			
		&--black
			background: darken($text, 15%)
			transform: translate(-50%,-118%)
			opacity: .3
		
		&--blue
			background: darken($blue, 10%)
			transform: translate(-50%,0%)
			opacity: .5
		
		&--edge:after
			content: ""
			display: inline-block
			width: 100%
			height: 100%
			border-radius: 50%
			position: absolute
			left: 50%
			background: darken($text, 15%)
			transform: translate(-50%,165%)
			opacity: .3

View Compiled

class Poster {
	constructor() {
		
		this.circles = {
			red: {
				el: Array.from(document.querySelectorAll('.illustration__circle--red')),
				transforms: 'translate(-50%,-50%)'
			},
			black: {
				el: Array.from(document.querySelectorAll('.illustration__circle--black')),
				transforms: 'translate(-50%,-118%)'
			},
			blue: {
				el: Array.from(document.querySelectorAll('.illustration__circle--blue')),
				transforms: 'translate(-50%,0%)'
			}
		}
		
		this.onMouseMove = this.onMouseMove.bind(this)
	}
	
	init() {
		
		document.addEventListener('mousemove', this.onMouseMove)
	}
	
	onMouseMove(evt) {
		
		const pageX = evt.pageX
		const pageY = evt.pageY
		
		this.circles.blue.el.forEach(circle => {
			circle.style.transform = `${this.circles.blue.transforms} translate3d(${pageX/-60}px, ${pageY/-60}px, 0)`
		})
		
		this.circles.red.el.forEach(circle => {
			circle.style.transform = `${this.circles.red.transforms} translate3d(${pageX/120}px, ${pageY/120}px, 0)`
		})
		
		this.circles.black.el.forEach(circle => {
			circle.style.transform = `${this.circles.black.transforms} translate3d(${pageX/-120}px, ${pageY/-120}px, 0)`
		})
	}
}

const poster = new Poster()

poster.init()

View Compiled

This Pen is owned by Mike Wagz on CodePen.

See more by @mikewagz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.