Perspective - 🖼Parallax scrolling effect. And more.

  •        128

Parallax scrolling/hovering effect. And more. A standalone Javascript library to make dashing scrolling/hovering effects. Any CSS properties with number values are supported.

https://github.com/Leopoldthecoder/Perspective.js#readme
https://github.com/Leopoldthecoder/Perspective

Dependencies:

color-convert : ^1.9.0
dom-walk : ^0.1.1
throttle-debounce : ^1.0.1

Tags
Implementation
License
Platform

   




Related Projects

motion - An Android library allowing images to exhibit a parallax effect that reacts to the device's tilt

  •    Java

An Android library allowing images to exhibit a parallax effect. By replacing static pictures and backgrounds with a fluid images that reacts to screen tilt and orientation, Android applications can add a perceived depth, layering, and context to their content. Motion works great for both full screen background images and smaller sized pictures to give users a whole new perspective on how they interact with their phone. This project was inspired in part by iOS 7's new parallax effect. Feel free to download the demo to try out motion.

simpleParallax - Simple and tiny JavaScript library which adds parallax animations on any images

  •    Javascript

simpleParallax is a very simple and tiny Vanilla JS library which adds parallax animations on any images. Where it may be laborious to get results through other plugins, simpleParallax stands out for its ease and its visual rendering. The parallax effect is directly applied on image tags, there is no need to use background images. You can read one case study here.

rellax - Lightweight, vanilla javascript parallax library

  •    HTML

Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0). Use the data-rellax-speed attribute to set the speed of a .rellax element to something other than the default value (which is -2). A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. We recommend keeping the speed between -10 and 10.

vue-parallax - 🌌 Vue.js component for parallax image scroll effects

  •    Javascript

Is a compontent for fast 60fps parallax scroll effects in vue 2. vue-parallax works with slots. So you can pass an image or even srcsets for better mobile experiences.

react-native-snap-carousel - Swiper/carousel component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support

  •    Javascript

Swiper component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support. Compatible with Android & iOS. This app is available on Android and iOS. It uses version 3.2.0 of the plugin, with FlatList's implementation and parallax images.


stellar.js - Stellar.js - Parallax scrolling made easy

  •    Javascript

PLEASE NOTE: This project is no longer maintained. If parallax scrolling is something you care about, please apply to become a contributor to this project. Full guide and demonstrations available at the official Stellar.js project page.

locomotive-scroll - 🛤 Detection of elements in viewport & smooth scrolling with parallax.

  •    Javascript

Detection of elements in viewport & smooth scrolling with parallax effects. With simple detection.

Parallax - Parallax is an iOS library that reproduces the parallax effect of the iOS7 home screen.

  •    Objective-C

Parallax is an iOS library that reproduces the parallax effect of the iOS7 home screen. Use CocoaPods add Parallax to your project.

react-native-parallax-scroll-view - A ScrollView-like component with parallax and sticky header support

  •    Javascript

Note: For React Native 0.19.0 and earlier, you'll want to use react-native-parallax-scroll-view@0.17.4. Version 0.18.0 changes the scrolling API to be compatible with React Native 0.20.0. Please refer to the ListView example provided to see how ParallaxScrollView can be used in combination with ListView.

A3ParallaxScrollView - A UIScrollview subclass with a high performance parallax scrolling effect

  •    Objective-C

#What is A3ParallaxScrollView? A3ParallaxScrollView is a UIScrollView subclass with a parallax scrolling effect on iPhone and iPad. It is written in Objective-C and works for all iOS applications using ARC.

SAParallaxViewControllerSwift - SAParallaxViewControllerSwift realizes parallax scrolling with blur effect

  •    Swift

SAParallaxViewControllerSwift realizes parallax scrolling with blur effect. In addition, it realizes seamless opening transition. Add the SAParallaxViewControllerSwift directory to your project.

Parallax-ImageScroll - JQuery and amd compatible plugin to create a parallax effect as seen at spotify

  •    Javascript

JQuery and amd compatible plugin to create a parallax effect with images. Heavily inspired by the spotify.com website. The plugin is really simple to use with some options to tweek. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.

react-native-app-intro - react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs

  •    Javascript

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs... You can use pageArray quick generation your app intro with parallax effect. With the basic usage, the Android status bar will be updated to match your slide background color.

Parallax-Layer-Layout - Layered parallax effect to any Android views

  •    Java

Lets you add layered parallax effect to your Android views or images based on things like device rotation. We use it at InfoJobs for our error and empty states.

Parade - Parallax Scroll-Jacking Effects Engine for iOS / tvOS

  •    Swift

Communicating to cells inside of UICollectionViews, UITableViews, or UIScrollViews, has always been a challenge. It almost always relies on a messy process of trying to relay the scroll to progress to cells in triggering special scrolling effects. We’ve designed this framework to minimize the effort needed to animate views. With a simple blocks-based builder we’ve made it easy to define view states—from where they appear and where they will disappear to. There is a demo app included as part of the project that contains the following implemented examples for the following scrolling effects within the animated gif below.

basicScroll - Standalone parallax scrolling for mobile and desktop with CSS variables.

  •    Javascript

Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables.

jQuery-Parallax - **NO LONGER MAINTAINED** Used to recreate the Nike Better World parallax effect

  •    CSS

jQuery Parallax is a script that simulates the parallax effect as seen on nikebetterworld.com.

parallax - Parallax Engine that reacts to the orientation of a smart device

  •    Javascript

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead. Many thanks to the fine folks over at cdnjs for hosting our library.

MPParallaxCollection - [dead] a collection view layout + cell that can do something percent driven ( parallax for image)

  •    Objective-C

A collection view layout and a cell subclass usefull to made parallax of an image during the scrolling. But even thanks to the delegate useful to make cool percent driven effect, in the example I used my MPTextReveal to show you how to use. To run the example project, clone the repo, and run pod install from the Example directory first.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.