Create a circles animation with .circles()

.circles()


Description: Creates a floating circles animation.


Example:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>circles demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
      
      <style type="text/css">
         .floater_container h1 {
            text-align:center;
            color:#FFF;
            font-size:50px;
            padding:40px;
         }
      </style>
      
    </head>
    <body>
        
      <div class="floater_container">
         <h1>EXAMPLE TEXT HERE</h1>
      </div>
      
      <script>
         
         bitsyCode.ready(function(){
            bitsyCode.animation.circles({ container:".floater_container", max:100 });
         })
         
      </script>
     
    </body>
    </html>

Preview:

EXAMPLE TEXT HERE

  • Usage

    • How to use:

      Add floating circles effect on your website.

    • USAGE:

      bitsyCode.ready(function(){ // Check for document ready
          bitsyCode.animation.circles({ container:".floater_container", dimensions:40, max:100 });
      })
  • Options

    • What options are there:
      dimensions: 30 (default value) // Specify the maximum dimenions of the circles.
      height: 300 (default value) // Specify the container height for circles to be contained.
      max: 10 (default value) // Specify maximum amount of circles to create.
      speed: 1000 (default value) // Specify the movement speed of the circles.
      bgcolor: '#FFF' (default value) // Set a background color of the circles.
  • Returns

    • Returns: No return type

      This method does not need to return any type.

Share