<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/makaveli-dev-web/pen/mOaopM" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:300,400'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: auto;
-ms-text-size-adjust: auto;
text-size-adjust: auto;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
html {
font-size: 100%;
}
body {
background: #FF6A68;
font-family: "Raleway", sans-serif;
}
a {
text-decoration: none;
}
button {
border: none;
outline: 0;
outline-offset: 0;
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/blurred-cursor-bis.png) 20 21, auto;
}
.screen {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
width: 320px;
height: 548px;
overflow: hidden;
box-shadow: 0 2px 40px rgba(0, 10, 19, 0.9);
background: #fff;
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/blurred-cursor-bis.png) 20 21, auto;
}
.app {
position: relative;
width: 100%;
height: 493px;
background: #fff;
}
.app ul.layer {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
display: none;
}
.app ul.movies {
position: relative;
list-style: none;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.app li.movie {
position: relative;
width: 100%;
z-index: 10;
}
.app li.movie .movie__infos {
position: absolute;
height: 86px;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
color: #fff;
letter-spacing: 1px;
padding: 10px 10px 10px 20px;
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.app li.movie .movie__category {
font-weight: 300;
margin-bottom: 6px;
text-transform: uppercase;
font-size: .6rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.app li.movie .movie__title {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
font-weight: 300;
font-size: 1.25rem;
margin-bottom: 10px;
font-weight: 500;
}
.app li.movie .movie__rank {
display: inline-block;
font-size: .6rem;
border-radius: 4px;
padding: 6px 8px;
color: #fff;
}
.app li.movie .rank-18 {
background: #CC374A;
}
.app li.movie .rank-16 {
background: #BD10E0;
}
.app li.movie .rank-A {
background: #83C937;
}
.app li.movie .movie_rate {
display: inline-block;
margin-left: 16px;
}
.app li.movie .movie_rate span, .app li.movie .movie_rate ul {
display: inline-block;
vertical-align: middle;
}
.app li.movie span.rate {
font-size: .75rem;
}
.app li.movie li.star {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
margin-right: -4px;
}
.app li.movie li.star svg {
width: inherit;
height: inherit;
}
.app li.movie li.star svg.on {
fill: #F8E71C;
}
.app li.movie li.star svg.off {
fill: #A39D96;
}
.app li.movie.clone {
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.app li.movie.clone .btn-container {
position: absolute;
left: 0;
bottom: 0;
padding: 10px 16px;
z-index: 30;
opacity: 0;
-webkit-transition: 0.25s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.25s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.app li.movie.clone .btn {
position: relative;
display: inline-block;
vertical-align: middle;
border-radius: 4px;
font-family: "Montserrat", sans-serif;
font-size: .75rem;
text-align: center;
padding: 10px 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.app li.movie.clone .btn--save {
color: #F30015;
background: #fff;
}
.app li.movie.clone .btn--tickets {
color: #fff;
background: #F30015;
}
.app li.movie.clone .btn:not(:last-child) {
margin-right: 8px;
}
.app li.movie.clone.focus {
height: 100% !important;
top: 0 !important;
}
.app li.movie.clone.focus .movie__infos {
height: 200px;
-webkit-transition: 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.app li.movie.clone.focus .btn-container {
opacity: 1;
-webkit-transition: 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.app li.movie.off {
opacity: 0;
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98), opacity 0.25s 0.35s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98), opacity 0.25s 0.35s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.app .box-shadow-top, .app .box-shadow-bottom {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 10px;
-webkit-transition: .25s ease-out;
transition: .25s ease-out;
background: none;
}
.app .box-shadow-top {
top: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
}
.app .box-shadow-bottom {
bottom: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
}
.header {
position: relative;
z-index: 20;
height: 55px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/header-bg-bis.png) no-repeat center top;
overflow: hidden;
opacity: .995;
}
.header .network {
position: absolute;
left: 6px;
top: 5px;
height: 16px;
}
.header .network .circle {
display: inline-block;
vertical-align: top;
width: 5px;
height: 5px;
background: #697282;
border-radius: 50%;
margin-right: 2px;
}
.header .network h3.network__name {
display: inline-block;
vertical-align: top;
color: #697282;
font-family: "Montserrat", sans-serif;
font-size: .65rem;
}
.header .network svg.wifi {
position: relative;
display: inline-block;
vertical-align: top;
width: 14px;
height: 14px;
top: -4px;
fill: #697282;
}
.header .clock {
position: absolute;
left: 50%;
top: 5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #697282;
font-size: .75rem;
font-family: "Montserrat", sans-serif;
}
.header .title {
position: absolute;
width: 70%;
left: 50%;
bottom: -14px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #fff;
letter-spacing: 1px;
font-size: .9rem;
text-align: center;
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.header .title .movie__title {
margin-top: 10px;
font-family: "Raleway", sans-serif;
}
.header .title h2.inactive {
opacity: 0;
}
.header .title h2.active {
opacity: 1;
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98), opacity 0.4s 0.075s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98), opacity 0.4s 0.075s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.header .battery {
position: absolute;
top: 0;
right: 10px;
color: #697282;
font-family: "Montserrat", sans-serif;
}
.header h3.battery__percentage {
display: inline-block;
vertical-align: middle;
font-size: .75rem;
}
.header .battery__icon {
display: inline-block;
vertical-align: middle;
width: 22px;
height: 22px;
fill: #697282;
}
.header .menu {
position: absolute;
left: 8px;
bottom: 8px;
height: 26px;
}
.header .menu svg {
position: relative;
display: inline-block;
vertical-align: middle;
width: 26px;
height: 26px;
fill: #fff;
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
.header .menu svg.active {
opacity: 1;
}
.header .menu svg.inactive {
opacity: 0;
-webkit-transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98), opacity 0.2s cubic-bezier(0.17, 0.67, 0.23, 0.98);
transition: 0.4s cubic-bezier(0.17, 0.67, 0.23, 0.98), opacity 0.2s cubic-bezier(0.17, 0.67, 0.23, 0.98);
}
</style></head><body>
<!-- config //-->
<!--////////////////////////////-->
<!-- icons //-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none!important">
<symbol id="icon-star" viewbox="0 0 20 21">
<g fill-rule="evenodd" stroke="none" stroke-width="1">
<g fill-rule="evenodd" transform="translate(-296.000000, -422.000000)">
<g transform="translate(296.000000, 422.500000)">
<path d="M10,15.273 L16.18,19 L14.545,11.971 L20,7.244 L12.809,6.627 L10,0 L7.191,6.627 L0,7.244 L5.455,11.971 L3.82,19 L10,15.273 Z"></path>
</g>
</g>
</g>
</symbol>
<symbol id="icon-battery" viewbox="0 0 16 16">
<g fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1">
<g fill-rule="evenodd" transform="translate(-816.000000, -48.000000)">
<path d="M817,53 L817,59 L830,59 L830,53 Z M817.007484,52 L829.992516,52 C830.55108,52 831,52.4463856 831,52.9970301 L831,54 L832,54 L832,58 L831,58 L831,59.0029699 C831,59.5469637 830.548934,60 829.992516,60 L817.007484,60 C816.44892,60 816,59.5536144 816,59.0029699 L816,52.9970301 C816,52.4530363 816.451066,52 817.007484,52 Z M818,54 L826,54 L826,58 L818,58 Z M818,54" id="Rectangle 147"></path>
</g>
</g>
</symbol>
<symbol id="icon-nav" viewbox="0 0 48 48">
<path d="M0 0h48v48h-48z" fill="none"></path>
<path fill-rule="evenodd" d="M6 36h36v-4h-36v4zm0-10h36v-4h-36v4zm0-14v4h36v-4h-36z"></path>
</symbol>
<symbol id="icon-back" viewbox="0 0 128 128">
<line style="stroke:#ffffff;stroke-width:12;stroke-linecap:square;stroke-miterlimit:10" x1="87.5" x2="40.5" y1="111" y2="64"></line>
<line style="stroke:#ffffff;stroke-width:12;stroke-linecap:square;stroke-miterlimit:10" x1="40.5" x2="87.5" y1="64" y2="17"></line>
</symbol>
<symbol id="icon-wifi" viewbox="0 0 512 512">
<path d="M256.1,96L256.1,96c-79.9,0-155.7,29.9-213.9,84.1L32,189.6l9.9,9.8l32.3,32l9.3,9.2l9.6-8.8 c44.5-40.9,102.3-63.5,162.8-63.5c60.5,0,118.4,22.6,162.8,63.5l9.6,8.8l9.3-9.2l32.3-32l9.9-9.8l-10.2-9.5 C411.6,125.9,335.7,96,256.1,96z"></path>
<path d="M397.4,256.4c-38.8-35.1-88.9-54.4-141.1-54.4h-0.1h-0.3h-8.5l-0.1,0.2c-49.2,2-96,21.1-132.6,54.2l-10.5,9.5l10.1,10 l32.7,32.4l9.1,9l9.6-8.4c25.3-22.2,57.4-34.5,90.3-34.5c33.1,0,65.2,12.3,90.5,34.5l9.6,8.4l9.1-9l32.7-32.4l10.1-10L397.4,256.4z "></path>
<path d="M256.2,416l9.6-9.5l52.8-52.2l10.6-10.5l-11.6-9.5c-15.4-11.4-32.4-20-61.5-20c-29,0-44.9,9.4-61.5,20l-11.5,9.5l10.6,10.5 l52.8,52.2L256.2,416z"></path>
</symbol>
</svg>
<!--////////////////////////////-->
<!-- app //-->
<div class="screen">
<header class="header">
<div class="network"><span class="circle"></span><span class="circle"></span><span class="circle"></span><span class="circle"></span><span class="circle"></span>
<h3 class="network__name">Sketch</h3>
<svg class="wifi">
<use xlink:href="#icon-wifi"></use>
</svg>
</div>
<div class="menu">
<svg class="nav active">
<use xlink:href="#icon-nav"></use>
</svg>
<svg class="back inactive">
<use xlink:href="#icon-back"></use>
</svg>
</div>
<div class="clock">9:41 AM</div>
<div class="title">
<h2 class="app__title active">MoVi</h2>
<h2 class="movie__title inactive">Test</h2>
</div>
<div class="battery">
<h3 class="battery__percentage">81%</h3>
<svg class="battery__icon">
<use xlink:href="#icon-battery"></use>
</svg>
</div>
</header>
<div class="app">
<ul class="layer"></ul>
<ul class="movies list-1 touch-y">
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/warcraft-the-movie-bis.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #877A62)">
<div class="movie__category" style="color:#fff">fantasy, scifi</div>
<div class="movie__title" style="color:#fff">Warcraft the movie</div>
<div class="movie__rank rank-18">Rated 18</div>
<div class="movie_rate"><span class="rate">4/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="off">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/batman-v-superman-the-movie.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #BB957A)">
<div class="movie__category" style="color:#fff">fantasy, scifi</div>
<div class="movie__title" style="color:#fff">Batman vs Superman</div>
<div class="movie__rank rank-16">Rated 16</div>
<div class="movie_rate"><span class="rate">5/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/kung-fu-panda-3-the-movie.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #3092A5)">
<div class="movie__category" style="color:#000">action, comedy</div>
<div class="movie__title" style="color:#000">KungFu Panda 3</div>
<div class="movie__rank rank-A">Rated A</div>
<div class="movie_rate"><span class="rate">3/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="off">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="off">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/captain-america-civil-war-the-movie.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #012340)">
<div class="movie__category" style="color:#fff">scifi, action</div>
<div class="movie__title" style="color:#fff">Captain America : Civil War</div>
<div class="movie__rank rank-16">Rated 16</div>
<div class="movie_rate"><span class="rate">5/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/mad-max-fury-road-the-movie.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #95AC43)">
<div class="movie__category" style="color:#fff">scifi, action</div>
<div class="movie__title" style="color:#fff">Mad Max : Fury Road</div>
<div class="movie__rank rank-18">Rated 18</div>
<div class="movie_rate"><span class="rate">5/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/django-unchained-the-movie-bis.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #CCCCCC)">
<div class="movie__category" style="color:#000">Western, action</div>
<div class="movie__title" style="color:#000">Django Unchained</div>
<div class="movie__rank rank-18">Rated 18</div>
<div class="movie_rate"><span class="rate">5/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/jurassic-world-the-movie.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #072F4A)">
<div class="movie__category" style="color:#fff">scifi,action</div>
<div class="movie__title" style="color:#fff">Jurassic World</div>
<div class="movie__rank rank-16">Rated 16</div>
<div class="movie_rate"><span class="rate">3/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="off">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="off">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
<li class="movie" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/star-wars-vii-the-movie-bis.jpg) no-repeat center top; background-size: cover">
<div class="movie__infos" style="background:linear-gradient(to bottom, transparent, #393A4C)">
<div class="movie__category" style="color:#fff">scifi, action</div>
<div class="movie__title" style="color:#fff">Star Wars VII</div>
<div class="movie__rank rank-A">Rated A</div>
<div class="movie_rate"><span class="rate">4/5</span>
<ul class="stars">
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="on">
<use xlink:href="#icon-star"></use>
</svg>
</li>
<li class="star">
<svg class="off">
<use xlink:href="#icon-star"></use>
</svg>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="box-shadow-top"></div>
<div class="box-shadow-bottom"></div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';
/*jshint esversion:6*/
(function () {
var events = [];
Element.prototype.on = function (event, func) {
var _this = this;
var findElement = events.filter(function (handler) {
return handler.el === _this;
});
if (findElement.length) {
//l'element existe deja
var findEvent = events.find(function (handler) {
return handler.event === event;
});
if (typeof findEvent !== 'undefined') {
//l'evenement existe deja pour cet element
findEvent.func.push(func);
this.addEventListener(event, func);
return;
}
}
events.push({
el: this,
event: event,
func: [func]
});
this.addEventListener(event, func);
};
Element.prototype.off = function (event, func) {
var _this2 = this;
var handler = events.filter(function (handler) {
return handler.el === _this2;
});
handler = handler.find(function (handler) {
return handler.event === event;
});
var handlerIndex = events.findIndex(function (h) {
return h === handler;
});
if (typeof handler !== 'undefined') {
if (!func) {
events.splice(handlerIndex, 1);
handler.func.forEach(function (f) {
return _this2.removeEventListener(event, f);
});
return;
}
handler.func.forEach(function (f) {
if (f.toString() === func.toString()) {
events.splice(handlerIndex, 1);
_this2.removeEventListener(event, f);
}
});
}
};
})();
var getCSS = function getCSS(element, property) {
return window.getComputedStyle(element).getPropertyValue(property);
};
var setCSS = function setCSS(element) {
var props = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var properties = Object.keys(props);
properties.forEach(function (prop) {
return element.style[prop] = props[prop];
});
};
(function () {
var doc = document.documentElement;
var movies = Array.prototype.slice.call(document.querySelectorAll('.movie'));
var title = {
selector: document.querySelector('.title'),
appName: document.querySelector('.title .app__title'),
movieName: document.querySelector('.title .movie__title'),
showMovieTitle: function showMovieTitle(title) {
this.movieName.textContent = title;
this.appName.classList.remove('active');
this.appName.classList.add('inactive');
this.movieName.classList.remove('inactive');
this.movieName.classList.add('active');
this.selector.style.bottom = '12px';
},
hideMovieTitle: function hideMovieTitle() {
this.appName.classList.add('active');
this.appName.classList.remove('inactive');
this.movieName.classList.add('inactive');
this.movieName.classList.remove('active');
this.selector.style.bottom = '-14px';
}
};
var menu = {
selector: document.querySelector('.menu'),
goTo: function goTo(menuClassName) {
var allMenus = Array.prototype.slice.call(this.selector.querySelectorAll('svg'));
var currentIndex = undefined,
nextIndex = undefined;
var left = 0;
for (var i = 0, j = allMenus.length; i < j; i++) {if (window.CP.shouldStopExecution(1)){break;}
if (allMenus[i].classList.contains('active')) {
currentIndex = i;
}
if (!allMenus[i].classList.contains(menuClassName)) {
allMenus[i].classList.remove('active');
allMenus[i].classList.add('inactive');
left += parseInt(getCSS(allMenus[i], 'width')) + 4;
continue;
}
nextIndex = i;
allMenus[i].classList.add('active');
allMenus[i].classList.remove('inactive');
allMenus[0].style.marginLeft = left * (nextIndex > currentIndex ? -1 : 1) + 'px';
}
window.CP.exitedLoop(1);
},
init: function init() {
var _this3 = this;
var back = this.selector.querySelector('.back');
back.on('click', function (e) {
if (!back.classList.contains('active')) return;
var movieZoom = document.querySelector('.layer');
var zoomedMovie = movieZoom.querySelector('.focus');
if (zoomedMovie === null) return;
if (zoomedMovie.classList.contains('zoomOut')) return;
zoomedMovie.classList.add('zoomOut');
window.setTimeout(function () {
_this3.goTo('nav');
title.hideMovieTitle();
zoomedMovie.classList.add('off');
zoomedMovie.classList.remove('focus');
window.setTimeout(function () {
movieZoom.style.zIndex = 0;
movieZoom.removeChild(zoomedMovie);
}, 400);
}, 350);
});
}
};
menu.init();
var init = function init() {
var nbItemsInVue = 3;
var container = movies[0].parentNode.parentNode;
var movieHeight = container.clientHeight / nbItemsInVue;
movies[0].parentNode.style.height = movies.length * movieHeight + 'px';
movies.forEach(function (movie, index) {
movie.style.height = movieHeight + 'px';
});
};
init();
var showMovie = function showMovie(movie) {
if (movie.classList.contains('focus')) return;
var movieZoom = document.querySelector('ul.layer');
var translateY = getCSS(movie.parentNode, 'transform').split(',');
var distY = translateY[translateY.length - 1];
var top = movie.offsetTop - distY.substring(0, distY.length - 1) * -1;
setCSS(movieZoom, { display: 'block', 'z-index': 1 });
window.setTimeout(function () {
menu.goTo('back');
title.showMovieTitle(movie.querySelector('.movie__title').textContent);
var clone = movie.cloneNode(true);
setCSS(clone, {
width: getCSS(movie, 'width'),
height: getCSS(movie, 'height'),
position: 'absolute',
'z-index': 20,
top: top + 'px',
background: getCSS(movie, 'background-image') + ' no-repeat center top',
backgroundSize: 'cover'
});
clone.classList.add('clone');
var btnContainer = document.createElement('section');
btnContainer.setAttribute('class', 'btn-container');
var btnSave = document.createElement('button');
var btnTickets = document.createElement('button');
btnSave.setAttribute('class', 'btn btn--save');
btnTickets.setAttribute('class', 'btn btn--tickets');
btnSave.appendChild(document.createTextNode('Save'));
btnTickets.appendChild(document.createTextNode('Book tickets now!'));
btnContainer.appendChild(btnSave);
btnContainer.appendChild(btnTickets);
clone.appendChild(btnContainer);
movieZoom.appendChild(clone);
window.setTimeout(function () {
return clone.classList.add('focus');
}, 10);
}, 300);
};
movies.forEach(function (movie) {
movie.on('click', function (e) {
return showMovie(movie);
});
});
doc.on('mousedown', function (e) {
console.log('mousedown!');
var move = false;
var target = e.target;
var tag = target.tagName.toLowerCase();
var parent = target;
var posY = e.screenY;
if (parent === document) return;
while (tag !== 'body' && !parent.classList.contains('touch-y')) {if (window.CP.shouldStopExecution(2)){break;}
parent = parent.parentNode;
if (parent === document) return;
}
window.CP.exitedLoop(2);
var transform = getCSS(parent, 'transform');
var boxShadowTop = parent.parentNode.querySelector('.box-shadow-top');
var boxShadowBottom = parent.parentNode.querySelector('.box-shadow-bottom');
var boxShadowBottomProp = undefined,
boxShadowBottomColor = undefined,
boxShadowTopProp = undefined,
boxShadowTopColor = undefined;
if (boxShadowBottom !== null) {
boxShadowBottomProp = getCSS(boxShadowBottom, 'box-shadow');
boxShadowBottomColor = boxShadowBottomProp.slice(0, boxShadowBottomProp.lastIndexOf(')') + 1);
}
if (boxShadowTop !== null) {
boxShadowTopProp = getCSS(boxShadowTop, 'box-shadow');
boxShadowTopColor = boxShadowTopProp.slice(0, boxShadowTopProp.lastIndexOf(')') + 1);
}
var translateY = transform.substring(transform.lastIndexOf(',') + 2, transform.lastIndexOf(')'));
if (parent.clientHeight < parent.parentNode.clientHeight) return;
doc.on('mousemove', function (e) {
move = true;
e.preventDefault();
movies.forEach(function (movie) {
return movie.off('click');
});
var newTransform = getCSS(parent, 'transform');
var newTranslate = newTransform.substring(newTransform.lastIndexOf(',') + 2, newTransform.lastIndexOf(')'));
var newGap = Number(parent.clientHeight) - Number(newTranslate * -1);
var parentHeight = parent.clientHeight;
var max = parent.parentNode.clientHeight;
var gap = e.screenY - posY;
var newTranslateY = translateY - -1 * gap;
parent.style.transition = '0.0s ease-out';
var isOverflow = newGap >= parentHeight && gap > 0 || newGap <= max && gap < 0;
parent.style.transform = 'translateY(' + newTranslateY + 'px)';
if (newGap <= max && gap < 0 && boxShadowBottom !== null) {
boxShadowBottom.style.transition = '0.0s ease-out';
boxShadowBottom.style.boxShadow = boxShadowBottomColor + ' 0px -4px ' + (max - newGap < 120 ? max - newGap : 120) + 'px ' + (max - newGap) / 4 + 'px';
}
if (newGap >= parent.clientHeight && gap > 0 && boxShadowTop !== null) {
boxShadowTop.style.transition = '0.0s ease-out';
boxShadowTop.style.boxShadow = boxShadowTopColor + ' 0px 4px ' + ((0 - gap) * -1 < 120 ? (0 - gap) * -1 : 120) + 'px ' + (0 - gap) * -1 / 4 + 'px';
}
});
doc.on('mouseup', function (e) {
doc.off('mousemove');
doc.off('mouseup');
if (move) {
window.setTimeout(function () {
movies.forEach(function (movie) {
return movie.on('click', function (e) {
return showMovie(movie);
});
});
}, 10);
}
var newTransform = getCSS(parent, 'transform');
var newTranslate = newTransform.substring(newTransform.lastIndexOf(',') + 2, newTransform.lastIndexOf(')'));
var newGap = Number(parent.clientHeight) - Number(newTranslate * -1);
var max = parent.parentNode.clientHeight;
var gap = e.screenY - posY;
var isOverflow = newGap <= max && gap < 0 || newGap >= parent.clientHeight && gap > 0;
if (boxShadowBottom !== null) {
boxShadowBottom.style.transition = '.25s ease-out';
boxShadowBottom.style.boxShadow = boxShadowBottomColor + ' 0px 0px 0px 0px';
}
if (boxShadowTop !== null) {
boxShadowTop.style.transition = '.25s ease-out';
boxShadowTop.style.boxShadow = boxShadowTopColor + ' 0px 0px 0px 0px';
}
if (isOverflow) {
parent.style.transition = '.4s cubic-bezier(.17,.67,.23,.99)';
parent.style.transform = 'translateY(' + (newGap <= max && gap < 0 ? max - parent.clientHeight : 0) + 'px)';
}
});
});
/* mobile */
doc.on('touchstart', function (e) {
var target = e.target;
var tag = target.tagName.toLowerCase();
var parent = target;
var posY = e.changedTouches[0].pageY;
if (parent === document) return;
while (tag !== 'body' && !parent.classList.contains('touch-y')) {if (window.CP.shouldStopExecution(3)){break;}
parent = parent.parentNode;
if (parent === document) return;
}
window.CP.exitedLoop(3);
var transform = getCSS(parent, 'transform');
var translateY = Number(transform.substring(transform.lastIndexOf(',') + 2, transform.lastIndexOf(')')));
if (parent.clientHeight < parent.parentNode.clientHeight) return;
doc.on('touchmove', function (e) {
e.preventDefault();
var newTransform = getCSS(parent, 'transform');
var newTranslate = newTransform.substring(newTransform.lastIndexOf(',') + 2, newTransform.lastIndexOf(')'));
var newGap = Number(parent.clientHeight) - Number(newTranslate * -1);
var max = parent.parentNode.clientHeight;
var gap = e.changedTouches[0].pageY - posY;
var newTranslateY = translateY - -1 * gap;
parent.style.transition = '0.0s ease-out';
parent.style.transform = 'translateY(' + newTranslateY + 'px)';
});
doc.on('touchend', function (e) {
doc.off('touchmove');
doc.off('touchend');
var newTransform = getCSS(parent, 'transform');
var newTranslate = newTransform.substring(newTransform.lastIndexOf(',') + 2, newTransform.lastIndexOf(')'));
var newGap = Number(parent.clientHeight) - Number(newTranslate * -1);
var max = parent.parentNode.clientHeight;
var gap = e.changedTouches[0].pageY - posY;
var isOverflow = newGap <= max && gap < 0 || newGap >= parent.clientHeight && gap > 0;
if (isOverflow) {
parent.style.transition = '.5s cubic-bezier(.17,.67,.23,.99)';
parent.style.transform = 'translateY(' + (newGap <= max && gap < 0 ? max - parent.clientHeight - 1 : 0) + 'px)';
}
});
});
})();
//# sourceURL=pen.js
</script>
</body></html>
