3D vertical accordion

- 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]} ~
$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
$(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'); }); });
Expand for more options Login