h5bp / mothereffinganimatedgif Goto Github PK
View Code? Open in Web Editor NEWMake your animated gifs in the browser! Oh yeah!
Home Page: https://mothereffinganimatedgif.com/
License: MIT License
Make your animated gifs in the browser! Oh yeah!
Home Page: https://mothereffinganimatedgif.com/
License: MIT License
I added a couple of static gifs, which have transparency. When I view the animation, I can still see the first image under the second, while the second image flashes on and off. I would expect the two images to alternate... is this a known problem with transparency?
I want to make a html5 animated gif desktop app but no license for this project means unclear copyright terms.
Just playing with the scripts, and download link never displays for us.
Also , can we not write the created gifs to our own directory and do away with saveasbro.com ?
Not entirely sure what the saveasbro.com is... aside from analytic gathering
On src inspection, download link always has display:none
Apologies for sounding like a total tit.
Busted in chrome atm :(
Uncaught TypeError: Cannot read property 'contentWindow' of null ui.js:91
I dropped in two jpg images (645px square) and it threw this error consistently.
GitHub watch button url on http://mothereffinganimatedgif.com/ goes to Paul's lazy requests rather than this repo. Would fix myself but about to head out when I noticed.
Possibly everyone has an ad blocker that didn't notice this but visiting http://mothereffinganimatedgif.com/ will get redirected to http://saveasbro.com/ that is a spam website I believe
You should make the ability to add a short sound file. That would be great!
Sometimes, animated gifs can easily replace a simple slide show, which needs longer durations than 600 ms.
I hope nobody minds removing some tag soups, but it appears there are a few tags we can remove from the markup beginning with this one...God help me!
<footer id="footer" role="content-info">.....</footer>
Hey guys,
I love the site. But remembering a huge domain name is a pain.
HashNuke
mothereffinganimatedgifFan
https://twitter.com/#!/Thrillist/status/177504811602821120
http://www.thrillist.com/entertainment/nation/mother-effin-animated-gif_time-wasters_websites
cool.
(and yes i'm using issues as a mailing list. :)
Hovering over that speed banner graphic in the footer - which transitions a rotation - causes the screen to flash in Chrome / OSX.
Is this at all possible ?
I was looking at : http://www.patrick-wied.at/static/watermarkjs/
and adding class="watermark" to <img id="animresult" ... but its not playing ball.
So wondered, is it possible to add hidden image to the animation sequence that is say 48px by 48px ( transparent png ) with watermark on it, that when user renders the animation is displayed as a watermark overlay ?
On: Chrome 18.0.1025.33 beta
The dragleave event gets fire when you drag over the image inside the div class="col". Which essentially removed the 'over' class on the current block you are hovering over.
Is GIF generator script published? Where can I find script of server side "saveasbro.com/gif"?
If anyone notices this failed resource below please let me know what a good solution would be to manifest this resource properly. It has been placed in the Network section previously and was unsuccessful in the results.
Currently chrome caches the entries, but Firefox will not display resources with offline content under about:cache. This does not hinder the offline ability though with Firefox -very strange.
http://www.google-analytics.com/__utm.gif?utmwv=5.2.5&utms=2&utmn=1205207997&utmhn=mothereffinganimatedgif.com&utmcs=UTF-8&utmsr=1280x1024&utmvp=1143x778&utmsc=24-bit&utmul=en-us&utmje=1&utmfl=11.1%20r102&utmdt=Mothereffing%20animated%20gif&utmhid=605837725&utmr=-&utmp=%2F&utmac=UA-18857974-3&utmcc=__utma%3D57817526.1952415057.1332005253.1332005253.1332005253.1%3B%2B__utmz%3D57817526.1332005253.1.1.utmcsr%3D(direct)%7Cutmccn%3D(direct)%7Cutmcmd%3D(none)%3B&utmu=q~
cloudflare is set up but pointing via CNAME to github pages.
https://mothereffinganimatedgif.com/
if you see saveasbro issues in the console then it hasn't been updated. But i THINK i have the configuration of everything set up... just waiting for propagation..
Drag and drop is great and all, but is it really easier / better? I have to resize all my windows and drag stuff around to even get to the point where I can drag more stuff into the window, and all I want to do is make a gif out of some files. I know the original intent was to mimic dropmocks, which I think it does a good job of, but it's clunky for "file structure first" folks
Intended behavior: if the page is empty and has no gif on it already, anything you click that isn't an obvious link fires a multiple file upload prompt. It would also be cool if it knew which probable order the image files should go in
Chrome 17.0.963.46
Just go here
Is there an implicit file size limit? I'm trying to use 5mb images and when I drag and drop, nothing happens. Images do not show up in the timeline yet there are no errors in the UI or console. I tried digging into the code but I didn't see anything that stood out.
/cc @paulirish
inside omggif-worker.js
add this
var getGifBuffer = function(gif,buffer) {
var l = gif.end();
var uInt8View = new Uint8Array(new ArrayBuffer( l ));
//var viewLength = uInt8View.length;
var i;
for (i = 0; i < l; i++) {
uInt8View[i] = buffer[i];
}
return uInt8View;
};
var gifBuffer = getGifBuffer(gif,buffer);
and then add this line to the postMessage
self.postMessage({
type: "gif",
//*here*
buffer: gifBuffer,
data: gifString,
frameCount: framesLength,
encodeTime: Date.now()-startTime
});
here is code that invoke download :)
//http://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
var saveData = (function () {
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
return function (data, fileName) {
// var json = JSON.stringify(data),
// var blob = new Blob([json], {type: 'octet/stream'}),
var blob = new Blob([data], {type: 'octet/stream'}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
a = null;
};
}());
var fileName = 'gif.gif';
//*added buffer param*
saveData(info.buffer, fileName);
Chrome on Mac OSX shows this on the website thanks to the Github buttons on the top right, redirecting to http://markdotto.github.com/github-buttons/github-btn.html?user=paulirish&repo=lazyweb-requests&type=watch&count=true afterwards. What's up, guys?
Using Chrome Version 25.0.1364.172 on Macbook Pro.
When clicking the Animate button throws the JS exception in ui.js "contentWindow" is null.
Only Modernizr.download test is used for creating the iFrame "#savesbro" , but when calling the function showDownloadLink , there are multiple in the IF condition
Modernizr.download && Modernizr.bloburls && Modernizr.blobbuilder
In chrome , the test "Modernizr.blobbuilder" is false ,hence trying the iFrame download option - then throwing JS exception.
your github watchers/watch button on http://mothereffinganimatedgif.com/ is linked to paulirish/lazyweb-requests not h5bp/mothereffinganimatedgif.
The default background color is black.
Think if you could:
• Pick a color (HEX input should be fine, unless you want to add a picker).
• Select an already dragged-in image to use as a background (default behavior - stretch to fill behind the animated images).
Cheers.
Today I tried to implement web workers. It wasn't possible with my try because jsgif is mainly relied on canvas
and we don't have document
in a worker to create an canvas
and draw images on it.
Docs at jsgif are saying author couldn't use web workers in his project too.
Does anyone have a suggestion or trick for this?
Thanks
When is this suckah gonna work offline using the super awesome cache manifest like sprite cow?
GIFEncoder.js has some issues with color and transparency (I'm using it as well here: cam->gif Meemoo app). Has anybody been looking into making the output higher-quality?
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.