HAML
- cards = [{ title: 'Departure from Wilanów', date: 1887, author: 'Józef Brandt', info: 'of John III Sobieski and Marysienka'},
{ title: 'Shiba Zôjôji', date: 1925, author: 'Hasui Kawase', info: 'from series "12 views of Tokyo"'},
{ title: 'Das große Rasenstück', date: 1503, author: 'Albrecht Dürer', info: 'study of wild plants'},
{ title: 'Długa Street', date: 1780, author: 'Bernardo Bellotto', info: "painted by king Stanisław August's court painter"}]
.screen
- cards.each do |card|
.card
.front-box
%h1 #{card[:title]}
%p #{card[:info]}
.details-1
%p #{card[:author]}
.details-2
%p ~ #{card[:date]} ~
SASS
$bg-color: #202B2E
$accent-color: #D8303D
$paintings: (1: 'https://upload.wikimedia.org/wikipedia/commons/1/19/Brandt_Departure_from_Wilan%C3%B3w.jpg', 2: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Kawase_Z%C3%B4j%C3%B4ji.jpg/398px-Kawase_Z%C3%B4j%C3%B4ji.jpg', 3: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Albrecht_D%C3%BCrer_-_The_Large_Piece_of_Turf%2C_1503_-_Google_Art_Project.jpg/467px-Albrecht_D%C3%BCrer_-_The_Large_Piece_of_Turf%2C_1503_-_Google_Art_Project.jpg', 4: 'https://upload.wikimedia.org/wikipedia/commons/e/ed/Bellotto_Bridgettine_Church_and_Arsenal.jpg?1465410364618')
%details
background-color: white
position: relative
height: 70px
z-index: -10
transition: all .5s ease-in-out
display: flex
html
background-color: $bg-color
display: flex
justify-content: center
align-items: center
height: 100vh
font-family: 'IM Fell French Canon'
body
perspective: 800px
body *
transform-style: preserve-3d
p, h1
margin: 0
font-weight: 700
.screen
width: 400px
margin: 50px
padding-top: 120px
background: transparent
transform: rotate3d(0,1,0, -0deg)
.card
margin: 0
height: 200px
transition: height .5s ease-in-out
@each $id, $painting in $paintings
&:nth-of-type(#{$id})
.front-box
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url($painting)
background-size: cover
.front-box
height: 200px
box-sizing: border-box
display: flex
flex-direction: column
justify-content: center
align-items: center
overflow: hidden
&:hover
cursor: pointer
h1
border-bottom: 2px solid $accent-color
p
opacity: 1
h1
border-bottom: 2px solid transparent
padding-bottom: 5px
top: 55px
left: 20px
color: white
z-index: 20
transition: all .4s ease-in-out
p
color: white
font-style: italic
padding-top: 10px
font-weight: 400
opacity: 0
transition: all .5s ease-in-out .2s
.img-wrapper
height: 200px
overflow: hidden
width: 100%
height: 100%
.details-1
@extend %details
transform: rotate3d(1, 0, 0, -90deg)
transform-origin: top
box-shadow: inset 0px -45px 52px 0px rgba(0,0,0,0.75)
p
margin: auto
.details-2
@extend %details
transform: translate3d(0, -140px, 0px) rotate3d(1, 0, 0, 90deg)
transform-origin: bottom
box-shadow: inset 0px 0px 100px 30px rgba(0,0,0,0.75)
p
margin: auto
.unfold
height: 70px
transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg) !important
box-shadow: inset 0px -45px 52px -70px rgba(0,0,0,0.75) !important
.span
height: 340px !important
JAVASCRIPT
$(document).ready(function(){
$('.card').click(function(){
$(this).find('.details-1, .details-2').toggleClass('unfold').parents('.card').siblings().children('.details-1, .details-2').removeClass('unfold');
$(this).toggleClass('span').siblings('.card').removeClass('span');
});
});
