https://github.com/19h47/scroll-you-fools
⬆️⬇️ Playing with two columns with inverted scroll
https://github.com/19h47/scroll-you-fools
inertia inertia-scroll scroll scrolling vertical
Last synced: 6 months ago
JSON representation
⬆️⬇️ Playing with two columns with inverted scroll
- Host: GitHub
- URL: https://github.com/19h47/scroll-you-fools
- Owner: 19h47
- Created: 2018-08-11T17:57:32.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:40:19.000Z (over 2 years ago)
- Last Synced: 2024-04-14T06:07:26.463Z (about 1 year ago)
- Topics: inertia, inertia-scroll, scroll, scrolling, vertical
- Language: JavaScript
- Homepage: https://19h47.github.io/scroll-you-fools/
- Size: 1.55 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scroll, you fools
> Scrollez, pauvres fous
Two columns, one scroll.
Reverses scroll for two columns.
## Installation
```
npm install scroll-you-fools
```
## Usage
### JavaScript
```javascript
const container = document.getElementsByClassName('js-container')[0];
const options = {};
const scrollYouFools = new ScrollYouFools.default(container, options);
```
### CSS
```css
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;
}
```
### HTML
```html
```
## Options
## Example
An example is located right [here](https://19h47.github.io/scroll-you-fools/), see [sources](/example/index.html).
## Authors
## Acknowledgments
- [Corentin Fardeau](https://github.com/Corentinfardeau/horizontal-scroll), so inspiring
## To do
- [ ] Remove [Bootstrap](https://getbootstrap.com/) dependency