A split screen gallery

a-split-screen-gallery.markdown

A split screen gallery

A split screen gallery for telling a story or showing a slideshow. It's buggy on iOS because of the way it deals with fixed positioned elements.

A Pen by Eduardo Bouças on CodePen.

License.

index.html

<article id="slide-0" class="slide slide--locked">
  <img src="http://lorempixel.com/g/768/1152/people/8">
</article>
<article id="slide-1" class="slide slide--text slide--locked">
  <div class="slide__inner">
    <p>A Split screen gallery</p>
    <p class="demo-arrow">&darr;</p>
    <p class="demo-instructions">Scroll down</p>
  </div>
</article>
<article id="slide-2" class="slide slide--scrolling slide--text">
  <div class="slide__inner">
    <p>It's a nice way to tell a story. Works as an image gallery as well.</p>
  </div>
</article>
<article id="slide-3" class="slide">
  <img src="http://lorempixel.com/g/768/1152/people/3">
</article>
<article id="slide-4" class="slide">
  <img src="http://lorempixel.com/g/768/1152/people/9">
</article>
<article id="slide-5" class="slide slide--text">
  <div class="slide__inner">
    <p>Doesn't work on iOS because it uses fixed positioning. Fallback is necessary.</p>
  </div>
</article>
<article id="slide-6" class="slide">
  <img src="http://www2.eduardoboucas.com/images/ElsaBW2.jpg">
</article>
<article id="slide-7" class="slide slide--text">
  <div class="slide__inner">
    <p>But that's life, isn't it?</p>
    <p class="demo-instructions">The end.</p>
  </div>
</article>

  

script.js

var windowHeight = $(window).height();
var $slides = $('.slide');

function init() {
	$('body').css('height', ($slides.length * 100) + '%');
  
	$slides.each(function(index) {
    $(this).css({
      'z-index': index,
      'top': (index * 100) + '%'
    });
  });
  
	var $scrollingSlide = $('.slide--scrolling').last();
  var scrollingSlideIndex = $('.slide').index($scrollingSlide);
  $(window).scrollTop((scrollingSlideIndex - 1) * windowHeight);
}

function adjustPositions() {
	var scrollPosition = $(window).scrollTop();
	var scrollingSlide = Math.floor(scrollPosition / windowHeight) + 1;
  var $scrollingSlide = $('#slide-' + scrollingSlide);
  $scrollingSlide.prevAll('.slide').removeClass('slide--scrolling').addClass('slide--locked');
  $scrollingSlide.removeClass('slide--locked').addClass('slide--scrolling');
  $scrollingSlide.nextAll('.slide').removeClass('slide--locked').removeClass('slide--scrolling');
}

$(document).ready(function() {
	init();
});

$(window).scroll(function () {
  adjustPositions();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

.slide {
  position: fixed;
  width: 50%;
  height: 100%;
  float: left;
  overflow: hidden;
  background-color: #ddd;
  
  &:nth-of-type(even) {
    right: 0;
  }
  
  &:nth-of-type(odd) {
    left: 0;
  }
}

.slide--text {
  background-color: white;
  padding: 30px;
  color: black;
  font-family: 'Fjalla One', sans-serif;
  text-align: center;
  text-transform: uppercase;
}

.slide__inner {
  height: 100%;
  border: 2px dashed black;
  padding: 20% 5% 5% 5%;
  font-size: 2em;
}

.slide--locked,
.slide--sticky {
  position: fixed !important;
  top: 0 !important;
}

.slide--scrolling {
  position: absolute;
}

// Demo stuff and reset
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

img {
  width: 100%;
}

.demo-instructions {
  font-size: 0.5em;
}

.demo-arrow {
  position: relative;
  animation: demo-arrow 0.4s ease-in-out infinite alternate;
}

a {
  color: inherit;
}

@keyframes demo-arrow {
  0% {
    top: 0;
  }
  
  100% {
    top: 10px;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" />