scrollstory | A jQuery plugin for building scroll-based stories | Development Tools library

by sjwilliams JavaScript Version: 1.1.0 License: MIT

X-Ray Key Features Code Snippets Community Discussions(1)Vulnerabilities Install Support

kandi X-RAY | scrollstory Summary

scrollstory is a JavaScript library typically used in Utilities, Development Tools applications. scrollstory has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can install using 'npm i scrollstory' or download it from GitHub, npm.

ScrollStory is built on the idea that scrolling stories often comprise discrete elements stacked on a page that exclusively require a reader’s focus. These elements — or items in ScrollStory speak — can be anything: sections of text (like the sections of this page), a video, a photo and caption, or any HTML element that can be scrolled to. ScrollStory follows these items, internally tracking the scroll distance until an item requires the reader’s focus, at which point custom code can be executed to manipulate the experience, like updating the navigation bar and fading the background color on this page. Additionally, custom code can be run whenever any item enters the viewport; any item within a ScrollStory collection is activated (or, inversely, when none are activated); when an item is filtered, a ScrollStory construct meaning it is no longer an active part of a collection; or any of 17 custom events. ScrollStory items aren't just DOM nodes. Rather, they’re data objects that have a corresponding representation in the DOM. ScrollStory instances maintain data about each item object in a collection and provides numerous methods of accessing, querying and modifying that data.

Support

Quality

Security

License

Reuse

Support

scrollstory has a low active ecosystem.

It has 264 star(s) with 28 fork(s). There are 8 watchers for this library.

It had no major release in the last 12 months.

There are 7 open issues and 26 have been closed. On average issues are closed in 138 days. There are 6 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of scrollstory is 1.1.0

Quality

scrollstory has 0 bugs and 0 code smells.

Security

scrollstory has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

scrollstory code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

scrollstory is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

scrollstory releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions, examples and code snippets are available.

scrollstory saves you 450 person hours of effort in developing the same functionality from scratch.

It has 1063 lines of code, 0 functions and 18 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed scrollstory and discovered the below as its top functions. This is intended to give you an instant insight into scrollstory implemented functionality, and help decide if they suit your requirements.

creates a scroll story
generates an arrow string
Toggle a blend of elements
the main loop function
kbk class
Toggle the UI elements
Return size of box - box shape .
border - > border
Gets or returns a gradient value .
Fulfill in B .

Get all kandi verified functions for this library.

scrollstory Key Features

No Key Features are available at this moment for scrollstory.

scrollstory Examples and Code Snippets

No Code Snippets are available at this moment for scrollstory.

Community Discussions

Trending Discussions on scrollstory

Most minimalist way to build a scroller for interactive storytelling?

QUESTION

Most minimalist way to build a scroller for interactive storytelling?

Asked 2019-Nov-15 at 19:37

I'm trying to build a static but responsive storytelling HTML website. My goal is to achieve something likes this:

Text on the left, *.jpg image with a fixed position on the right. As a user scrolls the text on the left side, the image on the right side remains fixed in position but changes to another *.jpg image with a short transition, after the scrolling on the left side has reached a certain point.

Responsive in this case would means that I'm completely satisfied with the sticky scrolling being inactive on smaller screens and the text and image block simply returning to their normal breakpoint behaviour.

I have looked into various Storytelling and scrolling JavaScript libraries (Scrollstory, Waypoints and InView) to achieve this goal simply, lightweight and easy. All of them (so far) seem completely overengineered for what I'm trying to do.

The barely available tutorials and code snippets make me feel a little bit like this:

I find no real reference that tells me how to get started with small steps to build a scroller in the first place. Regardless of the library.

Reference files of the individual libraries (that have accessible code) are often outdated and focus on working with external data visualization frameworks and require loading up to four other external scripts for whatever reason and still provide no responsive functionality.

I've tried to rebuild this showcase example here: https://russellgoldenberg.github.io/scrollama/sticky-side/ because it is at least half of what I want to achieve, but I couldn't get it to work and I don't understand the excessive use of JavaScript there either: https://jsfiddle.net/gdkupcb6/2/

...

ANSWER

Answered 2019-Nov-15 at 15:27

First , for your code to work you need to wrap it with main tag.

Source https://stackoverflow.com/questions/58879033

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install scrollstory

Development
Production
npm install scrollstory
A ScrollStory instance can be built with an array of data objects instead of markup, which will be used to generate all the ScrollStory items and elements on the page. The items array and rendered markup are idential to the example above.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: