<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - A Pen by Ti Ko</title>
<style>
@import url("https://rsms.me/inter/inter.css");
html {
font-size: calc(95vw / 100);
font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: "Inter var", sans-serif;
}
}
.viewport {
background-color: white;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
width: 95vw;
height: calc(95vw * (9/16));
position: relative;
display: grid;
grid-template-columns: 1fr 30rem;
}
body {
background-color: #272527;
display: grid;
place-items: center;
}
.nav {
padding: 5rem;
display: grid;
grid-auto-flow: column;
justify-content: space-between;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.nav__list {
display: grid;
grid-auto-flow: column;
justify-content: space-between;
width: 20rem;
padding: 0;
}
.main {
display: grid;
grid-template-rows: 2fr 1fr;
grid-template-areas: "headline" "nav";
align-items: end;
}
.main__slider {
overflow: hidden;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 70rem;
height: 100%;
background-color: #030303;
}
.main__slide-image {
position: absolute;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.main__slide-image-enter {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: scale(1.3);
}
.main__slide-image-leave-to {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.3);
}
.main__slide-image-enter-active {
transition: all 700ms;
transition-delay: 500ms;
}
.main__slide-image-leave-active {
transition: all 700ms;
}
.main__headline {
padding: 5rem;
grid-area: headline;
}
.main__headline-span {
position: absolute;
width: 60rem;
}
.main__headline-span-enter, .main__headline-span-leave-to {
transform: translateY(1em);
opacity: 0;
}
.main__headline-span-enter-active, .main__headline-span-leave-active {
transition: all 300ms;
}
.main__headline-span-enter-active {
transition-delay: 700ms;
}
.main__nav {
z-index: 1;
display: grid;
grid-template-columns: 1fr auto;
grid-area: nav;
width: 30rem;
padding: 3rem 5rem;
}
.social-links {
display: grid;
grid-auto-flow: column;
grid-gap: 0.4rem;
align-items: center;
}
.social-links:before, .social-links:after {
content: "";
display: block;
width: 1rem;
height: 0.1rem;
background: white;
}
.social-links:before {
grid-column: 2;
}
.social-links:after {
grid-column: 4;
}
.aside {
position: relative;
display: grid;
padding: 5rem;
}
.aside__slider {
background-color: #030303;
position: relative;
height: 25rem;
margin-top: 10rem;
overflow: hidden;
}
.aside__slide-image {
position: absolute;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.aside__slide-image-enter {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: scale(1.3);
}
.aside__slide-image-leave-to {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.3);
}
.aside__slide-image-enter-active {
transition: all 700ms;
transition-delay: 500ms;
}
.aside__slide-image-leave-active {
transition: all 700ms;
}
.aside__slide-image-leave-active {
transition-delay: 200ms;
}
.aside__slide-image-enter-active {
transition-delay: 600ms;
}
.aside__button {
width: 10rem;
height: 10rem;
}
.aside__nav {
position: absolute;
bottom: 0;
left: -10rem;
}
.aside .progress-indicator {
position: absolute;
right: 5rem;
bottom: 3rem;
display: grid;
grid-auto-flow: column;
grid-gap: 1rem;
align-items: center;
justify-content: end;
width: 10rem;
}
.aside .progress-indicator__bar {
width: 1.5rem;
height: 0.2rem;
background: #e6e6e6;
}
.aside .progress-indicator__bar--active {
background: #030303;
}
.aside .progress-indicator:before, .aside .progress-indicator:after {
color: #030303;
}
.aside .progress-indicator:before {
content: "01";
}
.aside .progress-indicator:after {
content: attr(data-slides-count);
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="viewport" id="app">
<nav class="nav">
<div class="nav__brand">
<p>Logo</p>
</div>
<ul class="nav__list">
<li class="nav__list-item">About</li>
<li class="nav__list-item">More</li>
</ul>
</nav>
<main class="main">
<transition-group class="main__slider" tag="div" name="main__slide-image" mode="out-in"><img class="main__slide-image" v-for="(slide, index) of slides" :key="index" v-if="index === currentActiveSlide" :src="slide.img" /></transition-group>
<transition-group class="main__headline" tag="div" name="main__headline-span" mode="out-in"><span class="main__headline-span" v-for="(slide, index) of slides" :key="index" v-if="index === currentActiveSlide">{{ slide.headline }}</span></transition-group>
<div class="main__nav">
<p>Play Video</p>
<ul class="social-links">
<li class="social-links__item"><a href="https://facebook.com">Fb</a></li>
<li class="social-links__item"><a href="https://twitter.com/">Tw</a></li>
<li class="social-links__item"><a href="https://www.linkedin.com/">In</a></li>
</ul>
</div>
</main>
<aside class="aside">
<div class="aside__nav">
<button class="aside__button" @click="handleSlideChange(-1)">←</button>
<button class="aside__button" @click="handleSlideChange(1)">→</button>
</div>
<div class="aside__slider"><img class="aside__slide-image" v-for="(slide, index) of slides" :key="index" v-if="index === nextActiveSlide" :src="slide.img" /></div>
<ul class="progress-indicator" :data-slides-count="'0' + slides.length">
<li v-for="(slide,index) of slides" :key="index" :class="index === currentActiveSlide ? 'progress-indicator__bar progress-indicator__bar--active' : 'progress-indicator__bar'"></li>
</ul>
</aside>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
<script id="rendered-js">
const app = new Vue({
el: "#app",
computed: {
nextActiveSlide() {
return this.currentActiveSlide + 1 >= this.slides.length ?
0 :
this.currentActiveSlide + 1;
} },
methods: {
// We'll pass the function either 1 or -1 to indicate which direction we'the slides will go
handleSlideChange(val) {
let direction;
const calculatedNextSlide = this.currentActiveSlide + val;
if (val > 0) {
direction = "next";
} else {
direction = "previous";
}
if (direction === "next" && calculatedNextSlide < this.slides.length) {
this.currentActiveSlide += val;
} else if (direction === "next") {
this.currentActiveSlide = 0;
} else if (direction === "previous" && calculatedNextSlide < 0) {
this.currentActiveSlide = this.slides.length - 1;
} else {
this.currentActiveSlide += val;
}
} },
data() {
return {
currentActiveSlide: 0,
slides: [
{
headline: "Lorem ipsum dolor sit amet",
img: "https://source.unsplash.com/random/1350x1080" },
{
headline: "Consectetur adipiscing elit, sed do.",
img: "https://source.unsplash.com/random/1350x1081" },
{
headline: "Eiusmod tempor incididunt ut labore.",
img: "https://source.unsplash.com/random/1350x1082" }] };
} });
//# sourceURL=pen.js
</script>
</body>
</html>
