<script id="templCard" type="x-tmpl-mustache">
<li class="stacked-cards__card card form-card">
<div class="form-card__img"></div>
<div class="form-card__content">
Vraag 1 van 4:<br/>
<b>Wat is je geboortedatum?</b>
</div>
</li>
</script>
<script id="templQ2" type="x-tmpl-mustache">
<li class="stacked-cards__card card form-card">
<div class="form-card__img"></div>
<div class="form-card__content">
<div class="form-card__progress">Vraag 2 van 5:</div>
<div class="form-card__question">Wat is je beroep?</div>
<div class="form-card__input">
<input type="text" class="form__input" placeholder="Kies een beroep"></input>
</div>
<div class="form-card__info">Staat je beroep er niet bij? Neem dan contact met ons op. We helpen je graag verder.</div>
</div>
</li>
</script>
<script id="templQ3" type="x-tmpl-mustache">
<li class="stacked-cards__card card form-card">
<div class="form-card__img"></div>
<div class="form-card__content">
<div class="form-card__progress">Vraag 3 van 5:</div>
<div class="form-card__question">Welk bedrag wil je verzekeren?</div>
<div class="form-card__input">
<input type="text" class="form__input" placeholder="Bruto jaarbedrag"></input>
</div>
<div class="form-card__info">Dit is het bruto bedrag per jaar en is bij deze verzekering maximaal €45.000. Wil je een hoger bedrag verzekeren? Neem dan contact met ons op.</div>
</div>
</li>
</script>
<script id="templQ4" type="x-tmpl-mustache">
<li class="stacked-cards__card card form-card">
<div class="form-card__img"></div>
<div class="form-card__content">
<div class="form-card__progress">Vraag 4 van 5:</div>
<div class="form-card__question">Hoe lang kun je zonder uitkering?</div>
<div class="form-card__input">
<input type="radio" name="days" id="14days" value="14"></input>
<label class="form__radio" for="14days">14 dagen</label>
<input type="radio" name="days" id="30days"></input>
<label class="form__radio" for="30days" value="30">30 dagen</label>
<input type="radio" name="days" id="60days"></input>
<label class="form__radio" for="60days" value="60">60 dagen</label>
</div>
</div>
</li>
</script>
<script id="templQ5" type="x-tmpl-mustache">
<li class="stacked-cards__card card form-card">
<div class="form-card__img"></div>
<div class="form-card__content">
<div class="form-card__progress">Vraag 5 van 5:</div>
<div class="form-card__question">Wat is je gewenste uitkeringsduur?</div>
<div class="form-card__input">
<input type="radio" name="years" id="2years" value="2"></input>
<label class="form__radio" for="2years">2 jaar</label>
<input type="radio" name="years" id="5years"></input>
<label class="form__radio" for="5years" value="5">5 jaar</label>
</div>
</div>
</li>
</script>
<script id="templSummary" type="x-tmpl-mustache">
<li class="stacked-cards__card card summary">
<div class="summary__text">Uit deze gegevens blijkt dat je het beste af bent met een AOV 2.5. Wijzig hieronder je gegevens of sluit hem direct af.</div>
<ul class="summary__list">
<li class="summary__item">
Geboortedatum: 18-06-1985
<button type="button" class="summary__edit-btn"></button>
</li>
<li class="summary__item">
Beroep: Consulant
<button type="button" class="summary__edit-btn"></button>
</li>
<li class="summary__item">
Verzekerd bedrag: € 2000
<button type="button" class="summary__edit-btn"></button>
</li>
<li class="summary__item">
Looptijd: 2 jaar
<button type="button" class="summary__edit-btn"></button>
</li>
<li class="summary__item">
Overbruggingsperiode: 30 dagen
<button type="button" class="summary__edit-btn"></button>
</li>
</ul>
</li>
</script>
<div class="container">
<div class="stacked-cards">
<ul class="stacked-cards__stack js-stacked-cards">
<li class="stacked-cards__card card premium">
<div class="premium__content">
<div class="premium__title">AOV premie voor jouw situatie</div>
<div class="premium__amount">€ 35,56</div>
<div class="premium__footer">Bruto p.m.</div>
<a href="#" class="premium__details">Bekijk details en premieverloop</a>
</div>
</li>
<li class="stacked-cards__card card form-card">
<div class="form-card__img"></div>
<div class="form-card__content">
<div class="form-card__progress">Vraag 1 van 5:</div>
<div class="form-card__question">Wat is je geboortedatum?</div>
<div class="form-card__input">
<input type="text" class="form__input" placeholder="DD-MM-JJJJ"></input>
</div>
</div>
</li>
<li class="stacked-cards__card card" data-card-id="templQ2">
<div class="card__loader"></div>
</li>
<li class="stacked-cards__card card" data-card-id="templQ3">
<div class="card__loader"></div>
</li>
<li class="stacked-cards__card card" data-card-id="templQ4">
<div class="card__loader"></div>
</li>
<li class="stacked-cards__card card" data-card-id="templQ5">
<div class="card__loader"></div>
</li>
<li class="stacked-cards__card card" data-card-id="templSummary">
<div class="card__loader"></div>
</li>
</ul>
<div class="stacked-cards__nav">
<div class="stacked-cards__prev">
<button type="button" class="stacked-cards__prev-btn js-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16">
<path fill="#FFF" fill-rule="evenodd" d="M20.374 8.518l-.152-.009H.805a.805.805 0 0 1 0-1.61h19.417l.132-.008-.133-.16-5.639-5.278a.824.824 0 0 1-.02-1.185.869.869 0 0 1 1.217-.012l7.022 6.75a.952.952 0 0 1 .122.142.91.91 0 0 1-.003 1.115.952.952 0 0 1-.118.137l-7.022 6.751a.869.869 0 0 1-1.237-.034.822.822 0 0 1 .042-1.162c3.361-3.124 5.24-4.883 5.636-5.279.048-.048.099-.101.153-.158z"/>
</svg>
</button>
</div>
<div class="stacked-cards__next">
<button type="button" class="stacked-cards__next-btn js-next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16">
<path fill="#FFF" fill-rule="evenodd" d="M20.374 8.518l-.152-.009H.805a.805.805 0 0 1 0-1.61h19.417l.132-.008-.133-.16-5.639-5.278a.824.824 0 0 1-.02-1.185.869.869 0 0 1 1.217-.012l7.022 6.75a.952.952 0 0 1 .122.142.91.91 0 0 1-.003 1.115.952.952 0 0 1-.118.137l-7.022 6.751a.869.869 0 0 1-1.237-.034.822.822 0 0 1 .042-1.162c3.361-3.124 5.24-4.883 5.636-5.279.048-.048.099-.101.153-.158z"/>
</svg>
</button>
</div>
</div>
</div>
</div>$diff: 4px;
$border-radius: 8px;
$duration: 0.4s;
* {
box-sizing: border-box;
}
body {
background-color: #9cd4ef;
font-family: Arial;
margin: 4rem 0;
}
.container {
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
input[type=radio] {
display: none;
}
.premium {
display: flex;
flex-direction: column;
&__content {
overflow-x: hidden;
position: relative;
flex-grow: 1;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
text-align: center;
color: white;
&:before {
content: '';
border-radius: 50%;
height: 420px;
width: 130%;
position: absolute;
left: 50%;
top: 0;
background-color: #ff8d00;
transform: translate(-50%, -45%);
z-index: -1;
}
}
&__title {
font-size: 16px;
line-height: 19px;
margin-top: 2.25rem;
margin-bottom: 1rem;
}
&__amount {
font-size: 46px;
margin-bottom: 0.5rem;
}
&__footer {
}
&__details {
color: #1b94d8;
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
}
}
.form {
&__input {
border: solid 1px #dedddd;
border-radius: 2px;
font-size: 14px;
line-height: 22px;
padding: 0.75rem 1rem;
margin-top: 1rem;
width: 100%;
outline: 0;
&:hover, &:focus {
border-color: gray;
}
}
&__radio {
cursor: pointer;
display: block;
border-bottom: 1px solid #d8d8d8;
margin-left: -1rem;
margin-right: -1rem;
padding: 1.25rem;
padding-left: 3.75rem;
position: relative;
&:before {
border: solid 1px #dedddd;
border-radius: 50%;
content: '';
position: absolute;
height: 30px;
width: 30px;
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
&:hover:before {
border-color: gray;
}
input[type=radio]:checked + &:after {
border-radius: 50%;
content: '';
background-color: #ff8d00;
height: 20px;
width: 20px;
left: calc(1rem + 6px);
top: 50%;
transform: translateY(-50%);
position: absolute;
}
&:last-child {
border-bottom: 0;
}
}
}
.card {
&__loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
background-image: url(https://i.vimeocdn.com/portrait/16638942_300x300);
background-size: contain;
animation: loader 1.5s infinite;
transform-origin: 50% 50%;
}
}
.form-card {
display: flex;
flex-direction: column;
&__img {
background-image: url(https://www.amersfoortse.nl/-/media/images/ondernemer/hero-ondernemer-de-amersfoortse.png);
background-size: cover;
background-position: center center;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
height: 114px;
}
&__content {
padding: 1rem;
padding-bottom: 0.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
line-height: 19px;
}
&__progress, &__question {
font-size: 14px;
}
&__question {
font-weight: bold;
}
&__input {
flex-grow: 1;
}
&__info {
font-size: 12px;
margin-bottom: 1rem;
}
}
.summary {
font-size: 14px;
line-height: 19px;
&__text {
padding: 1rem 1rem 1.75rem;
}
&__list {
list-style-type: none;
padding: 0;
}
&__item {
border-top: 1px solid #d8d8d8;
padding: 1rem;
padding-right: 2rem;
position: relative;
}
&__edit-btn {
content: '';
cursor: pointer;
position: absolute;
border: 0;
padding: 0;
background-color: transparent;
background-image: url(https://image.flaticon.com/icons/svg/61/61456.svg);
background-size: contain;
height: 16px;
width: 16px;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
}
.stacked-cards {
margin-bottom: 1rem;
&__stack {
list-style-type: none;
padding-left: 0;
position: relative;
margin: 0 0 1rem;
}
&__card {
background-color: white;
border-radius: $border-radius;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
min-height: 367px;
transition: all $duration ease-in-out;
&:nth-child(1) {
box-shadow: 0 22px 44px -10px rgba(0, 0, 0, 0.28);
top: 0;
margin-left: 0;
margin-right: 0;
z-index: 4;
position: relative;
}
&:nth-child(2) {
bottom: -($diff * 1);
margin-left: $diff * 1;
margin-right: $diff * 1;
z-index: 3;
}
&:nth-child(3) {
bottom: -($diff * 2);
margin-left: $diff * 2;
margin-right: $diff * 2;
background-color: #e1e1e1;
box-shadow: 0 9px 14px -10px rgba(0, 0, 0, 0.14);
z-index: 2;
}
&:nth-child(1n+4) {
bottom: -($diff * 3);
margin-left: $diff * 3;
margin-right: $diff * 3;
background-color: #e1e1e1;
box-shadow: 0 9px 14px -10px rgba(0, 0, 0, 0.14);
opacity: 0;
z-index: 1;
}
}
&__nav {
display: flex;
}
&__prev {
flex-grow: 1;
}
&__prev-btn, &__next-btn {
border: 0;
background-color: rgba(27,148,216, 1);
border-radius: 50%;
height: 48px;
width: 48px;
cursor: pointer;
position: relative;
outline: 0;
transition: background-color 0.3s;
&[disabled] {
background-color: rgba(27,148,216, 0.2);
cursor: default;
}
svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&__prev-btn {
transform: rotateY(180deg);
}
&--next {
.stacked-cards__card {
&:nth-child(1) {
animation: swipeCard $duration;
@media screen and (max-width: 768px) {
animation: swipeCardPortable $duration;
}
}
&:nth-child(2) {
box-shadow: 0 22px 44px -10px rgba(0, 0, 0, 0.28);
bottom: 0;
margin-left: 0;
margin-right: 0;
}
&:nth-child(3) {
bottom: -($diff * 1);
margin-left: $diff * 1;
margin-right: $diff * 1;
}
&:nth-child(4) {
bottom: -($diff * 2);
margin-left: $diff * 2;
margin-right: $diff * 2;
background-color: #e1e1e1;
box-shadow: 0 9px 14px -10px rgba(0, 0, 0, 0.14);
}
}
}
&--prev {
.stacked-cards__card {
&:nth-child(1) {
animation: swipeCard $duration;
animation-direction: reverse;
z-index: 6;
@media screen and (max-width: 768px) {
animation: swipeCardPortable $duration;
animation-direction: reverse;
}
}
}
}
}
@keyframes swipeCardPortable {
0% { transform: translateX(0) rotate(0); }
100% { transform: translateX(-500px) rotate(-45deg); }
}
@keyframes swipeCard {
0% { transform: translateX(0) rotate(0); opacity: 1; }
30% { opacity: 1; }
80% { opacity: 0; }
100% { transform: translateX(-500px) rotate(-45deg); opacity: 0; }
}
@keyframes loader {
0% { transform: translate(-50%, -50%) rotate(0deg); }
80% { transform: translate(-50%, -50%) rotate(360deg); }
}var cardTpl = $('#templCard').html();
function enablePrevBtn() {
$('.js-prev').attr('disabled', false);
}
function disablePrevBtn() {
$('.js-prev').attr('disabled', true);
}
function enableNextBtn() {
$('.js-next').attr('disabled', false);
}
function disableNextBtn() {
$('.js-next').attr('disabled', true);
}
function disableBtns() {
disablePrevBtn();
disableNextBtn();
}
function enableBtns() {
enablePrevBtn();
enableNextBtn();
}
function prevCard() {
var $this = $(this),
$nextBtn = $('js-next'),
$stacked = $('.js-stacked-cards');
disableBtns();
$stacked.one('animationend', onAnimationEnd);
$stacked.prepend(cardTpl);
$stacked.addClass('stacked-cards--prev');
function onAnimationEnd() {
$stacked.removeClass('stacked-cards--prev');
$this.attr('disabled', false);
enableBtns();
}
}
function nextCard() {
var $this = $(this),
$prevBtn = $('js-prev'),
$stacked = $('.js-stacked-cards');
disableBtns();
setTimeout(nextResponseHandler, 1500);
$this.attr('disabled', true);
$prevBtn.attr('disabled', true);
$stacked.children().eq(1).addClass('js-active');
$stacked.one('animationend', onAnimationEnd);
$stacked.addClass('stacked-cards--next');
function onAnimationEnd() {
$stacked.children().first().remove();
$stacked.removeClass('stacked-cards--next');
enablePrevBtn();
if($stacked.children().length > 1) {
enableNextBtn();
}
}
}
function nextResponseHandler() {
var $active = $('.js-active'),
id = $active.data('card-id'),
tpl = $('#' + id).html();
$active.replaceWith(tpl);
}
function bind() {
$(document)
.on(
'click',
'.js-prev',
prevCard
)
.on(
'click',
'.js-next',
nextCard
);
}
bind();
External CSS
This Pen doesn't use any external CSS resources.