https://github.com/luuk-dev/scrollwithme
Let an element easily scroll with the user
https://github.com/luuk-dev/scrollwithme
effects framework front-end frontend html javascript javascript-framework javascript-library js library scroll scrolling
Last synced: about 1 year ago
JSON representation
Let an element easily scroll with the user
- Host: GitHub
- URL: https://github.com/luuk-dev/scrollwithme
- Owner: Luuk-Dev
- License: mit
- Created: 2022-01-03T12:13:10.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-03T12:24:11.000Z (about 4 years ago)
- Last Synced: 2025-01-23T08:19:24.291Z (about 1 year ago)
- Topics: effects, framework, front-end, frontend, html, javascript, javascript-framework, javascript-library, js, library, scroll, scrolling
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ScrollWithMe
Let an element easily scroll with the user.
> Written by Luuk Walstra
>
> Discord: Luuk#8524
>
> Github: [https://github.com/Luuk-Dev](https://github.com/Luuk-Dev)
>
> Replit: [https://replit.com/@LuukDev](https://replit.com/@LuukDev)
>
> Repository: [https://github.com/Luuk-Dev/ScrollWithMe](https://github.com/Luuk-Dev/ScrollWithMe)
## How to use
You need to call the ScrollWithMe class in your JavaScript. The class has two parameters. The first one is the element where you want to add the ScrollWithMe effect. This can be the element itself or a string to get the element. The second parameter is the custom options. This is an object with the following options:
- startAt: From which height (in pixels) the element should scroll with the user. Default is `0`.
- endAt: From which height (in pixels) the element should stop scrolling with the user. Default is `Infinity`.
- setTop: How far away the element should be away from the top (in pixels).
- callback: An object with callbacks which should get fired at some point.
- onscroll: Gets fired when the element starts scrolling with the user.
- onend: Gets fired when the element stops scrolling with the user.
## Demo
Watch a live demo [here](https://scrollwithme.luukdev.repl.co)
## Example
```html
ScrollWithMe
html, body{
margin: 0;
padding: 0;
font-family: Arial;
height: 300vh;
}
.huts{
top: 0;
height: 100vh;
background-color: blue;
width: auto;
padding: 10px;
}
.scroll-with-me{
position: absolute;
top: 400px;
width: 300px;
height: 250px;
left: 50px;
background-color: red;
padding: 20px;
}
Some text over here
I can scroll with you!
(() => {
const el = document.querySelector(`.scroll-with-me`);
const sometext = el.querySelector(`#some-text`);
new ScrollWithMe(el, {
startAt: 300,
endAt: 900,
setTop: 100,
callback: {
onscroll: () => {
sometext.innerHTML = `WOW! I am scrolling with you!`;
},
onend: () => {
sometext.innerHTML = `I can scroll with you!`;
}
}
});
})();
```