Responsive Split Screen

Layout
Written By Cristina Tioseco

Specific Page Code Injection

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
  </script>

Code Block

<div class="home-container">
  <div id="splitlayout" class="splitlayout">
    <div class="intro">

      <div class="side side-left">
        <div class="intro-content">
          <div class="profile">
             <h1 class="text-outline text-outline-hover" data-text="Where"><span>
                Where
            </h1></span>
            <p style="font-size:20px"><span>
               CITY GUIDES
            </span></p>
          </div>
          <div class="overlay"> </div>
        </div>
      </div>
      
      <div class="side side-right">
        <div class="intro-content">
          <div class="profile">
            <h1 class="text-outline text-outline-hover" data-text="How"><span>
                How
            </h1></span>
            <p style="font-size:20px"><span>
               BREW GUIDES
            </span></p>
          </div>
          <div class="overlay"> </div>
        </div>
      </div>
      
      <div class="page page-left">
        <div class="page-inner">
          <section>
            <a href="https://coooooffee.squarespace.com/vancouver"><h2>Vancouver, BC</h2>
            <a href="https://coooooffee.squarespace.com/seattle"><h2>Seattle, WA</h2>
            <a href="https://coooooffee.squarespace.com/portland"><h2>Portland, OR</h2>  
          </section>
        </div>
      </div>
      
     <div class="page page-right">
            <div class="page-inner">
                <section>
            <a href="https://coooooffee.squarespace.com/aeropress"><h2>Aeropress</h2></a>
            <a href="https://coooooffee.squarespace.com/chemex"><h2>Chemex</h2></a>
                  <a href="https://coooooffee.squarespace.com/v60"><h2>v60</h2></a>  
          </section>
        </div>
      </div>

      <a href="" class="back back-right">→</a>
      <a href="" class="back back-left">←</a>

    </div>
  </div>
</div>

Custom CSS

/* Responsive Split Screen */
.side {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 50%;
  height: 100%;
  text-align: center;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.open-left .side,
.open-right .side {
  cursor: default;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 499;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.side-left .overlay {
  background: rgba(0, 0, 0, 0.7);
}

.side-right .overlay {
  background: rgba(0, 0, 0, 0.7);
}

.side-left {
  left: 0;
  background: #f8f8f6;
  color: #000;
  outline: 1px solid; /* avoid gap */
}

.side-right {
  right: 0;
  background: #f8f8f6;
  color: #000;
  outline: 1px solid; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.intro-content {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 1em;
  width: 50%;
  cursor: pointer;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.intro-content h1 > span {
  display: block;
  white-space: nowrap;
}

.intro-content h1 > span:nth-child(2) {
  position: relative;
  margin-top: 0.5em;
  padding: 0.8em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background: #fff;
  content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
  background: #47a3da;
}

.back {
  position: fixed;
  top: 5.5em;
  z-index: 500;
  display: block;
  visibility: hidden;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  text-align: center;
  font-size: 22px;
  line-height: 44px;
  opacity: 0;
  pointer-events: none;
}

.back-left {
  color: #66829c;
}
.back-right {
  color: #cf9741;
}

.mobile-layout .back {
  position: absolute;
}

.back-left {
  left: 12.5%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.back-right {
  right: 12.5%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

.open-right .back-left,
.open-left .back-right {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  pointer-events: auto;
}

.back:hover {
  color: #ddd !important;
  font-style: none !important;
}

/* Pages */
.page {
  position: relative;
  top: 0;
  overflow: auto;
  min-height: 100%;
  width: 75%;
  height: auto;
  font-size: 1.4em;
  -webkit-backface-visibility: hidden;
}

.page-right {
  left: 25%;
  outline: 5px solid #66829c;
  background: #66829c;
  color: #fff;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.splitlayout.open-right {
  background: #66829c;
}

.page-left {
  left: 0%;
  outline: 5px solid #cf9741;
  background: #cf9741;
  color: #fff;
  text-align: right;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.splitlayout.open-left {
  background: #cf9741;
}

/* Inner page content */
.page-inner {
  padding: 2em;
}

.page-inner section {
  padding-bottom: 1em;
}

.page-inner h2 {
  margin: 0 0 1em 0;
  font-size: 1.6em;
}

.page-inner h2:hover {
  font-style: italic;
}

/* All transitions */
.side,
.page {
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}

.overlay {
  -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
  transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
  -webkit-transition: -webkit-transform 0.6s, top 0.6s;
  transition: transform 0.6s, top 0.6s;
}

.intro-content h1,
.back {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* Open and close */

.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {
  position: absolute;
  overflow: hidden;
  height: 100%;
}

.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {
  position: relative;
  overflow: auto;
  height: auto;
}

.open-right .side-left .overlay,
.open-left .side-right .overlay {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

/* Right side open */
.open-right .side-left {
  -webkit-transform: translateX(-60%);
  transform: translateX(-60%);
}

.open-right .side-right {
  z-index: 200;
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}

.close-right .side-right {
  z-index: 200;
}

.open-right .side-right .intro-content {
  -webkit-transform: translateY(-50%) translateX(0%) scale(0.6);
  transform: translateY(-50%) translateX(0%) scale(0.6);
}

.open-right .codropsheader {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
  transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-right .page-right {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

/* Left side open */
.open-left .side-right {
  -webkit-transform: translateX(60%);
  transform: translateX(60%);
}

.open-left .side-left {
  z-index: 200;
  -webkit-transform: translateX(150%);
  transform: translateX(150%);
}

.close-left .side-left {
  z-index: 200;
}

.open-left .side-left .intro-content {
  -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
  transform: translateY(-50%) translateX(-100%) scale(0.6);
}

.open-left .codropsheader {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
  transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-left .page-left {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
Cristina Tioseco
Previous

Split Screen — Link on 1 side, Image on other
Next

Rotate Element on Scroll