"Mobile movie star"
Bootstrap 4.0.0 Snippet by CubeSeven

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <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>

Related: See More


Questions / Comments: