Travel
HTML
<nav class="flex-nav">
<div class="container">
<div class="grid">
<div class="column-xs-9 column-md-8">
<p id="logo">Japan<span id="highlight">.</span></p>
</div>
<div class="column-xs-3 column-md-4">
<a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Discover</a></li>
<li><a href="#">Plan Your Trip</a></li>
</ul>
</div>
</div>
</div>
</nav>
<main class="intro-section">
<div class="container">
<div class="grid">
<div class="column-xs-12">
<ul class="slider">
<li class="slider-item active">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Tokyo</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img class="test" src="https://source.unsplash.com/cddaZDt6uRw">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Tokyo</span></h1>
</a>
</div>
<p class="description">Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples.</p>
</div>
</div>
</div>
</div>
</li>
<li class="slider-item">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Kyoto</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://source.unsplash.com/Pz3EHf-KJfc">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Kyoto</span></h1>
</a>
</div>
<p class="description">Kyoto is famous for its numerous classical Buddhist temples, gardens, imperial palaces, Shinto shrines and traditional wooden houses.</p>
</div>
</div>
</div>
</div>
</li>
<li class="slider-item">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Osaka</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://source.unsplash.com/peYW3VwICpE">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Osaka</span></h1>
</a>
</div>
<p class="description">Osaka is a large port city and commercial center known for its modern architecture, nightlife and hearty street food.</p>
</div>
</div>
</div>
</div>
</li>
<li class="slider-item">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://source.unsplash.com/VmeOZQjTVGE">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
</a>
</div>
<p class="description">Hokkaido, the northernmost of Japan’s main islands, is known for its volcanoes, natural hot springs ("onsen") and ski areas.</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="grid">
<div class="column-xs-12">
<div class="controls">
<a class="previous">
<i class="ion-ios-arrow-thin-left"></i>
</a>
<a class="next">
<i class="ion-ios-arrow-thin-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
SCSS
@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,700');
$white: #fff;
$black: #232323;
$gray: #8d8d8d;
$red: #e83f43;
* {
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}
}
body {
font-family: 'Barlow', sans-serif;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
color: $gray;
background: $white;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a {
color: $gray;
text-decoration: none;
&:hover {
color: $black;
}
}
nav {
position: relative;
z-index: 2;
padding: 1.25rem 0 1.25rem 0;
ul {
line-height: 2.2;
display: flex;
justify-content: flex-start;
li {
margin: 0.325rem 0;
}
}
}
#logo {
color: $black;
font-weight: 700;
font-size: 1.125rem;
}
#highlight {
color: $red;
}
img {
width: 100%;
height: 43vh;
object-fit: cover;
}
@keyframes scaleX {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.vertical {
flex-direction: column;
justify-content: center;
align-items: center;
}
.intro {
position: relative;
z-index: 2;
opacity: 0;
animation: fadeIn 0.8s 0.4s ease forwards;
.title {
display: inline-block;
font-size: 2rem;
font-weight: 500;
line-height: 1.1;
text-decoration: underline;
color: $red;
.underline {
color: $black;
}
}
}
.description {
position: relative;
z-index: 1;
margin: 1rem 0 1.5rem 0;
font-size: 1rem;
opacity: 0;
animation: fadeIn 0.8s 0.6s ease forwards;
}
.slider-item {
display: none;
&.active {
display: block;
.hide-mobile {
display: none;
}
.show-mobile {
display: block;
margin: 1rem 0;
}
}
}
.controls {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
padding: 0.25rem 0 0.25rem 0;
.previous {
border: 1px solid $black;
&:hover i {
transform: scale(1.5);
}
}
.next {
border-top: 1px solid $black;
border-right: 1px solid $black;
border-bottom: 1px solid $black;
&:hover i {
transform: scale(1.5);
}
}
}
.previous, .next {
display: flex;
align-content: center;
justify-content: center;
flex-basis: 15%;
font-size: 2rem;
color: $black;
i {
transition: all 0.1s ease;
}
}
.active .image-holder::before {
position: absolute;
content: '';
z-index: 1;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $white;
transform-origin: 100% 50%;
animation: revealRight 1s cubic-bezier(0.23,1,0.75,1) forwards;
}
@keyframes revealRight {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(20%);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.toggle-nav {
display: flex;
justify-content: flex-end;
font-size: 1rem;
line-height: 1.9;
i {
font-size: 1.5rem;
line-height: 1.3;
margin: 0 0 0 0.5rem;
}
}
.flex-nav ul {
position: absolute;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
display: none;
width: 100%;
left: 0;
padding: 1rem;
background: $white;
text-align: center;
&.active {
display: flex;
}
}
@media (min-width: $md) {
nav ul {
justify-content: flex-end;
}
#logo {
font-size: 1.25rem;
}
.controls {
padding: 1.75rem 0 1.75rem 0;
}
.intro {
animation: fadeInLeft 0.8s 0.4s ease forwards;
.title {
font-size: 4.25rem;
padding: 2.5rem 2.5rem 3rem 2.5rem;
background: $white;
}
}
img {
height: 60vh;
}
.description {
font-size: 1.25rem;
margin: 1rem 0 0 0;
}
.previous, .next {
flex-basis: 8.33%;
}
.slider-item.active .hide-mobile {
display: block;
}
.slider-item.active .show-mobile {
display: none;
}
.toggle-nav {
display: none;
}
.flex-nav ul {
display: flex;
flex-direction: row;
position: relative;
padding: 0;
justify-content: flex-end;
}
nav {
padding: 1.75rem 0 1.75rem 0;
ul {
line-height: 2.2;
display: flex;
justify-content: flex-start;
li {
font-size: 1rem;
text-transform: uppercase;
margin: 0 2rem 0 0;
&:nth-child(3) {
margin: 0;
}
}
}
}
}
JAVASCRIPT
const items = document.querySelectorAll('.slider-item');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
const navItem = document.querySelector('a.toggle-nav');
let count = 0;
function showNextItem() {
items[count].classList.remove('active');
if(count < itemCount - 1) {
count++;
} else {
count = 0;
}
items[count].classList.add('active');
console.log(count);
}
function showPreviousItem() {
items[count].classList.remove('active');
if(count > 0) {
count--;
} else {
count = itemCount - 1;
}
items[count].classList.add('active');
// Check if working...
console.log(count);
}
function toggleNavigation(){
this.nextElementSibling.classList.toggle('active');
}
nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);
navItem.addEventListener('click', toggleNavigation);
