1.0.1 • Published 3 years ago
ember-cli-basicscroll v1.0.1
ember-cli-basicscroll
standalone parallax scrolling with CSS variables
Features
- Wrapper for basicScroll library
- Intuitive implementation for adding parallax scrolling to any element
Compatibility
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Installation
ember install ember-cli-basicscroll
Usage
Easily add parallax scrolling to any element using the {{basic-scroll}}
modifier.
<div class="box" {{basic-scroll from="bottom-bottom" to="top-top" direct=true props=this.props}}></div>
Here are the props
for the parallax box above:
import Controller from '@ember/controller';
export default class IndexController extends Controller {
get props () {
return {
'--r': {
from: '0',
to: '1turn'
},
'--tx': {
from: '-100px',
to: '500px'
}
}
}
}
Lastly, here is the css for the parallax box above.
html, body {
height: 1500px;
}
.box {
top: 500px;
position: relative;
width: 5em;
height: 5em;
background: linear-gradient(135deg, #3cdddd, #ff1ac6);
transform: translateX(var(--tx)) rotate(var(--r));
transition: transform .1s linear;
will-change: transform;
}
See the basicScroll documentation for more information on how to configure the modifier for parallax scrolling.
Contributing
See the Contributing guide for details.
License
This project is licensed under the Apache-2.0.