Skip to content
Advertisement

Custom ripple effect (I want to use var inside my inline style)

I have written this part of code for ripple effect on my image but it doesn’t work. Can anyone help me to figure this out? I want to use var inside my inline style

var HalfBoxWidth = parseFloat($(".half-left-parallax").width());
var HalfBoxHeight = parseFloat($(".half-left-parallax").height());
$(".hlp-after").css("width", HalfBoxWidth);
$(".hrp-after").css("width", HalfBoxWidth);
$(".half-left-parallax").mouseover(function (event) {
  var py = event.pageY - $(".half-left-parallax").offset().top;
  var px = event.pageX - $(".half-left-parallax").offset().left;
  var fx = parseFloat((px / HalfBoxWidth) * 100).toFixed(2);
  var fy = parseFloat((py / HalfBoxHeight) * 100).toFixed(2);
  var cliping = fx + "% " + fy + "%";
  $(".hlp-after").css({ "clip-path": "circle(150% at cliping)" });
});

Advertisement

Answer

this is correct format of your code

var HalfBoxWidth = parseFloat($('.half-left-parallax').width());
        var HalfBoxHeight = parseFloat($('.half-left-parallax').height());
        $('.hlp-after').css('width', HalfBoxWidth);
        $('.hrp-after').css('width', HalfBoxWidth);
        $(".half-left-parallax").mouseover(function(event){
            var py = event.pageY - $('.half-left-parallax').offset().top;
            var px = event.pageX - $('.half-left-parallax').offset().left;
            var fx = parseFloat(px / HalfBoxWidth * 100).toFixed(2);
            var fy = parseFloat(py / HalfBoxHeight * 100).toFixed(2);
            var cliping = fx + '% ' + fy + '%';
            $(".hlp-after").css({"clip-path":"circle(150% at "+ cliping +")"});            
        });
Advertisement