Welcome to HandCook 👨‍🍳

The web cooking by IRIS Interactive

🏠 Homepage

✨ Demo

Prerequisites

• node >= 23.6

Install

pnpm add @iris.interactive/handcook

SmoothScroll

import { SmoothScroll } from 'handcook';
...
SmoothScroll( '[trigger attribute]', '[duration in milisecond]' );

<div id="step-1" style="height: 1800px; background-color: red;">
    <a href="#step-2" data-trigger="wpiris-scroll">To step 2</a>
</div>
<div id="step-2" style="height: 1800px; background-color: green;">
    <a href="#step-3" data-trigger="wpiris-scroll">To step 3</a>
</div>
<div id="step-3" style="height: 1800px; background-color: yellow;">
    <a href="#step-1" data-trigger="wpiris-scroll">To step 1</a>
</div>

The element with trigger attribute should have an attribute href or data-href with the selector to the target element. You can add an attribute data-shift with integer value to force a shift on a target

Author

🐒 IRIS Interactive

• Website: https://www.iris-interactive.fr
• Twitter: @captain_iris
• Github: @irisinteractive
• LinkedIn: @iris-interactive

Show your support

Give a ⭐️ if this project helped you!

Made with ❤️ by IRIS Interactive