LILITH-TRANSITION
WHAT
LILITH-TRANSITION is a toy project that used Paint API (Houdini APIs), it add just one transition-paint to simulation dot-transition.
WHY
No reason, just want to try new things
HOW
LILITH-TRANSITION
How to import -
Use Node.js (with
rollup.js
):-
install
LILITH-TRANSITION
:npm install lilith-transition -S
-
import
LILITH-TRANSITION
on anywhere:// import all (painter and web-components). import("lilith-transition"); // import painter only. import("lilith-transition/painter");
-
-
Use CDN:
-
add script tag into your html:
<script type="module" src="https://raw.githubusercontent.com/JuerGenie/lilith-transition/master/release/index.js"></script>
TIPS: this resource always is latest version, if you want to fixed version, you should copy the file into your project's static folder.
-
add style into your element:
<div style="background-image: paint(lilith-transition); --lilith-transition-position: 50%"></div>
-
LILITH-TRANSITION
How to use -
sample:
<div class="lilith-transition"></div> <style> .lilith-transition { background-image: paint(lilith-transition); --lilith-transition-position: -50%; --lilith-transition-length: 50%; transition: --lilith-transition-position 1s ease-out; } </style> <script type="module"> const div = document.querySelector(".lilith-transition"); div.addEventListener("mouseenter", () => { div.attributeStyleMap.set("--lilith-transition-position", "60%"); }); div.addEventListener("mouseleave", () => { div.attributeStyleMap.delete("--lilith-transition-position"); }); </script>
See example
folder, the scss
file (example/style.scss
) defined some stylesheet class to help you for use this.
And if you want to know what is the example's look like, you can try:
- clone this repository
- run
yarn
- run
yarn watch
- open new terminal, run
yarn dev
- open web page
http://127.0.0.1:8080
this example page look like:
About custom properties
Property Name | Syntax | Inherits | Initial Value | Description |
---|---|---|---|---|
--lilith-transition-color |
<color> |
√ | #000 |
context's fill style. |
-–lilith-transition-density |
<length> | <length-percentage> |
√ | 100px |
distance between dots. recommend use px cause now just handle px and per , and finally all use px . |
--lilith-transition-direction |
horizontal | vertical |
√ | horizontal |
transition direction. |
–-lilith-transition-length |
<length> | <length-percentage> |
√ | 200px |
transition length. recommend use px cause now just handle px and per , and finally all use px . |
–-lilith-transition-max-size |
<length> | <length-percentage> |
√ | with --lilith-transition-density
|
dot's radius, range (0, MAX] , if value lt or eq 0 , it will use --lilith-transition-density 's value.recommend use px cause now just handle px and per , and finally all use px . |
--lilith-transition-position |
<length> | <length-percentage> |
× | 0 |
current transition progress. recommend use px cause now just handle px and per , and finally all use px . |
--lilith-transition-style |
fade-in | fade-out | fade-in-out |
√ | fade-in |
transition's style, see example . |
Finally
You can contact me by email.