Animated Shooting Stars

Mychelle Blake
shooting star

Strategic placement of animated images can add pizzazz and flair to a website, and shooting stars are a terrific example of this. While they can easily create an interesting visual, they could also be considered an annoying eyesore if done incorrectly. The way they are perceived lies in the way they are used on a site.

Resources for Animated Graphics

The animated GIFs included in this article are free to use. Simply click on the "Source" link that appears in the upper right corner, which will open up the image in a new tab. Right-click to save to your computer from there.

Whether you want shooting stars to trail behind a user's mouse pointer or you'd like to utilize them as an animated background to a webpage, there are many places where you can download these graphics online.

Animated GIFs

A GIF (Graphics Interchange Format) file is a type of image file. A website designer can easily add one to a page for easy animation.

  • A1 Star: There are a variety of animated star GIF files available as free downloads from this site. There are some large stars, groupings and small star animations.
  • Photobucket: Photobucket has over 1,200 animated star photos available for download.
  • Animation Library: There are nine pages of animated stars to choose from here.
  • Web Weaver: Download both static and animated GIFs for use on either dark or light backgrounds. These kinds of animations are very basic, so if you use them on your site, be aware that you are automatically giving your website a kind of "retro" feeling.
  • Giphy: You can find several animated GIFs here featuring a variety of shooting stars with and without text. Some come with cartoon or movie images too.

Animated Background

An animated shooting star background can add some charm to a site.

Animated shooting stars
  • Cool Chaser: While these backgrounds are intended for social media pages, the first two can be downloaded and used on any website.
  • Web Weaver: Download a transparent, multi-colored shooting star background to use on any website.
  • Pinterest: Browse a collection of static and animated star backgrounds that you can download (or pin) to your heart's delight.
  • Youtube: Preview a simple twinkling star background that is free to use on any website. The download link is included in the video description.

Custom GIF Images

If you aren't able to find the perfect animated image, you can create your own.

  • Picasion: Upload your own pictures to create a shooting star animation, including options to define the size and speed of the resulting file.
  • My Space Gens: Create an animated GIF from your own star photos in three easy steps. The resulting files are free, high quality and without watermarks.
  • Make a Gif: Create your own animated GIFS from your own pictures, a YouTube link, a video file, or a webcam feed. You can also store your GIFs here.

Flash Movies

Movies tend to be more sophisticated animations than comparatively simpler GIFs, but the resulting file sizes tend to be larger too.

  • Amara Software: Find free flash animations of stars, falling stars, and blinking stars here, including two themed after Christmas.
  • iStockPhoto: While it isn't free, this is stock image website includes professional level, royalty free animations.

Customized Flash

For a more personalized touch, consider these resources for creating your own custom Flash video of shooting stars.

  • YouTube: Follow this tutorial video to create your own unique twinkling star animation.
  • Free Nice Templates: Customize a Flash movie with a shooting star theme.
  • BellaOnline: Use Flash Motion Tween to create animated stars by reading this step-by-step tutorial.

Animated Star Cursor

Want a shooting star image to animate around visitors' cursors on your website? All it takes is a little bit of code.

  • JavaScript Bank: The lightweight code is easy to customize. Check the demo area to preview how it will look.
  • Cursors-4U: A huge collection of animated cursor codes can be found here, all available as free downloads.

Tips and Advice

Keep these best practices in mind if you want to use shooting stars on your website without looking archaic or unprofessional.

Animated shooting stars
  • Use high quality animations: While there are many places to get small and free GIF animations, most of these are a decade old or more. The quality of graphics has improved immensely since then and it's worth looking for some higher quality SVG, Flash, or DHTML based animations for higher quality graphics and smoother motion.
  • Remember that less is more: While you may be tempted to fill your screen with multiple animated fireworks displays proclaiming the awesomeness of your site, a more restrained presentation will do the job and keep people interested in coming back to your site for more.
  • Avoid visual conflicts: Don't turn the entire page into a struggle between the eye trying to read the text and being drawn up to the dazzling animations.

Adding Animation to a Web Site

In order to add an animated image to a website, download the file to your own hard drive and then add it to the appropriate page.

  1. Right-click on the animated image.
  2. Select "Save As" and save the file on your computer.
  3. Make note of where the file is saved.
  4. Go to your preferred website builder or design program.
  5. Upload the file to the appropriate folder of the website.
  6. Insert the image file where you would like for it to appear.

More Uses for Shooting Star Graphics

In addition to websites, these types of animations may also be suitable for videos and PowerPoint presentations. Shooting stars have been awe-inspiring for as long as mankind has looked up. Used correctly, they can help you harness that natural delight to make your own work even more powerful.

Animated Shooting Stars