Glowing text using pure css and html

     The following animation created using pure css and html code no javascript.

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More

physicsjs - Increase the restitution value for circle and retangle

In this example we are increase the edge-collision-detection restitution value.

    Physics(function(world) {



      // bounds of the window

      var renderer = Physics.renderer(

         'canvas', {

            el: 'viewport', // id of the canvas element

            width:500,

            height:500

         });

      world.add(renderer);



      var square = Physics.body(

         'rectangle', {

            x: 250,

            y: 250,

            vx: 0.10,

            width: 50,

            height: 50

         });

      world.add(square);

      world.render();     

     

      var circle = Physics.body(

         'circle', {

            x: 250,

            y: 250,

            vx: 0.10,

            radius:20

            //width: 50,

            //height: 50

         });

      world.add(circle);

      world.render();





     Physics.util.ticker.on(function(time, dt ){

        world.step(time);

     });

   

      world.on('step', function(event){

         world.render();

      });

     

    //Let’s add some constant acceleration downwards (gravity) 

    world.add( Physics.behavior('constant-acceleration') );

   

    var bounds = Physics.aabb(0, 0, 500, 500);

    world.add(Physics.behavior('edge-collision-detection', {

        aabb: bounds,

        restitution: 0.9

    }));

   

    // ensure objects bounce when edge collision is detected

    world.add(Physics.behavior('body-impulse-response') );





 });

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More

physicsjs Collide with each other - animation

     In this example each and every objects are interacting with other objects, this edge detection is automatically calculating.

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More

create a loader using pure css

     The following loader only we are using the css code. This can be used for loader on waiting time.

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More