Help please: movable clip-path


(marc) #1

Hi i found this example for movable Text text follows mouse. How can i make this with a clip-path or svg mask? thx a lot for sugestions or help


(Hans-Gerd Claßen) #2

css-clippath is one option … as always: read about browsersupport …

example reacts on mousemove and hypedrag
css_clipPath.hype.zip (1.1 MB)


CSS Mask Xray Effect
(marc) #3

Wow thx a lot! perfect, but doesn’t work in safari…


(Hans-Gerd Claßen) #4

adding a new line setting the webkit-prefix should work:

element.style.webkitClipPath = 'circle(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'


(marc) #5

It works but only on mouse click.

regards


(Hans-Gerd Claßen) #6

for the mousemove it’ll be
test.style.webkitClipPath = 'circle(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'

there are two function within the document … one for dragging … one for mousemove …


(marc) #7

Works perfect - thx a lot


(marc) #8

I have changed the clip path to a triangle. The triangle appears, but no interaction:

<style>
	#test{
	-webkit-clip-path : polygon(51% 21%, 26% 65%, 79% 65%);
	clip-path : polygon(51% 21%, 26% 65%, 79% 65%);
	}
	
	</style>
	
element.style.clipPath = 'polygon(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'
element.style.webkitClipPath = 'polygon(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'

(Hans-Gerd Claßen) #9

can’t work …
the example js was for a circle.
to use a polygon you’ll have to calculate all its point-coordinates


(marc) #10

thx for reply is there an example

regards

marc


(marc) #11

Or is it possible with svg mask?

cssplant


(Hans-Gerd Claßen) #12

both types need to calculate the polygonpoints on-drag-or-move


(marc) #13

Ok, do you have link or a resource file, that i can understand how to calculate it on drag or move?

Thanks a lot


#14

BTW I edited your post so that it appears as code by clicking this button with your code selected:

49 AM


(Hans-Gerd Claßen) #15

css_clipPathPolygon.hype.zip (1.1 MB)
this may not be perfect, but does a job :slight_smile:


(marc) #16

Thx a lot