Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
parallax-vanilla
Advanced tools
Readme
Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.
A few kilobytes of pure JavaScript.
Parallax elements are only animated within the current viewport, saving a lot of resources.
Image-elements are dynamically sized and adjusted relative to the pv-speed.
Vanilla Parallax maximizes your parallax effects with hardware acceleration and zero external libraries.
The parallax effect applies not only on images but on videos as well. Videos' audio will play if the videos are clicked and remain within the viewport.
Tested browsers:
Chrome | Safari | Firefox |
---|---|---|
60+ | 10+ | 44+ |
bower i --save parallax-vanilla
npm i --save parallax-vanilla
parallax-vanilla.css
in <head>
parallax-vanilla.js
just before <body>
<link href="path/to/parallax-vanilla.css" />
<script src="path/to/parallax-vanilla.js"></script>
1. Wrap a pv-block
with a pv-container
.
<div class="pv-container">
<div class="pv-block"></div>
</div>
2. Attach a mediapath to pv-block
<div class='pv-container'>
<div class='pv-block' pv-mediapath=path/to/file.extension></div>
</div>
3. Initialize library.
<div class='pv-container'>
<div class='pv-block' pv-mediapath=path/to/file.extension></div>></div>
</div>
<script>
pv.init()
</script>
Optional global settings can be configured upon initialization.
pv.init({
container: {
class: String,
height: String || Number,
},
block: {
class: String,
speed: Number || Float,
mediapath: String,
mediatype: String,
mute: Boolean,
},
})
Name | Type | Default | Description | Example values |
---|---|---|---|---|
settings | Object | {container, block} | Settings object. These settings will be applied to each container and block. Can be individually overwritten by data attributes. | {container: {...}, block: {...} |
settings.container | Object | {class, height} | The container object. | {...} |
settings.container.class | String | pv-container | The class of the container element. Remember to update the CSS classes if you wish to change this. | pv-container |
settings.container.height | String || Number | 250px | The container's height in either pixels or viewport heights. If the string lacks a suffix, or a number is entered, it will default to pixels. | 250px, 50vh, 250 |
settings.block | Object | {class, speed, mediatype, mediapath} | The block object. | {...} |
settings.block.class | String | pv-block | The class of the block element. Remember to update the CSS classes if you wish to change this. | pv-block |
settings.block.speed | Number || Float | -Math.PI | The speed and direction at which the parallax animated. Negative values will animate the `block` upwards when scrolling downwards on the page. | 1, 1.5, -1, -1.5 |
settings.block.mediatype | String | image | The block's media type. Blocks with mediapaths containing a video extension will automatically be considered videos. | image, video or none |
settings.block.mediapath | String | undefined | The block's media path. | ../path/to/file.ext |
settings.block.mute | Boolean | false | Defines whether or not all videos should be muted. | true or false |
Data attributes allow fine control over each individual element and will overwrite the global JavaScript settings.
<div class='pv-container' pv-height=100vh>
<div class='pv-block' pv-speed=3.14 pv-mediatype=video pv-mediapath=path/to/epic_montage.mp4 pv-mute=false></div>
</div>
This code will produce a container with class pv-container
with height 100vh
containing a block with class pv-block
with a parallax speed of 3.14
displaying the media epic_montage.mp4
of type video
with pv-mute=false
.
Data attributes for container |
---|
pv-height |
Data attributes for block |
pv-speed |
pv-mediatype |
pv-mediapath |
pv-mute |
The descriptions and the default values are the same as the corresponding properties of the JavaScript settings object.
The CSS in parallax-vanilla.css
is required in order for parallax-vanilla to function properly.
.pv-container {
...;
}
.pv-container .pv-block {
...;
}
.pv-container .pv-block video {
...;
}
.audio-icon {
...;
}
MIT
FAQs
Simple parallax in pure JavaScript designed for performance and dynamic sizing.
The npm package parallax-vanilla receives a total of 4 weekly downloads. As such, parallax-vanilla popularity was classified as not popular.
We found that parallax-vanilla 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.