sigmasoli.blogg.se - Countdown gif

#COUNTDOWN GIF HOW TO#
#COUNTDOWN GIF UPDATE#

#COUNTDOWN GIF UPDATE#

To update a dev.to article you need the article ID. Now this one is also pretty straight forward. Putting that all together we end up with our GIF One quirk I found was that a duration of 100 is a second, I was expecting 1000 to be a second.

An array of images (I used relative paths but it handles files as well).

The key part of it is the $gc->create function. our hex to RGB function function hexToRGB ( $colour ) No problem, I have a snippet sat in my library for converting Hex to an RGB array! Ok that is fine, but I prefer Hex values when working with colours. To do that we have to use another function: imagecolorallocate. Now the only thing that is a little bit confusing is how you pass RGB colours to the function.

the font family (the path to the chosen font).

the colour of the text (in RGB - more on that in a sec).

the y position (in pixels from the top).

the x position (in pixels from the left).

The angle we want the text at (in degrees).The next thing we need to do is add the text. It also creates the image object that we can work with. I created a super simple image with a large "white space" to the left. Most PHP hosting and environments have GD image library installed so you should be able to do this even on shared hosting!įirst we grab the source image (the background we are going to write our text on).Įnter fullscreen mode Exit fullscreen mode Now with GD image library installed this isn't actually as difficult as it first seems.

#COUNTDOWN GIF HOW TO#

The first part of the puzzle was creating an image sequence that I could later turn into a GIF.īut before we create a sequence of images we have to work out how to make one image! Right, with all that out of the way, let's begin! (If this happens you can view an old version of the GIF here). I don't think I can fix that as it appears to be the dev.to caching pointing to the old image! The use case is for email marketing, where we cannot use JavaScript to create a countdown and we cannot even use video (reliably), so an animated GIF is our only option!ĭownloading a 4mb GIF to display a countdown timer would be a massive mistake for performance, use JavaScript instead (plus it is waaaay easier)!įinally - if you return to the page the image might not show for you. Obviously it isn't one massive file (it would need 26 MILLION frames! so it would be quite large) so how did I do it?Īs pointed out in a comment by this is a lot of effort for a countdown timer! In fact you can check for the accuracy of my timer here, it should be within a minute when you first load this page! I think it is pretty cool that for the next 200+ days (at time of writing) that Gif will always be within one or two minutes of an actual countdown timer!

If the GIF doesn't load you can view an old version of the GIF here.

The GIF below is counting down to the 3rd January 2022 at 09:00.