• Stars
    star
    203
  • Rank 192,890 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Lightweight & performant parallax scrolling for angular.js.

angular-parallax

Lightweight and highly performant AngularJS directive for parallax scrolling. Script is just 1.6K and about 40K gzipped with dependencies.

Uses requestAnimationFrame and translate3d for GPU accelerated, smooth transitions.

Install

$ bower install ng-parallax

Dependencies

AngularJS and angular-scroll.

Usage

Quickstart

Include module and dependencies.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//oblador.github.io/angular-scroll/0.6.2/angular-scroll.min.js"></script>
<script src="//oblador.github.io/angular-parallax/angular-parallax.min.js"></script>

Define transitions and expose to template.

angular.module('myApp', ['duParallax']).
  controller('MyCtrl', function($scope, parallaxHelper){
    $scope.background = parallaxHelper.createAnimator(-0.3);
  }
);

Apply parallax scrolling with the du-parallax attribute, define y position with the transition named background.

<section ng-controller="MyCtrl">
  <img src="img.png" du-parallax y="background" alt="" />
</section>

createAnimator

Convenience method for creating animator closures.

parallaxHelper.createAnimator(easingFactor, max, min, offset);

Animatable attributes

Attributes can be literals or a function called with a parameter object containing scrollY, elemX, elemY. The function should return the change in pixels relative to the objects current position if associated with y or x, otherwise the desired new value.

  • y
  • x
  • rotation
  • opacity
  • custom
<img src="img.png" du-parallax y="accelleratedScroll" x="moveInFromLeft" opacity="fadeIn" rotation="'35deg'" alt="" />

Custom animator

The custom animator should return an object with camelCased CSS properties like this:

$scope.invertColors = function(elementPosition) {
  var factor = -0.4;
  var pos = Math.min(Math.max(elementPosition.elemY*factor, 0), 255);
  var bg = 255-pos;
  return {
    backgroundColor: 'rgb(' + bg + ', ' + bg + ', ' + bg + ')',
    color: 'rgb(' + pos + ', ' + pos + ', ' + pos + ')'
  };
}
<div du-parallax custom="invertColors">[loads of text…]</div>

Example

Check out oblador.github.io/angular-parallax or view the source at example/index.html.

Building

$ npm install
$ gulp

License

Licensed under the MIT License

More Repositories

1

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
JavaScript
17,427
star
2

react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
JavaScript
9,838
star
3

react-native-progress

Progress indicators and spinners for React Native
JavaScript
3,628
star
4

hush

🀫 Noiseless Browsing – Content Blocker for Safari
JavaScript
3,264
star
5

react-native-keychain

πŸ”‘ Keychain Access for React Native
Kotlin
3,194
star
6

react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
JavaScript
2,818
star
7

react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
JavaScript
2,450
star
8

loki

πŸ‘ Visual Regression Testing for Storybook
JavaScript
1,778
star
9

react-native-image-progress

Progress indicator for networked images in React Native
JavaScript
1,723
star
10

angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
JavaScript
1,482
star
11

react-native-performance

πŸ“ Monitor and measure React Native performance
TypeScript
929
star
12

react-native-store-review

Rate on App/Play Store directly in your React Native app
Java
751
star
13

react-native-shimmer

Simple shimmering effect for any view in React Native
Java
700
star
14

react-native-esbuild

Fast bundler and dev server for react-native using esbuild
JavaScript
595
star
15

react-native-parallax

Parallax effects for React Native using Animated API
JavaScript
585
star
16

react-native-vector-image

iOS/Android native vector assets generated from SVG
JavaScript
310
star
17

react-native-pinchable

Instagram like pinch to zoom for React Native
Java
225
star
18

angular-lazytube

Lightweight, responsive, lazy loaded YouTube videos that degrades gracefully.
JavaScript
45
star
19

diglett

Keep your JS project lean by detecting duplicate dependencies
JavaScript
44
star
20

esbuild-server

Fast, lightweight and powerful development server for esbuild
TypeScript
38
star
21

react-native-oxc

10x your react-native builds with OXC
TypeScript
28
star
22

oblador.github.io

Landing page for my GitHub projects
HTML
10
star
23

oblador

5
star
24

node-cloud-imager

Powerful yet simple way to apply filters/crop/resize images and upload to cloud providers (Amazon S3, Rackspace, Azure).
JavaScript
3
star
25

node-ups-sdk

JavaScript
3
star
26

sovra

🀏 Rust-based Test Decider for JavaScript using Oxc
Rust
2
star
27

expo-requestidlecallback-issue

TypeScript
1
star
28

react-native-android-autolinking-bug-repro

TypeScript
1
star
29

.github

1
star
30

react-native-fabric-image-unicode-issue

TypeScript
1
star