Scrollez, pauvres fous
Two columns, one scroll.
Reverses scroll for two columns.
npm install scroll-you-fools
const container = document.getElementsByClassName('js-container')[0];
const options = {};
const scrollYouFools = new ScrollYouFools.default(container, options);
body {
overflow: hidden;
}
// Utilities
.h-xs-100 {
height: 100%;
}
.scroll-you-fools {
position: relative;
height: 100vh;
}
.scroll-you-fools__columns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.scroll-you-fools__row {
position: absolute;
right: 0;
left: 0;
margin-right: 15px;
margin-left: 15px;
}
.scroll-you-fools__row--left {
top: 100%;
transform: translate3d( 0, 100%, 0 );
}
.scroll-you-fools__row--right {
bottom: 100%;
transform: translate3d( 0, -100%, 0 );
}
.scroll-you-fools__column {
padding-top: 12vh;
padding-bottom: 12vh;
align-items: center;
height: 100vh;
}
.scroll-you-fools__image {
height: 100%;
width: 100%;
max-width: 100%;
object-position: center;
}
<div class="scroll-you-fools">
<div class="scroll-you-fools__columns js-container container-fluid">
<div class="row h-xs-100">
<div class="col-5 offset-1 h-xs-100">
<div class="scroll-you-fools__row scroll-you-fools__row--left js-row-left">
<div class="scroll-you-fools__column">
<img
class="scroll-you-fools__image"
src="https://picsum.photos/528/348"
width="528"
height="348"
alt=""
/>
</div>
</div>
</div>
<div class="col-12 col-lg-5 h-xs-100">
<div class="scroll-you-fools__row scroll-you-fools__row--right js-row-right">
<div class="scroll-you-fools__column">
<img
class="scroll-you-fools__image"
src="https://picsum.photos/528/348"
width="528"
height="348"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
</div>
An example is located right here, see sources.
- Corentin Fardeau, so inspiring
- Remove Bootstrap dependency