Simon's Split Screen Navigation

In this example below you will see how to do a Simon's Split Screen Navigation with some HTML / CSS and Javascript

Design from https://dribbble.com/shots/3268934-Split-Screen-Navigation-Concept

Thumbnail
This awesome code was written by ilyasbilgihan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ilyasbilgihan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simon's Split Screen Navigation</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Faustina:400,500,600,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
  
  <header>
    <div class="center">
      <div class="logo">
        <a href="#">Explore <span>Canada</span></a>
      </div>
      <div class="menu">
        Menu <div class="icon"><i class="fas fa-bars"></i></div>
      </div>
    </div>
  </header>
  
  <div id="slides">
    <div class="slide" data-content="1">
      <div class="info">
        <div class="date"><span>Salı</span> 01.05.18</div>
        <h1>Canada was named the top country to travel to in 2017</h1>
        <p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime non cumque.</p>
      </div>
      <div class="more">Full article</div>
      <img src="https://image.ibb.co/nnnhPS/banff.jpg" alt="" class="content-image">
    </div>
    <div class="slide" data-content="2">
      <div class="info">
        <div class="date"><span>Salı</span> 27.04.18</div>
        <h1>The Explore Canada road trip</h1>
        <p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime non cumque.</p>
      </div>
      <div class="more">Full article</div>
      <img src="https://image.ibb.co/k99wjS/beach.jpg" alt="" class="content-image">
    </div>
    <div class="slide" data-content="3">
      <div class="info">
        <div class="date"><span>Salı</span> 23.04.18</div>
        <h1>Exploring the Land of the Living Skies</h1>
        <p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime non cumque.</p>
      </div>
      <div class="more">Full article</div>
      <img src="https://image.ibb.co/nvoLdn/giau.jpg" alt="" class="content-image">
    </div>
  </div>
  
  <div id="contents">
    <div class="content" content-id="1"> <!-- width: 1022px -->
      <p class="detail"></p>
      <img src="" alt="" width="850">
      <div class="date"></div>
    </div>
    <div class="content" content-id="2"> <!-- width: 1022px -->
      <p class="detail"></p>
      <img src="" alt="" width="850">
      <div class="date"></div>
    </div>
    <div class="content" content-id="3"> <!-- width: 1022px -->
      <p class="detail"></p>
      <img src="" alt="" width="850">
      <div class="date"></div>
    </div>
  </div>
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ilyasbilgihan/simonandaposs-split-screen-navigation-rvmVgG */
body, h1, p{
  margin: 0;
  padding: 0;
  font-family: 'Faustina', serif;
  font-weight: 500;
}

a { text-decoration: none; }

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 66px;
  line-height: 62px;
  color: #fff;
  display: flex;
  z-index: 99;
}

header a { color: #fff; }

.center {
  width: 1280px;
  margin: 0 auto;
}

.logo {
  float: left;
  height: 0;
}

.menu {
  float: right;
  height: 0;
}

.logo span { font-weight: bold; text-shadow: 0px 0px 3px currentColor; }

.menu:hover { cursor: pointer; }

.menu .icon { 
  float: right;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  background: #fff;
  font-size: 12px;
  margin: 20px 0 0 10px;
}

.menu i { color: #3a3934; }

#slides {
  width: 100%;
  height: 100vh;
  
}

.slide {
  position: relative;
  color: #fff;
  overflow: hidden;
  float: left;
  display: inline-block;
  transition: 1s;
  width: 33.33%;
  overflow: hidden;
}

.slide[data-content="3"] {
  right: 0;
  position: absolute;
  z-index: 98;
}

.slide[data-content="2"] {
  width: 48%;
}


.slide[data-content="1"] {
  z-index: 98;
}



.slide .info {
  position: absolute;
  bottom: 120px;
  left: 50%;
  width: 300px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: 1s;
}

.info:before { 
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  background: #e39926;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  margin-top: -20px;
  box-shadow: 2px 0px 3px #8e694d;
}
.date span { font-weight: bold; font-size: 15px; }
.date span:after { content: " /" }
.slide .date, .slide .detail { padding: 0 10px; opacity: .9; font-weight: 400; text-align: center; font-size: 14px;  }
.slide h1 { font-weight: bold; text-align: center; margin-bottom: 35px;}

.slide .more {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 50%) rotate(-90deg);
            transform: translate(-50%, 50%) rotate(-90deg);
    bottom: 0;
    margin-bottom: -101px;
}

.slide .more:after {
  content: "";
  width: 35px;
  height: 2px;
  background: #fff;
  position: absolute;
  margin: 10px 0 0 20px;
  background: #e39926;
  box-shadow: 2px 0px 3px #8e694d;
}

.slide img {
  height: 100vh;
}



#contents { display: none; }


/*Downloaded from https://www.codeseek.co/ilyasbilgihan/simonandaposs-split-screen-navigation-rvmVgG */
$(document).ready(function(){
  
  $('#slides div[data-content="2"] .info').css("transform","translateX(-82%)");
  
  $(".slide").hover(function(){
    Who(this);
  });
  
});

Who = (e) => {
  
  var dataContent = $(e).attr("data-content");

  
  for(var i=1; i<4; i++){
    var currentSlide = $('#slides div[data-content="'+i+'"]');
    
    if( (i != dataContent) && ( i!=2 ) ){
       currentSlide.css("width","26%");
       
    }else if(i == dataContent) {
       currentSlide.css("width","48%");
       
    }
    
    if( dataContent != 2 ){
       $('#slides div[data-content="2"] .info').css("transform","translateX(-100%)");
    }else {
      $('#slides div[data-content="2"] .info').css("transform","translateX(-50%)");
    }
    
 
  }
  
  

  
  
};


/** 
    $('#slides div[data-content="'+dataContent+'"] img').css("margin-left","-30%");
    $('#slides div[data-content="1"] img').css("margin-left","-80%");
    $('#slides div[data-content="3"] img').css("margin-left","-80%");
    
**/

Comments