75th / parallaxative Goto Github PK
View Code? Open in Web Editor NEWA vanilla JS library to help those who must implement parallax under duress
License: ISC License
A vanilla JS library to help those who must implement parallax under duress
License: ISC License
I'm new to this ES6 stuff and habitually type var
everywhere. I need to fix that about myself and this library.
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
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
The exact same considerations and dilemma as #13
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
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, ScrollAnimation
s 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 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.
There's lots of stuff I could do with this, and enhancements to ScrollDetector
that might be necessary. Ideas:
ScrollDetector
outputtriggerOnDeactivate
was forAnimations 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.
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
I need to implement tests, somehow, for all the various ways to use these classes:
I need to see if there are good conventions for in-repo documentation other than the README. I don't like long READMEs
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]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.