Skip to content

Commit

Permalink
provide callback method
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellraiserrob
hellraiserrob committed Jul 23, 2024
1 parent 507ebb9 commit 0c85c38
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 34 deletions.
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ <h2>A library that modifies element properties as you scroll</h2>
</div>

<div class="slides">
<div class="slides__slide"><div class="line"></div><div class="slides__slide__number">1<div class="slides__slide__progress">0</div></div></div>
<div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">2<div class="slides__slide__progress">0</div></div></div>
<div class="slides__slide"><div class="line"></div><div class="slides__slide__number">3<div class="slides__slide__progress">0</div></div></div>
<div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">4<div class="slides__slide__progress">0</div></div></div>
<div class="slides__slide"><div class="line"></div><div class="slides__slide__number">5<div class="slides__slide__progress">0</div></div></div>
<div class="slides__slide"><div class="line"></div><div class="slides__slide__number">1<div class="progress">0</div></div></div>
<div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">2</div></div>
<div class="slides__slide"><div class="line"></div><div class="slides__slide__number">3<div class="progress">0</div></div></div>
<div class="slides__slide"><div class="box"></div><div class="line"></div><div class="slides__slide__number">4</div></div>
<div class="slides__slide"><div class="line"></div><div class="slides__slide__number">5<div class="progress">0</div></div></div>
</div>

<footer>
Expand Down
39 changes: 30 additions & 9 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,20 @@ A library that modifies element properties as you scroll to achieve parallax mot
| | Description | Type |
| ----------- | ----------- | ------- |
| el | The slides elements | HTMLElement |
| easing | The easing function (see easing.js) | String |
| debug | Log out some values | boolean |
| modifiers | See Modifier type below | Modifier[] |
| easing? | The easing function (see easing.js) | String |
| debug? | Log out some values | boolean |
| modifiers? | See Modifier type below | Modifier[] |

### Modifier

| | Description | Type |
| ----------- | ----------- | ------- |
| selector | The css selector for the element to modify | String |
| property | The css property to modify (e.g. width) | String |
| start | The starting property | number |
| end | The destination property value | number |
| unit | The property unit (e.g. px, %) | String |

| property? | The css property to modify (e.g. width) | String |
| start? | The starting property | Number |
| end? | The destination property value | Number |
| unit? | The property unit (e.g. px, %) | String |
| callback? | A callback function which receives two parameters, the html element, and the progress through the active slide | Function |



Expand All @@ -40,14 +40,35 @@ A library that modifies element properties as you scroll to achieve parallax mot
e.g.

```javascript
import "./main.scss";

import SlideScroll from "./slide-scroll"
import { Options } from "./interfaces";

const slides = document.querySelectorAll<HTMLElement>(`.slides`);

slides.forEach(el => {
const options: Options = {
el,
easing: "linear"
easing: "easeInOutCubic",
modifiers: [{
selector: ".line",
property: "width",
start: 0,
end: 100,
unit: "%"
}, {
selector: ".box",
property: "height",
start: 0,
end: 100,
unit: "%"
}, {
selector: ".progress",
callback: function(el, progress) {
el.innerHTML = `${Math.ceil(progress)}%`
}
}]
};
const slides = new SlideScroll(options)

Expand Down
5 changes: 5 additions & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ slides.forEach(el => {
start: 0,
end: 100,
unit: "%"
}, {
selector: ".progress",
callback: function(el, progress) {
el.innerHTML = `${Math.ceil(progress)}%`
}
}]
};
const slides = new SlideScroll(options)
Expand Down
9 changes: 5 additions & 4 deletions src/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@

export interface Modifier {
selector: string,
property: string,
start: number,
end: number,
unit: string
property?: string,
start?: number,
end?: number,
unit?: string,
callback?: Function
}

export interface Options {
Expand Down
14 changes: 7 additions & 7 deletions src/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,10 +143,10 @@ footer {
position: absolute;
top: 0;
left: 50%;
height: 30px;
height: 0;
transform: translate(-50%, 0);
width: 300px;
background: orange;
width: 30px;
background: blue;
}

&__number {
Expand All @@ -158,8 +158,8 @@ footer {
line-height: 1.5em;
border: 20px solid #333;
padding: 0 100px;
background: rgba(#fff, 0.5);
backdrop-filter: sepia(90%);
// background: rgba(#fff, 0.5);
// backdrop-filter: blur(50px);

@media (min-width: 600px) {
font-size: 400px;
Expand All @@ -169,10 +169,10 @@ footer {

&:nth-child(odd) &__number {
border-color: #fff;
background: rgba(#333, 0.5);
// background: rgba(#333, 0.5);
}

&__progress {
.progress {
position: absolute;
right: 10px;
top: 10px;
Expand Down
19 changes: 10 additions & 9 deletions src/slide-scroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,27 +139,29 @@ export default class Slides extends InView {
this.els.slides.forEach((el, index) => {
const min = index * this.portion;
const max = min + this.portion;
const progressEl = el.querySelector(`.${css.progress}`);

// this particular slide is in the viewport
if (progress > min && progress <= max) {
const sectionProgress = (progress - min) * this.total;
const easing = easings.linear(sectionProgress / 100);
const slideOffset = this.vh - (easing * this.vh);
// const progressOpacity = easing;
const modeEasing = easings[this.options.easing](sectionProgress / 100);

fastdom.mutate(() => {
el.style.opacity = "1";
el.style.transform = `translate3d(0, ${slideOffset}px, 0)`;

progressEl.innerHTML = Math.round(sectionProgress);

this.options.modifiers?.forEach(modifier => {
const modeEasing = easings[this.options.easing](sectionProgress / 100);
const modEl = el.querySelector(modifier.selector);
const modVal = (modifier.start + (modifier.end - modifier.start) * modeEasing);

modEl.style[modifier.property] = `${modVal}${modifier.unit}`;

if(modEl && typeof modifier.property !== "undefined" && typeof modifier.start !== "undefined" && typeof modifier.end !== "undefined"){
const modVal = (modifier.start + (modifier.end - modifier.start) * modeEasing);
modEl.style[modifier.property] = `${modVal}${modifier.unit}`;
}

if(modEl && typeof modifier.callback === "function") {
modifier.callback(modEl, sectionProgress);
}
});
});
}
Expand All @@ -169,7 +171,6 @@ export default class Slides extends InView {
// we've scrolled passed it
fastdom.mutate(() => {
el.style.transform = "translate3d(0, 0, 0)";
progressEl.innerHTML = "100"
});
}
else {
Expand Down

0 comments on commit 0c85c38

Please sign in to comment.