ramotion / aquarelle Goto Github PK
View Code? Open in Web Editor NEW:octocat: ๐จ Aquarelle is a watercolor effect component. Javascript library by @Ramotion
Home Page: https://www.ramotion.com/agency/web-design/
License: MIT License
:octocat: ๐จ Aquarelle is a watercolor effect component. Javascript library by @Ramotion
Home Page: https://www.ramotion.com/agency/web-design/
License: MIT License
https://bl.ocks.org/mbostock/raw/4241134/d3.geom.contour.min.js is down, any backup link?
I saw in the thread on Product Hunt that you would consider packaging this for release on npm if enough users asked you to. I propose we use this issue to measure user interest in an npm package.
Hello,
the first time I took a look at this js it was awesome, now the static demo is scattering is there any issue? I was thinking on using it on one of my projects.
Thanks,F.
Cloned the latest, and tried to run the example. Added the CDNs, installed the bower folder in the directory, but I get the following errors:
Uncaught TypeError: aquarelle.addEventListener is not a function at index.html:139:15
Aquarelle.js:103 Uncaught TypeError: d3.geom.contour is not a function
at Aquarelle.drawMaskImage (Aquarelle.js:103:35)
at Image.Aquarelle.self.mask.img.onload (Aquarelle.js:24:22)
The problem in examples/index.html is here:
var aquarelle = new Aquarelle(image, 'img/mask.png', {
autoplay: true,
loop: true
});
aquarelle.addEventListener('created', function() {
var canvas = this.getCanvas();
canvas.removeAttribute('style');
image.parentNode.insertBefore(canvas, image.nextSibling);
image.parentNode.removeChild(image);
});
Using VSCODE Go-Live, macos, installed bower with brew. Thoughts? Thanks for looking!
I see this doesn't seem to work with transparent PNG images? Are there any plans for the future to add PNG support or any way to get it working now?
Hello,
Loving this effect!
However i'm noticing a dramatic impact on performance in my site.
I just need to use it for the beginning intro, the effect is then removed and it is not needed again.
Despite removing the canvas and the animation having finished, performance of the whole site is permanently reduced. If I reload without this effect performance returns to its normal state.
For reference the canvas and relevant images are inside a React element (though the same is occurring when they're not) and the project is using Ruby on Rails. When i say removing the effect I am calling
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode)
from inside the react element containing the canvas and aquarelle object. Thus the canvas is removed from the DOM.
Is there a way to use the aquarelle effect for the beginning and then completely remove it from memory? That is close any Three.js items, clear everything and effectively return the site to a state if the effect had never been run?
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.