<div id="posterWrap">
<div id="poster">
<div id="info">
<p class="first">first appearance in london<br />the london college of printing</p>
<p class="second">with spring and polyfloskin<br />plus the great western light show</p>
<p class="third">thursday<br />october 14 1971 / 8pm</p>
</div>
<h1>the velvet underground</h1>
<div id="grid">
<div class="arrow alt"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow alt"></div>
</div>
</div>
</div>
<footer class="closed">
<a class="posterImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0140/7312/products/velvet_underground_3.jpg?v=1451968556');" href="https://www.swissted.com/products/the-velvet-underground-in-london-1971"><span>Buy Poster</span></a>
<h5 id="info">#SwisstedInCode :: the velvet underground in london, 1971 <i class="fa fa-question-circle" aria-hidden="true"></i></h5>
<p>The <a href="https://www.swissted.com/" target="_blank">Swissted</a> project is a collection of concert posters created in the Swiss International Style by Mike Joyce. I'm recreating Mike's beautiful print posters in code and sharing the results here.</p>
</footer>// micro-normalize - mostly to fix some generally annoying stuff
h1, h2, h3, h4, h5, h6, p, button, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
* { box-sizing: border-box; }
*:before, *:after {
box-sizing: inherit;
}
@mixin baseType {
font-family: Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@mixin cleanType {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 62.5%; //enable relative sizing where 1rem = 10px
height: 100%;
}
body {
background: #dadada;
font-size: 1.4rem;
@include baseType;
}
footer {
position: fixed;
bottom:0;
left:0;
right:0;
height: 3.5rem;
background: #46285A;
padding: 1rem 2rem 1rem 15rem;
color: rgba(255,255,255,0.8);
transition: all 0.075s ease-in-out;
border-top: 1px solid #333;
a { color: #F14E6B; transition: color 0.075s ease-in-out; }
a:hover { color:#fff; }
.posterImage {
position: absolute;
left:0;
bottom: -10rem;
width: 200px;
height: 282px;
background-color:#fff;
background-size:cover;
box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.4);
color: #fff;
text-decoration:none;
transform: scale(0.25);
transition: all 0.2s ease;
span {
display:none;
background: #000;
position: absolute;
bottom: 2rem;
left: 50%;
padding: 0.3rem 0.5rem;
transform: translate(-50%, 0);
border: 1px solid #333;
border-radius: 2px;
transition: all 0.2s ease;
box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.3);
}
}
.posterImage:hover span {
font-size: 1.7rem;
}
h5 { font-size: 1.6rem;
margin-bottom: 0.5rem;
color: #fff;
cursor:pointer;
i { margin-left: 2rem; opacity: 0.7; }
}
p {
transform: translatey (-4rem);
transition: all 0.2s ease;
}
}
footer.open {
padding-left: 25rem;
height: auto;
.posterImage {
left: 2rem;
bottom: 1rem;
transform: scale(1);
span { display: block; }
}
p {
transform: translatey (0);
}
}
#posterWrap {
margin: 4rem auto;
padding: 2rem;
width: 64rem;
height: 88.4rem;
box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.2);
background: #fff;
}
#poster {
width: 100%;
height: 100%;
overflow: hidden;
}
/* ---------------------------- project specific -----------------*/
$lightColor: #dfe2d9;
$purple: #a3248f;
$base: #131321;
@keyframes arrowSpin {
0%,100% { clip-path: polygon(0% 25%, 0% 100%, 75% 100%, 75% 75%, 45% 75%, 100% 19%, 81% 0%, 26% 55%, 26% 25%); }
25% { clip-path: polygon(0% 75%, 0% 0%, 75% 0%, 75% 25%, 45% 25%, 100% 80%, 80% 100%, 25% 44%, 25% 75%); }
50% { clip-path: polygon(25% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 45%, 20% 100%, 0% 80%, 55% 25%, 25% 25%); }
75% { clip-path: polygon(0% 20%, 20% 0%, 75% 55%, 75% 25%, 100% 25%, 100% 100%, 25% 100%, 25% 75%, 55% 75%); }
}
#poster {
background-color: $base;
position: relative;
h1, p {
color: $lightColor;
font-size: 1.1rem;
}
#info {
margin-top: 2.5rem;
border-top: 1px solid $lightColor;
padding: 1.5rem 1rem 2rem 1rem;
display:flex;
min-height: 14rem;
//justify-content: space-between;
> p { margin: 0 1rem; width: 30rem; }
.second { padding-left: 1rem; }
.third { padding-left: 2rem; }
}
h1 {
margin-top: 2.5rem;
border-top: 1px solid $lightColor;
padding: 1rem 2rem 2rem 2rem;
font-size: 3.6rem;
letter-spacing: 0.13rem;
}
#grid {
position: absolute;
bottom:0;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.arrow {
background-color: $purple;
width:90px; height:90px;
clip-path: polygon(0% 25%, 0% 100%, 75% 100%, 75% 75%, 45% 75%, 100% 19%, 81% 0%, 26% 55%, 26% 25%);
transition: all 0.2s linear;
}
.arrow:nth-child(5n+1):not(.alt) {
background-color: $lightColor;
}
#grid:hover .arrow{
box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.4);
}
}
var clickTarg = document.getElementById('info');
var toggle = clickTarg.parentNode;
clickTarg.addEventListener('click', function () {
if (toggle.classList.contains('closed')) {
toggle.classList.remove('closed');
toggle.classList.add('open');
} else {
toggle.classList.remove('open');
toggle.classList.add('closed');
}
});
rotateWithMouse = function(e, elt) {
var offset = elt.offset();
var center_x = (offset.left) + (elt.width() / 2);
var center_y = (offset.top) + (elt.height() / 2);
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + (180 + 135) - 360;
$(elt).css('-moz-transform', 'rotate(' + degree + 'deg) scale(0.95)');
$(elt).css('-webkit-transform', 'rotate(' + degree + 'deg) scale(0.95)');
$(elt).css('-o-transform', 'rotate(' + degree + 'deg) scale(0.95)');
$(elt).css('-ms-transform', 'rotate(' + degree + 'deg) scale(0.95)');
$(elt).css('transform', 'rotate(' + degree + 'deg) scale(0.95)');
}
resetArrows = function(){
$('.arrow').css('-moz-transform', 'rotate(0) scale(1)');
$('.arrow').css('-webkit-transform', 'rotate(0) scale(1)');
$('.arrow').css('-o-transform', 'rotate(0) scale(1)');
$('.arrow').css('-ms-transform', 'rotate(0) scale(1)');
$('.arrow').css('transform', 'rotate(0) scale(1)');
}
$(document).ready(function() {
$('#grid')
.mouseenter( function(){
$(document).bind('mousemove', function(e) {
$('.arrow').each(function(){
$this = $(this);
rotateWithMouse(e,$this);
});
});
})
.mouseleave( function(){
$(document).unbind('mousemove');
resetArrows();
});
});
External CSS
This Pen doesn't use any external CSS resources.