A simple art experiment and learning exercise using CSS grids, plus a small dash of GSAP.
A Pen by Peter Barr on CodePen.
A simple art experiment and learning exercise using CSS grids, plus a small dash of GSAP.
A Pen by Peter Barr on CodePen.
<div class="container"> | |
<div class="compositions"> | |
<div class="composition composition--3"> | |
<div class="frame"> | |
<div class="frame__face frame__face--front"> | |
<div class="cell cell1"></div> | |
<div class="cell cell2"></div> | |
<div class="cell cell3"></div> | |
<div class="cell cell4"></div> | |
<div class="cell cell5"></div> | |
<div class="cell cell6"></div> | |
<div class="cell cell7"></div> | |
<div class="cell cell8"></div> | |
<div class="cell cell9"></div> | |
<div class="frame-grad"></div> | |
<div class="frame-shad"></div> | |
</div> | |
<div class="frame__face frame__face--back"></div> | |
<div class="frame__face frame__face--left"></div> | |
<div class="frame__face frame__face--right"></div> | |
<div class="frame__face frame__face--top"></div> | |
<div class="frame__face frame__face--bottom"></div> | |
</div> | |
<p class="composition__title">Composition III</p> | |
</div> | |
<div class="composition composition--c"> | |
<div class="frame"> | |
<div class="frame__face frame__face--front"> | |
<div class="cell cell1"></div> | |
<div class="cell cell2"></div> | |
<div class="cell cell3"></div> | |
<div class="cell cell4"></div> | |
<div class="cell cell5"></div> | |
<div class="cell cell6"></div> | |
<div class="cell cell7"></div> | |
<div class="cell cell8"></div> | |
<div class="cell cell9"></div> | |
<div class="frame-grad"></div> | |
<div class="frame-shad"></div> | |
</div> | |
<div class="frame__face frame__face--back"></div> | |
<div class="frame__face frame__face--left"></div> | |
<div class="frame__face frame__face--right"></div> | |
<div class="frame__face frame__face--top"></div> | |
<div class="frame__face frame__face--bottom"></div> | |
</div> | |
<p class="composition__title">Composition C</p> | |
</div> | |
<div class="composition composition--2"> | |
<div class="frame"> | |
<div class="frame__face frame__face--front"> | |
<div class="cell cell1"></div> | |
<div class="cell cell2"></div> | |
<div class="cell cell3"></div> | |
<div class="cell cell4"></div> | |
<div class="cell cell5"></div> | |
<div class="cell cell6"></div> | |
<div class="cell cell7"></div> | |
<div class="cell cell8"></div> | |
<div class="cell cell9"></div> | |
<div class="frame-grad"></div> | |
<div class="frame-shad"></div> | |
</div> | |
<div class="frame__face frame__face--back"></div> | |
<div class="frame__face frame__face--left"></div> | |
<div class="frame__face frame__face--right"></div> | |
<div class="frame__face frame__face--top"></div> | |
<div class="frame__face frame__face--bottom"></div> | |
</div> | |
<p class="composition__title">Composition II</p> | |
</div> | |
</div> | |
<div class="title"> | |
<h1>Mondrian</h1> | |
<p>CSS Grid Compositions</p> | |
</div> | |
</div> | |
<div class="me"> | |
<a class="me__link portfolio" href="http://www.petebarr.com" target='_blank'>Petebarr.com<span></span></a> | |
</div> | |
<a class="twitter" href="https://twitter.com/petebarr" target='_blank'> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> | |
<path fill="#000" d="M39.19 15.39a10.63 10.63 0 0 1-3.38 1.29 5.31 5.31 0 0 0-9.19 3.63 5.43 5.43 0 0 0 .14 1.22A15.11 15.11 0 0 1 15.8 16a5.39 5.39 0 0 0-.72 2.68 5.32 5.32 0 0 0 2.37 4.42 5.33 5.33 0 0 1-2.45-.7v.07a5.31 5.31 0 0 0 4.27 5.21 5.45 5.45 0 0 1-1.41.19 4.78 4.78 0 0 1-1-.1 5.32 5.32 0 0 0 5 3.69 10.64 10.64 0 0 1-6.6 2.28c-.43 0-.85 0-1.27-.07a15.13 15.13 0 0 0 23.28-12.74v-.69a10.87 10.87 0 0 0 2.66-2.75 10.84 10.84 0 0 1-3.06.84 5.35 5.35 0 0 0 2.34-2.94"></path> | |
<!-- <path fill="#fff" d="M26 5A21 21 0 1 1 5 26 21 21 0 0 1 26 5m0-4a25 25 0 1 0 25 25A25 25 0 0 0 26 1z"></path> --> | |
</svg> | |
</a> |
$('.frame').mousemove(function(e) { | |
var xPos = $(this).position().left; | |
var yPos = $(this).position().top; | |
var mouseX = e.pageX; | |
var mouseY = e.pageY; | |
var left = e.pageX - xPos; | |
var xOffset = left - $(this).width()/2; | |
var top = e.pageY - yPos; | |
var yOffset = top - $(this).height()/2; | |
var xPerc = (xOffset/$(this).width()) * 200; | |
var yPerc = (yOffset/$(this).height()) * 200; | |
TweenMax.to($(this), 2, { | |
rotationX: 0.3 * yPerc, | |
rotationY: -0.3 * xPerc, | |
transformOrigin: "center center -30", | |
ease: Expo.easeOut | |
}); | |
TweenMax.to($(this).find('.frame-grad'), 2, { | |
opacity: top/$(this).height(), | |
ease: Expo.easeOut | |
}); | |
TweenMax.to($(this).find('.frame-shad'), 2, { | |
opacity: 0.15 - top/$(this).height()/2, | |
ease: Expo.easeOut | |
}); | |
}); | |
$('.frame').on('mouseleave', function(){ | |
TweenMax.to($(this), 2, { | |
rotationX: 0, | |
rotationY: 0, | |
transformOrigin: "center center -20", | |
ease: Expo.easeOut | |
}); | |
TweenMax.to($(this).find('.frame-grad'), 2, { | |
opacity: 0.5, | |
ease: Expo.easeOut | |
}); | |
TweenMax.to($(this).find('.frame-shad'), 2, { | |
opacity: 0, | |
ease: Expo.easeOut | |
}); | |
}); | |
console.clear(); | |
/* ========================================================================== | |
Greensock Dev Tools | |
========================================================================== */ | |
//instantiate GSDevTools with default settings | |
// GSDevTools.create( ); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js"></script> |
$width: 250px; | |
$height: $width; | |
$depth: 25px; | |
$gridNum: 200; | |
$white: #ecede8; | |
$red: #c62f24; | |
$frameEdge: #e2e3dc; | |
html { | |
box-sizing: border-box; | |
} | |
*, | |
*:before, | |
*:after { | |
box-sizing: inherit; | |
} | |
body { | |
background: #fdfff3; | |
// background: linear-gradient(top, rgba(white,1) 0%, rgba(#fdfff3,1) 100%); | |
color: black; | |
font-family: 'Cormorant Garamond', serif; | |
} | |
body, | |
html { | |
height: 100%; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
h1, | |
p { | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
} | |
h1 { | |
font-size: 32px; | |
margin: 0; | |
} | |
p { | |
font-size: 12px; | |
margin: 0; | |
} | |
.container { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
height: 100%; | |
} | |
.compositions { | |
display: flex; | |
} | |
.composition { | |
// margin: 100px; | |
width: $width; | |
height: $height; | |
perspective: 900px; | |
margin: 0 $width/10; | |
} | |
.frame { | |
position: relative; | |
width: $width; | |
height: $height; | |
transform-style: preserve-3d; | |
transform: rotateY(0deg); | |
} | |
.frame__face { | |
position: absolute; | |
display: grid; | |
} | |
.frame-grad { | |
position: absolute; | |
z-index: 1; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: linear-gradient(top, rgba(#fff,1) 0%, rgba(#fff,0) 50%); | |
opacity: 0.5; | |
mix-blend-mode: overlay; | |
} | |
.frame-shad { | |
position: absolute; | |
z-index: 1; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: black; | |
opacity: 0; | |
} | |
.frame__face--front { | |
display: grid; | |
grid-template-columns: repeat($gridNum, 1fr); | |
grid-template-rows: repeat($gridNum, 1fr); | |
width: $width; | |
height: $height; | |
background: black; | |
transform: translate3d(0, 0, $depth/2); | |
} | |
.frame__face--back { | |
width: $width; | |
height: $height; | |
transform: rotateY(180deg) translate3d(0, 0, $depth/2); | |
background: white; | |
box-shadow: 0px 16px 60px 0 rgba(0, 0, 0, 0.4); | |
} | |
.frame__face--left { | |
width: $depth; | |
height: $height; | |
transform: rotateY(-90deg) translate3d(0, 0, $depth/2); | |
background: $frameEdge; | |
} | |
.frame__face--right { | |
width: $depth; | |
height: $height; | |
transform: rotateY(90deg) translate3d(0, 0, ($width - $depth/2)); | |
background: $frameEdge; | |
} | |
.frame__face--top { | |
width: $width; | |
height: $depth; | |
transform: rotateX(90deg) translate3d(0, 0, $depth/2); | |
background: white; | |
} | |
.frame__face--bottom { | |
width: $width; | |
height: $depth; | |
transform: rotateX(-90deg) translate3d(0, 0, ($height - $depth/2)); | |
background: #bfc1b9; | |
} | |
.title { | |
margin-top: 80px; | |
text-align: center; | |
} | |
.composition__title { | |
text-align: center; | |
margin-top: 16px; | |
font-size: 10px; | |
letter-spacing: 1px; | |
opacity: 0.5; | |
} | |
/* ========================================================================== | |
Composition 3 | |
========================================================================== */ | |
.composition--3 { | |
.frame__face--front { | |
// background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/composition-3.jpg') no-repeat; | |
// background-size: cover; | |
} | |
.cell1 { | |
background: $red; | |
grid-column: 1 / span 85; | |
grid-row: 1 / span 108; | |
} | |
.cell2 { | |
background: $white; | |
grid-column: span 112 / 201; | |
grid-row: 1 / span 108; | |
} | |
.cell3 { | |
background: $white; | |
grid-column: 1 / span 85; | |
grid-row: 113 / 201; | |
} | |
.cell4 { | |
background: #eeeee4; | |
grid-column: 89 / 184; | |
grid-row: 113 / 192; | |
} | |
.cell5 { | |
background: #ffd700; | |
grid-column: 89 / span 52; | |
grid-row: 196 / 201; | |
} | |
.cell6 { | |
background: #24468e; | |
grid-column: 188 / 201; | |
grid-row: 113 / 146; | |
} | |
.cell7 { | |
background: #eeeee4; | |
grid-column: 188 / 201; | |
grid-row: 152 / 201; | |
} | |
} | |
/* ========================================================================== | |
Composition C | |
========================================================================== */ | |
.composition--c { | |
.frame__face--front { | |
// background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/composition-c.jpg') no-repeat; | |
// background-size: cover; | |
// background: black; | |
} | |
.cell1 { | |
background: $red; | |
grid-column: 1 / span 92; | |
grid-row: 1 / span 80; | |
} | |
.cell2 { | |
background: $white; | |
grid-column: span 105 / 201; | |
grid-row: 1 / span 80; | |
} | |
.cell3 { | |
background: $white; | |
grid-column: 1 / span 92; | |
grid-row: 85 / 129; | |
} | |
.cell4 { | |
background: $white; | |
grid-column: span 105 / 201; | |
grid-row: 85 / 129; | |
} | |
.cell5 { | |
background: #ffd700; | |
grid-column: 1 / span 19; | |
grid-row: 133 / 201; | |
} | |
.cell6 { | |
background: $white; | |
grid-column: 23 / span 70; | |
grid-row: 133 / 201; | |
} | |
.cell7 { | |
background: #20176e; | |
grid-column: 96 / span 60; | |
grid-row: 133 / 190; | |
} | |
.cell8 { | |
background: $white; | |
grid-column: 96 / span 60; | |
grid-row: 194 / 201; | |
} | |
.cell9 { | |
background: $white; | |
grid-column: span 42 / 201; | |
grid-row: 133 / 201; | |
} | |
} | |
/* ========================================================================== | |
Composition 2 | |
========================================================================== */ | |
.composition--2 { | |
.frame__face--front { | |
// background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/composition-2.jpg') no-repeat; | |
// background-size: cover; | |
} | |
.cell1 { | |
background: $white; | |
grid-column: 1 / span 43; | |
grid-row: 1 / span 61; | |
} | |
.cell2 { | |
background: $red; | |
grid-column: span 151 / 201; | |
grid-row: 1 / span 146; | |
} | |
.cell3 { | |
background: $white; | |
grid-column: 1 / span 43; | |
grid-row: 74 / 146; | |
} | |
.cell4 { | |
background: #015b9a; | |
grid-column: 1 / span 43; | |
grid-row: 152 / 201; | |
} | |
.cell5 { | |
background: $white; | |
grid-column: 50 / 180; | |
grid-row: 152 / 201; | |
} | |
.cell6 { | |
background: $white; | |
grid-column: 186 / 201; | |
grid-row: 152 / span 21; | |
} | |
.cell7 { | |
background: #f0de6e; | |
grid-column: 186 / 201; | |
grid-row: 182 / 201; | |
} | |
} | |
.me { | |
position: fixed; | |
z-index: 1000; | |
top: 24px; | |
left: 24px; | |
display: flex; | |
flex-direction: column; | |
} | |
.me__link { | |
position: relative; | |
margin-bottom: 16px; | |
color: black; | |
font-family: Helvetica, sans-serif; | |
text-decoration: none; | |
font-size: 16px; | |
span { | |
display: block; | |
position: absolute; | |
bottom: -3px; | |
left: 0; | |
height: 1px; | |
width: 5%; | |
background-color: black; | |
content: ""; | |
transition: width 0.3s; | |
} | |
&:hover span{ | |
width: 100%; | |
} | |
} | |
.twitter { | |
position: fixed; | |
top: 16px; | |
right: 24px; | |
display: block; | |
width: 40px; | |
height: 40px; | |
} |
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> |