Giter VIP home page Giter VIP logo

let_it_snow's Introduction

#Let it Snow by Pete R. Create and Control a Festive Snow on Your Website using HTML5 Canvas Created by Pete R., Founder of BucketListly

Note: This plugin is based on Jason Brown's solution found here

Let it Snow

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

Basic Usage

Let it Snow is a little plugin that is based off the solution of creating a snow effect with HTNL5 Canvas by Jason Brown. I decided to extend its functionality so that developer will have a full control of how the animation of snow will react.

To add this to your website, simply include the latest jQuery library together with jquery.let_it_snow.js into your document's <head>, and simply call the function like this:

$("canvas").let_it_snow({
  speed: 0, // How fast the snow falls can be define here. You can choose a number in between 0 - 5. The higher, the faster. The default value is 0.
  interaction: true, // This option allows viewer to interact with the falling snow. Toggle this to false if you don't want the snow to be interactive. The default value is true.
  size: 2, // You can set the size of the snow here. Choose a number between 0 - 10+. The higher, the bigger. The default size is 2.
  count: 200, // This allows you to set the number of snows displayed at a time. The default count is 200.
  opacity: 0, // The opacity variation of the snow. You can choose a number in between 0.00 and 1.00 to set the base opacity and the plugin will randomly generate snows with slightly varied opacity.
  color: "#ffffff", // You can set the color of the snow here. This option only accepts HEX color code in full 6 digits. The default value is "#ffffff"
  windPower: 0, // You can set the wind power here. If you want the wind to blow left, set a positive number in this option., if you want the wind to blow right, set a negative number in this option. The default value is 0.
  image: false // You can define a path to an image to be used instead of a default circle here. The default value is false.
});

If you want to change an option after inititing let_it_snow plugin you can trigger letItSnow.set event passing two arguments in the second parameter array: ["optionName", "optionValue"]:

$("canvas").trigger("letItSnow.set", ["windPower", 13]);

And that's all for this plugin. Stay tuned for more updates.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.