Changing -webkit-mask-position via javascript

Question

I am working on an iPad web browsing project that requires the slider to move back and forth across two pictures, opening one or the other when sliding left or right. Due to the limitations of the project, I cannot use jQuery. Currently, I have a left picture on top with a transparent mask on top of it, and when the -webkit-mask position increases, it shows more of the bottom image, when it decreases, more of the top (covers the bottom).

I am using a javascript plugin called Draggy ( https://github.com/jofan/Draggy ) to move the slider back and forth and use its onChange function call to update the position of the mask, but I can’t understand what javascript calls "- webkit-mask-position "to save my life.

Any ideas?

PS: webkitMaskPosition adds the style = "- webkit-mask: XX" to the element that I CAN use (filling in other values ​​in js), but it really is a buggy. I am studying it now.

HE MAN I GOT IT.

var maskSlider = document.getElementById('molecule'); function moveMask(x, y) { var xx = x - 285; var z = "-webkit-gradient(linear, left center, right center, color-stop(0.5, black), color-stop(0.5, transparent)) no-repeat scroll " + xx + "px padding padding"; maskSlider.style.webkitMask = z; } 

"-285" - make it align to the place where the slider is on the image. I have no idea if I'm doing it right, but it worked. If anyone can think of a more efficient and effective way to do this, please let me know.

Answer 1

I recently worked hard on webkit masks that use CSS3 gradients to transition between images. I preferred to add the style tag to the head tag, which is dynamically created by my calculations. And also I used CSS3 animation. Something like that:

  var cssStr = '<style id="myTransition">.myTransition_wipe{' + '-webkit-mask-size: 200% 200%;' + '-webkit-mask-repeat: no-repeat;' + '-webkit-animation: wipe 2s;' + '-webkit-animation-direction: normal;' + '-webkit-animation-iteration-count: 1;' + '-webkit-animation-fill-mode: forwards;' + '-webkit-mask-position: offsetLeftS 0;' + '-webkit-mask-image: -webkit-gradient(linear, left top, right top, ' + 'color-stop(0%, transparent), color-stop(20%, transparent), ' + 'color-stop(25%, transparent), color-stop(30%, transparent), ' + 'color-stop(50%, rgba(0, 0, 0, 1)), color-stop(98%, rgba(0, 0, 0, 1)), ' + 'color-stop(100%, rgba(0, 0, 0, 1)));}' + '@-webkit-keyframes wipe {' + '0% { -webkit-mask-position: offsetLeftS 0; }' + '100% { -webkit-mask-position: offsetLeftD 0; }' + '}' + '</style>'; var compStyle = getComputedStyle(currentElement); var width = parseInt(compStyle.getPropertyValue("width")); var height = parseInt(compStyle.getPropertyValue("height")); cssStr = cssStr.replace(/offsetLeftS/g, '-' + (width * 1) + 'px'); cssStr = cssStr.replace(/offsetLeftD/g, '+' + (width * 1) + 'px'); $('head').append(cssStr); 

When I want to apply a transition, I remove the style tag with its identifier and myTransition_wipe class from it, and then add a new head tag and add it to the element too,

Please note:. You must save the styles that the element should have after the animation is completed, and add them immediately after the animation. Otherwise, when you remove the class name and style tag, everything will be reset.

Luck