75th / parallaxative Goto Github PK

Of course I discover basicScroll after setting out to make my own parallax library. We'll see if I can get mine to a point where I feel Parallaxative has earned a right to exist alongside it, before giving up and just using basicScroll forever

• Accept a media query string instead of a MediaQueryList object
• Accept a dict with options instead of an object already instantiated with those options
• Et cetera

I'm new to this ES6 stuff and habitually type var everywhere. I need to fix that about myself and this library.

I don't know if these even need to exist. ScrollAnimationValueSet has one method, but that method's functionality is in ParallaxAnimation instead of ParallaxAnimationValueSet. I need to figure out what's better and make them the same.

I should probably just disable them entirely with UA sniffing; I don't think there's a good way to test for its crappy performance

ParallaxAnimation instances expect certain default CSS; I need to get this in the src and dist folders instead of just demo. Also I need to figure out whether I have to do the insane import-CSS-into-JavaScript thing instead of just making a .css file, but that may be a separate issue

There's lots of stuff I could do with this, and enhancements to ScrollDetector that might be necessary. Ideas:

• Make it based on pixel positions instead of ScrollDetector output
• Make it revert or fire a second function when scrolling backwards past the threshold.
• Figure out a sane thing to do with whatever I was thinking triggerOnDeactivate was for

I need to implement tests, somehow, for all the various ways to use these classes:

• Using manually instantiated objects everywhere
• Using all combinations of all forms of syntax sugar
• Using multiple AnimationValueSets, if those still exist
• Using both ES7 and ES5 versions of the library

The exact same considerations and dilemma as #13

Every ScrollAnimation and ParallaxAnimation yields two new event listeners, one for scroll and one for resize. I should probably make it so there's only one of each listener per page, that iterates over a global array of animation objects or something.

Users should be able to interpolate between their start and end values within a custom-clamped range of possible ScrollDetector float values, instead of just [0, 1]

Right now, ScrollAnimations always use clamped relative scroll positions between 0 and 1. Perhaps I should look into letting it use unclamped floats as well? I have given no thought to how to implement this right now though

I need to see if there are good conventions for in-repo documentation other than the README. I don't like long READMEs

Animations would be much friendlier if they allowed background-image instead of requiring backgroundImage, etc. But I don't fancy writing that code, and I would really like to keep the number of dependencies to zero. Don't know how to square that circle.

Each ScrollTrigger, ScrollAnimation, and ParallaxAnimation creates a new MediaQueryList object with default settings. I should make a single global one. While I'm at it, I might as well let users set their own global default, probably with a static method on ScrollDetector.

Right now, ScrollDetector output is 0 when the top border of the reference element aligns with the bottom of the viewport, and 1 when the bottom border of the element aligns with the top of the viewport.

During development of my last site I had a thought that it would be nice to optionally make 0 and 1 be top/top and bottom/bottom instead. The big problem with that, though, is that the order of those times can be [ forwards / simultaneous / backwards ], depending on whether the reference element is [ shorter than / the same height as / taller than ] the viewport.

Also, maybe there's a case for using different, arbitrary points altogether? All this needs a lot more thought