Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created October 26, 2017 01:59
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CodeMyUI/4b23ee2b40d491c7301bc251b75518a7 to your computer and use it in GitHub Desktop.
A split screen gallery
<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>
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();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.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;
}
}
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment