Last active
November 23, 2020 11:22
-
-
Save doccaico/a264a256856bf584fe660cacda5683c0 to your computer and use it in GitHub Desktop.
Nim with Anime.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="anime.min.js"></script> | |
| <style> | |
| body {background-color: #ddd;} | |
| </style> | |
| </head> | |
| <body></body> | |
| <script src="a.js"></script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import dom, jsffi | |
| # nim's version: 1.0.4 | |
| # $ tree . | |
| # ├── a.html | |
| # ├── a.nim | |
| # ├── anime.min.js | |
| # | |
| # $ nim js a.nim | |
| # | |
| # $ tree . | |
| # ├── a.html | |
| # ├── a.js | |
| # ├── a.nim | |
| # ├── anime.min.js | |
| # | |
| # $ google-chrome a.html | |
| type | |
| Anime = ref object | |
| translateX: int | |
| targets: cstring | |
| rotate: int | |
| proc anime(anime: Anime) {.importc, nodecl.} | |
| var obj1 = document.createElement("div") | |
| obj1.id = "obj1" | |
| obj1.style.backgroundColor = "green" | |
| obj1.style.width = "24px" | |
| obj1.style.height = "24px" | |
| var obj2 = document.createElement("div") | |
| obj2.id = "obj2" | |
| obj2.style.backgroundColor = "yellow" | |
| obj2.style.width = "24px" | |
| obj2.style.height = "24px" | |
| var obj3 = document.createElement("div") | |
| obj3.id = "obj3" | |
| obj3.style.backgroundColor = "red" | |
| obj3.style.width = "24px" | |
| obj3.style.height = "24px" | |
| var app = document.createElement("app") | |
| document.body.appendChild(app) | |
| app.appendChild(obj1) | |
| app.appendChild(obj2) | |
| app.appendChild(obj3) | |
| anime(Anime{ | |
| targets: "#obj1", | |
| translateX: 250, | |
| rotate: 540},) | |
| anime(Anime{ | |
| targets: "#obj2", | |
| translateX: 250, | |
| rotate: 540},) | |
| anime(Anime{ | |
| targets: "#obj3", | |
| translateX: 250, | |
| rotate: 540},) |
doccaico
commented
Nov 23, 2020
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment