A simple way to implement reveal animations
source link: https://www.tuicool.com/articles/BvEfYbY
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A JavaScript vanilla library to scroll based reveal animations
murphy.js is a lightweight JavaScript animation library with a simple implementation way.
All this works by joining of data-attributes, Web animate API and Intersection Observer API.
Why use murphy
-
:zap:️ Lightweight library (only 1.7KB gzipped).
-
:apple: Easy and fast implementation.
-
:video_game: Total control of IntersectionObserver parameters.
-
:art: Full customization of time, duration, ease, delay and distance of each element individually.
-
:gift: Some animations implemented by default.
-
Plug and play solution to landing pages and simple projects.
-
:negative_squared_cross_mark: Native fallback to not supported browsers.
Getting started
Download
Via npm:
$ npm install murphyjs
Via file include:
Download file here and link in your HTML.
<script src="./murphy/index.js"></script>
Usage
Just do three steps:
:golf: Tag your HTML
In your markup, decore your element with attribute data-murphy
.
<div data-murphy="left-to-right">Any content here</div>
The default effect of murphy is bottom-to-top
, but it's possible use top-to-bottom
, left-to-right
and right-to-left
too.
:electric_plug: Reset your CSS
In your CSS, reset all the tagged elements.
*[data-murphy] { opacity: 0; }
:rocket: Start murphy
In Javascript side, just import and run playMurphy when your page is completely loaded to start monitoring decorated elements.
Import
import murphy from "murphyjs";
And trigger
murphy.play()
Or call from window
If you added murphy via file include , just access murphy's functions in window:
window.murphy.play() // or just murphy.play()
That is enough to work!
Examples
1. This data-attributes
:
<p data-murphy="bottom-to-top">Bottom to top</p> <p data-murphy="top-to-bottom">Top to bottom</p> <p data-murphy="left-to-right">Left to right</p> <p data-murphy="right-to-left">Right to left</p>
Will result in that:
2. To do the same effect that murphy's logo, use:
<p data-murphy="bottom-to-top">m</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="400">u</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="500">r</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="600">p</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="700">h</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="800">y</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="900">.</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="1000">j</p> <p data-murphy="bottom-to-top" data-murphy-animation-delay="1100">s</p>
Result:
:rotating_light: Important
These animations are triggered when scrolling the page, but when the tagged elements are already within the bounds of the screen, everything works like appearance animations that React Transition Group already does. So if you need animations on the first load of site, murphy is for you!
Documentation
Attributes
You can configure the animation of each decorated element individually. Beyond the data-murphy
attribute, other attributes are available:
Methods
Method What happens play Start monitoring on element in DOM tagged withdata-murphy
reset
Resets all data-murphy elements to their initial state.
Browser support
Chrome Safari IE / Edge Firefox Opera 58+ 12.1+ Not (yet) supported 55+ 62+License
The code is available under the MIT License .
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK