All Projects → gabrieljmj → Fuckmyscroll.js

gabrieljmj / Fuckmyscroll.js

Licence: other
🔮 Animated scrolling to certain point or anchor

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Fuckmyscroll.js

EasyScrollDots
Single page scroll JavaScript plugin that allows for vertical navigation of page sections
Stars: ✭ 38 (+280%)
Mutual labels:  scrolling, scroll
srraf
Monitor scrolling and resizing without event listeners.
Stars: ✭ 26 (+160%)
Mutual labels:  scrolling, scroll
use-scroll-direction
A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.
Stars: ✭ 24 (+140%)
Mutual labels:  scrolling, scroll
react-smart-scroll
Efficient rendering of long lists in React
Stars: ✭ 27 (+170%)
Mutual labels:  scrolling, scroll
Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (+3520%)
Mutual labels:  scroll, scrolling
really-smooth-scroll
A script that smoothen scrolling in the browser
Stars: ✭ 21 (+110%)
Mutual labels:  scrolling, scroll
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (+410%)
Mutual labels:  scrolling, scroll
scroll-sync-react
A scroll syncing library for react that is up to date
Stars: ✭ 49 (+390%)
Mutual labels:  scrolling, scroll
Jump.js
A modern smooth scrolling library.
Stars: ✭ 3,459 (+34490%)
Mutual labels:  scroll, scrolling
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (+2590%)
Mutual labels:  scroll, scrolling
NoobScroll
A lightweight jQuery Plugin that add some cool function to make scrolling more fun [Archive]
Stars: ✭ 43 (+330%)
Mutual labels:  scrolling, scroll
Txscrolllabelview
🌭TXScrollLabelView, the best way to show & display information such as adverts / boardcast / onsale e.g. with a customView.
Stars: ✭ 714 (+7040%)
Mutual labels:  scroll, scrolling
onscroll-effect
A tiny JavaScript library to enable CSS animations when user scrolls.
Stars: ✭ 35 (+250%)
Mutual labels:  scrolling, scroll
Scrolldir
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
Stars: ✭ 679 (+6690%)
Mutual labels:  scroll, scrolling
react-scroll-trigger
📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
Stars: ✭ 126 (+1160%)
Mutual labels:  scrolling, scroll
volx-recyclerview-fast-scroll
An easy to use implementation for fast scroll recyclerview
Stars: ✭ 34 (+240%)
Mutual labels:  scrolling, scroll
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+27360%)
Mutual labels:  scroll, scrolling
react-is-scrolling
Simply detect if users are scrolling in your components in a declarative API
Stars: ✭ 17 (+70%)
Mutual labels:  scrolling, scroll
Phytouch
Smooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案
Stars: ✭ 2,854 (+28440%)
Mutual labels:  scroll, scrolling
React Scrolllock
🔒 Prevent scroll on the <body />
Stars: ✭ 393 (+3830%)
Mutual labels:  scroll, scrolling

FuckMyScroll

Animated scrolling to certain point or anchor.

You can see a demo here.

Installing

Install via npm

$ npm install --save fuckmyscroll

Usage

In your script, create an instance of FuckMyScroll

const fms = new FuckMyScroll();
fms.init();

Working with anchors

Truly is not necessary be an anchor, but have href and fmscroll attributes.

<button href="#about" fmscroll>About</button>

<!-- Goes to -->
<article id="about">
  <!-- ... -->
</article>

Going to page points

Scroll by cordenates

let X = 0,
  Y = 1200;

fms.scrollTo(X, Y);

Options

const fms = new FuckMyScroll({
  speed: 14, // 14px/ms,
  init: () => {},
  end: () => {}
});
  • speed It is possible determine the speed, measured in pixels/milliseconds. Default is 7px/ms.
{
  speed: 20 // 20px/ms
}
  • init Callback executed on proccess initiation.
{
  init: () => { // ... }
}
  • end Callback executed on proccess finalization.
{
  end: () => { // ... }
}

Events

It is possible execute specific events for each anchors using fms-init and fms-end attributes with global functions:

<a href="#about" fmsscroll fms-init="prepareAbout" fms-end="showAbout">About</a>

<script>
  /* Global scope */
  function prepareAbout() {
    //...
  }

  function showAbout() { 
    // ...
  }

  window.onload = () => {
    // ...
  }
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].