Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Stars: ✭ 1,101 (+1259.26%)

Mutual labels: parallax

React Easy Params

🔗 Auto synchronize your state with the URL and LocalStorage.

Stars: ✭ 73 (-9.88%)

Mutual labels: front-end

Dev Practice

Practice your skills with these ideas.

Stars: ✭ 1,127 (+1291.36%)

Mutual labels: front-end

F2edocs.com

📘 前端开发-学习资料库 (开源书籍，规范，博客社区，面试题)。前端开发者，是这个互联网时代不可缺少的角色，我们彼此相爱，我们共同学习。

Stars: ✭ 74 (-8.64%)

Mutual labels: front-end

Swiftypagecontroller

SwiftyPageController will be helpful to use in many pages controller

Stars: ✭ 55 (-32.1%)

Mutual labels: parallax

Web Interview

我是「齐丶先丶森」，公众号「前端面试秘籍」作者，收集整理全网面试题及面试技巧，旨在帮助前端工程师们找到一份好工作！

Stars: ✭ 1,230 (+1418.52%)

Mutual labels: front-end

Typescript Challenges

A set of challenges helping you understand TypeScript

Stars: ✭ 79 (-2.47%)

Mutual labels: front-end

Parallaxview

Parallax view for android apps written in Kotlin

Stars: ✭ 70 (-13.58%)

Mutual labels: parallax

Entityframework Reverse Poco Generator Ui

A simple UI to allow you to easily select which tables you want the EntityFramework Reverse POCO Code First Generator to use.

Stars: ✭ 69 (-14.81%)

Mutual labels: front-end

前端学习指南

Stars: ✭ 66 (-18.52%)

Mutual labels: front-end

Single Spa

The router for easy microfrontends

Stars: ✭ 10,395 (+12733.33%)

Mutual labels: front-end

Viewpagertransformer

Viewpager动画,包括渐变,旋转,缩放,3D,立方体等多种酷炫效果动画,实现原理是自定义ViewpagerTransformer,当然你也可以自定义多种动画

Stars: ✭ 62 (-23.46%)

Mutual labels: parallax

Css Sprite Exporter

A script can help generate css sprite animation from AE comps.

Stars: ✭ 80 (-1.23%)

Mutual labels: front-end

Bootstrap Dark

The Definitive Guide to Dark Mode and Bootstrap 4 - A proof of concept

Stars: ✭ 54 (-33.33%)

Mutual labels: front-end

Materialviewpager

A Material Design ViewPager easy to use library

Stars: ✭ 8,224 (+10053.09%)

Mutual labels: parallax

Fbi

Node.js workflow tool

Stars: ✭ 74 (-8.64%)

Mutual labels: front-end

Blog

Life is a moment 📔

Stars: ✭ 1,236 (+1425.93%)

Mutual labels: front-end

Pageaccelerator

A very light solution to load web pages faster

Stars: ✭ 1,229 (+1417.28%)

Mutual labels: front-end

View All Similar Projects ➔

parallax-vanilla.js

Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

Main features

Super lightweight without dependencies

A few kilobytes of pure JavaScript.

Viewport-only animations

Parallax elements are only animated within the current viewport, saving a lot of resources.

Dynamic sizing

Image-elements are dynamically sized and adjusted relative to the pv-speed.

Performance is key

Vanilla Parallax maximizes your parallax effects with hardware acceleration and zero external libraries.

Media type independence

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.

Browser support

Tested browsers:

Chrome	Safari	Firefox
60+	10+	44+

Installation

bower

bower i --save parallax-vanilla

npm

npm i --save parallax-vanilla

Include

Include parallax-vanilla.css in <head>
Include parallax-vanilla.js just before <body>

<link href="path/to/parallax-vanilla.css" />
<script src="path/to/parallax-vanilla.js"></script>

Usage

Simple usage

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>

JavaScript initialization options

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,
  },
})

JavaScript Settings

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: Customize individual elements

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.

CSS

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 {
  ...;
}

LICENSE

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 81

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (4) 🔗

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

erikengervall / Parallax Vanilla

Programming Languages

Labels

Projects that are alternatives of or similar to Parallax Vanilla

parallax-vanilla.js

Demo

Main features

Super lightweight without dependencies

Viewport-only animations

Dynamic sizing

Performance is key

Media type independence

Browser support

Installation

bower

npm

Include

Usage

Simple usage

JavaScript initialization options

JavaScript Settings

Data attributes: Customize individual elements

CSS

LICENSE