Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
scroll-parallax
Advanced tools
ES6/ES2015 unobstrusive modern HW accelerated scrollable images parallax
Oh no, why another parallax script? Do we really need it?
There are many parallax scripts but none of them was satisfying my personal needs:
So I decided to make my own and you can be free to use it or simply ignore it and move forward to the next one!
$ npm install scroll-parallax --save
# or
$ bower install scroll-parallax --save
Once you have included the script in your page, you should wrap your parallax elements in a wrapper having an height
, position:relative or absolute
and overflow: hidden
The elements will be stretched to fit always the whole wrapper size
<figure style="position: relative; height: 300px; overflow: hidden;">
<img class="parallax" src="path/to/the/image.jpg" />
</figure>
<figure style="position: relative; height: 300px; overflow: hidden;">
<video class="parallax" src="path/to/the/video.mp4" />
</figure>
The Parallax api is really simple and the following snippet should be enough:
var p = new Parallax('.parallax').init()
The options available are only 4 at moment:
Type | Name | Default Value | Description |
---|---|---|---|
Number | offsetYBounds | 50 | the offset top and bottom boundaries in pixels used by the parallax to consider an element in the viewport |
Number | intensity | 30 | the intensity of the parallax effect |
Number | center | 0.5 | the vertical center of the parallax. If you increase this value the element will be centered more on the top of the screen reducing it will look centered at bottom this value should be between 0 and 1 |
Number | safeHeight | 0.15 | the safe element height gap value in percentage that ensures it can always properly parallax. Any element should be (by default) at least 15% higher than their DOM wrappers (7.5% bottom + 7.5% top) |
You can set the Parallax options in this way:
var p = new Parallax('.parallax', {
offsetYBounds: 50,
intensity: 30,
center: 0.5,
safeHeight: 0.15
}).init()
Each element could be configured using custom Parallax options (except for the offsetYBounds
) overriding the defaults:
<figure>
<img class="parallax" data-center="0.8" data-intensity="50" src="path/to/the/image.jpg" />
</figure>
<figure>
<video class="parallax" data-center="0.2" data-intensity="10" data-safe-height="0.2" src="path/to/the/video.mp4" />
</figure>
Each Parallax instance has some useful methods that could be used to adapt it to your application needs
Initialize the parallax internal event listeners. The listeners to element:loaded
and elements:loaded
should be set before this method gets called
The on
method allows you to listen the internal Parallax events from the outside.
Currently it supports:
element:loaded
: when a parallax elment gets completely loadedelements:loaded
: when all the elements to parallax get loadeddraw
: when a parallax element becomes visible in the the viewport and starts getting movedresize
: when the window will be resizedupdate
: when the page is scrolling and the script has updated all the visible elemensp.on('element:loaded', function(element){
// do something with the element
})
Stop listening an internal Parallax event
var fn = function (element) {
// do something with the elemnt just drawn
p.off('draw', fn) // stop listening the draw event
}
p.on('draw', fn)
Refresh the position of the elements visible in the viewport
// do extremely heavy dom updates
p.refresh()
Add new element to the parallax instance
// inject new elements
p.add('.parallax-2')
Remove element from the parallax instance
p.remove('.parallax-2') // remove the element from the parallax
// and also from the DOM...
Destroy the parallax instance removing all the internal and external callbacks to its internal events
p.destroy() // the parallax is dead!
$ ./make # or also `$ npm run default`
$ ./make build # or also `$ npm run build`
$ ./make test # or also `$ npm run test`
$ ./make serve # or also `$ npm run serve`
$ ./make watch # or also `$ npm run watch`
3.0.1
FAQs
ES6/ES2015 unobstrusive modern HW accelerated scrollable images parallax
The npm package scroll-parallax receives a total of 109 weekly downloads. As such, scroll-parallax popularity was classified as not popular.
We found that scroll-parallax demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.