@wecodeit/ng-magnetic v2.0.0
Angular Wrapper of michaelgudzevskyi/cursor-hover-effect-gsap for a custom cursor and magnetic cursor effect.
š Homepage
āØ Demo
Install
npm install @wecodeit/ng-magnetic
Usage
Import the NgMagneticModule
and NgCursorModule
in your app.module.ts:
import { NgMagneticModule, NgCursorModule } from 'ng-magnetic';
@NgModule({
imports: [
BrowserModule,
NgMagneticModule,
NgCursorModule
],
})
export class AppModule { }
####Magnetic Effect
To apply the magnetic effect, simply add the ngMagnetic
directive to your element:
<div class="cb-demo-item" ngMagnetic [options]="magneticOptions">
<div class="cb-demo-item-title">Magnetic</div>
<div class="cb-demo-item-text">
Magnetic via [data-magnetic] attribute
</div>
</div>
</div>
Inputs
/** options of ngMagnetic effect */
@Input() options: MagneticOptions = {
hDelta: 0.2, // horizontal delta
vDelta: 0.2, // vertical delta,
speed: 0.2, // speed
releaseSpeed: //release Speed
};
####Custom Cursor
Use the ng-cursor component inside your main component for example app.component.html
:
If you use a smooth-scroll library which uses translate, make sure to place the cursor outside of the transformed element.
<router-outlet></router-outlet>
<ng-cursor></ng-cursor>
To modify your cursor, simply use the following attributes:
<!-- add size class xl or lg-->
<div data-cursor="-xl"></div>
<!-- add opaque effect to the cursor -->
<div data-cursor="-opaque"></div>
<!-- you can also use multiple styles at once -->
<div data-cursor="-xl -opaque"></div>
<!-- set image of cursor -->
<div data-cursor-image="https://picsum.photos/200/300"></div>
<!-- set cursor text -->
<div data-cursor-text="Hello!"></div>
<!-- use sticky effect -->
<div data-cursor="-exclusion -lg" data-cursor-stick="#cursor-stick-area">
<div class="cb-demo-item-title" id="cursor-stick-area">
Sticky
</div>
</div>
Inputs
/** options of the cursor */
@Input() options: CursorOptions = {
speed: 0.7,
ease: 'expo.out',
visibleTimeout: 300,
};
Author
š¤ Felix Jiricka
- Website: www.wecodeit.dev
- Github: @felixjiricka
š¤ Contributing
Contributions, issues and feature requests are welcome!Feel free to check issues page.
Show your support
Give a āļø if this project helped you!
This README was generated with ā¤ļø by readme-md-generator