CODEWITHSUNDEEP
jqueryhtmlcssanimationhtml5-canvas
error500
error500

Reputation: 197

How to animate an image under a mask or a clip using html css and jquery?

I'm trying to animate the move of an image under a mask wich stays not moving I have 2 ways for that : one using the mask property and the second using th clip

First way using Mask :

See working script at http://jsfiddle.net/2Aecz/ or below

<html>
<head>
<style>
  #myimage {
      clip-path: url(#mask1);
      position: absolute;

   }
</style>
</head>

<body>

<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
  <defs>
    <clipPath id="mask1">
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
    $( "#myimage" ).click(function() {
     $( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
   var left = $('path, polygon, circle').attr('cx');
    $('path, polygon, circle').attr('cx', left-5);
    });
});
</script>

</body>

Second using Clip

See working script at http://jsfiddle.net/XdtNy/ or below

<html>
<head>
<style>
#myimage {
  mask: url("#mask2");
  position: absolute;
}


</style>


</head>

<body>
<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
<defs>
  <mask id="mask2" >
    <circle cx="50" cy="50" r="40" style="fill: #ffffff"/>
  </mask>
</defs>
</svg>


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#myimage" ).click(function() {
        $( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
        var left = $('path, polygon, circle').attr('cx');
        $('path, polygon, circle').attr('cx', left-5);
    });
});
</script>

</body>

My problem :

How to move together image and mask (in reverse direction) together and fluide ? Or is there any other way to animate this ?

Upvotes: 2

Views: 8538

Answers (1)

Tank
Tank

Reputation: 1006

Currently this method of masking seems to be unsupported in many browsers, which may not be useful in production code.

With that said, I would apply the image to the background of a block object, then animate the background. This way, the object stays in place, but movement is only applied to the offset of the background.

Example: http://jsfiddle.net/R5FQY/

HTML:

<div id="myimage2"> </div>
<svg width="0" height="0">
  <defs>
    <clipPath id="mask">
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>

CSS:

#myimage2 {
  background:transparent url('http://lorempixel.com/100/100');
  width:100px;
  height:100px;
  clip-path: url(#mask);
}

Javascript:

$( document ).ready(function() {
  $( "#myimage2" ).click(function() {
    $(this).animate({ 'backgroundPosition': "+=5px" }, "slow" );
  });
});

Upvotes: 2

Related Questions