Transforming img - white dots appear on chronium

218
December 16, 2017, at 11:13 AM

I am trying to get 3d transform effect of the bacground image on mouse move.

I have checked f.e. jquery.plate tilt.js and many others plugins, BUT, each of them has problem on chronium browsers like Chrome or Opera (it works fine even on IE11 -.-)

See the attachment and please adwise what is that and if it is fixable? The "dots" appear on mouse move (when background moves) randomly but in line within image.

(function($) { 
    'use strict'; 
 
    var namespace = 'jquery-plate'; 
 
    function Plate($element, options) { 
        this.config(options); 
 
        this.$container = $element; 
        if (this.options.element) { 
            if (typeof this.options.element === 'string') { 
                this.$element = this.$container.find(this.options.element); 
            } else { 
                this.$element = $(this.options.element); 
            } 
        } else { 
            this.$element = $element; 
        } 
 
        this.originalTransform = this.$element.css('transform'); 
        this.$container 
            .on('mouseenter.' + namespace, this.onMouseEnter.bind(this)) 
            .on('mouseleave.' + namespace, this.onMouseLeave.bind(this)) 
            .on('mousemove.' + namespace, this.onMouseMove.bind(this)); 
    } 
 
    Plate.prototype.config = function(options) { 
        this.options = $.extend({ 
            inverse: false, 
            perspective: 500, 
            maxRotation: 10, 
            animationDuration: 200 
        }, this.options, options); 
    }; 
 
    Plate.prototype.destroy = function() { 
        this.$element.css('transform', this.originalTransform); 
        this.$container.off('.' + namespace); 
    }; 
 
    Plate.prototype.update = function(offsetX, offsetY, duration) { 
        var rotateX; 
        var rotateY; 
 
        if (offsetX || offsetX === 0) { 
            var height = this.$container.outerHeight(); 
            var py = (offsetY - height / 2) / (height / 2); 
            rotateX = this.round(this.options.maxRotation * -py); 
        } else { 
            rotateY = 0; 
        } 
 
        if (offsetY || offsetY === 0) { 
            var width = this.$container.outerWidth(); 
            var px = (offsetX - width / 2) / (width / 2); 
            rotateY = this.round(this.options.maxRotation * px); 
        } else { 
            rotateX = 0; 
        } 
 
        if (this.options.inverse) { 
            rotateX *= -1; 
            rotateY *= -1; 
        } 
 
        if (duration) { 
            this.animate(rotateX, rotateY, duration); 
        } else if (this.animation && this.animation.remaining) { 
            this.animation.targetX = rotateX; 
            this.animation.targetY = rotateY; 
        } else { 
            this.transform(rotateX, rotateY); 
        } 
    }; 
 
    Plate.prototype.reset = function(duration) { 
        this.update(null, null, duration); 
    }; 
 
    Plate.prototype.transform = function(rotateX, rotateY) { 
        this.currentX = rotateX; 
        this.currentY = rotateY; 
        this.$element.css('transform', 
            (this.originalTransform && this.originalTransform !== 'none' ? this.originalTransform + ' ' : '') + 
            'perspective(' + this.options.perspective + 'px) ' + 
            'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)' 
        ); 
    }; 
 
    Plate.prototype.animate = function(rotateX, rotateY, duration) { 
        if (duration) { 
            this.animation = this.animation || {}; 
 
            var remaining = this.animation.remaining; 
            this.animation.time = performance.now(); 
            this.animation.remaining = duration || null; 
            this.animation.targetX = rotateX; 
            this.animation.targetY = rotateY; 
 
            if (!remaining) { 
                requestAnimationFrame(this.onAnimationFrame.bind(this)); 
            } 
        } else { 
            this.transform(rotateX, rotateY); 
        } 
    }; 
 
    Plate.prototype.round = function(number) { 
        return Math.round(number * 1000) / 1000; 
    }; 
 
    Plate.prototype.offsetCoords = function(event) { 
        var offset = this.$container.offset(); 
        return { 
            x: event.pageX - offset.left, 
            y: event.pageY - offset.top 
        }; 
    }; 
 
    Plate.prototype.onAnimationFrame = function(timestamp) { 
        this.animation = this.animation || {}; 
 
        var delta = timestamp - (this.animation.time || 0); 
        this.animation.time = timestamp; 
 
        var duration = this.animation.remaining || 0; 
        var percent = Math.min(delta / duration, 1); 
        var currentX = this.currentX || 0; 
        var currentY = this.currentY || 0; 
        var targetX = this.animation.targetX || 0; 
        var targetY = this.animation.targetY || 0; 
        var rotateX = this.round(currentX + (targetX - currentX) * percent); 
        var rotateY = this.round(currentY + (targetY - currentY) * percent); 
        this.transform(rotateX, rotateY); 
 
        var remaining = duration - delta; 
        this.animation.remaining = remaining > 0 ? remaining : null; 
        if (remaining > 0) { 
            requestAnimationFrame(this.onAnimationFrame.bind(this)); 
        } 
    }; 
 
    Plate.prototype.onMouseEnter = function(event) { 
        var offset = this.offsetCoords(event); 
        this.update(offset.x, offset.y, this.options.animationDuration); 
    }; 
 
    Plate.prototype.onMouseLeave = function(event) { 
        this.reset(this.options.animationDuration); 
    }; 
 
    Plate.prototype.onMouseMove = function(event) { 
        var offset = this.offsetCoords(event); 
        this.update(offset.x, offset.y); 
    }; 
 
    $.fn.plate = function(options) { 
        return this.each(function() { 
            var $element = $(this); 
            var plate = $element.data(namespace); 
 
            if (options === 'remove') { 
                plate.destroy(); 
                $element.data(namespace, null); 
            } else { 
                if (!plate) { 
                    plate = new Plate($element, options); 
                    $element.data(namespace, plate); 
                    plate.reset(); 
                } else { 
                    plate.config(options); 
                } 
            } 
        }); 
    }; 
 
})(jQuery); 
 
    $('#ab12cd').plate()
<div id="ab12cd" styles="width:100%;height:100%"> 
<img src="http://eskipaper.com/images/dark-background-8.jpg" /> 
</div> 
<script 
  src="https://code.jquery.com/jquery-3.2.1.min.js" 
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
  crossorigin="anonymous"></script>

// please open in new window, most visible effect you cen see if you move mouse bottom left/right

Rent Charter Buses Company
READ ALSO
&#39;Access-Control-Allow-Origin&#39; header for font files

'Access-Control-Allow-Origin' header for font files

I'm having an issue with loading fonts on a different domainI found an answer: How to add an Access-Control-Allow-Origin header but it's not working for me

274
Keeping Images Centered As New Pictures Are Added with CSS in Ionic Project

Keeping Images Centered As New Pictures Are Added with CSS in Ionic Project

I'm very new to coding and need some help with image alignment using CSSThe program needs to take pictures and each time it takes a picture, a thumbnail of the picture needs to be added in line

176
3D Spatial Radar implemented w/ Three.JS

3D Spatial Radar implemented w/ Three.JS

I am attempting to implement a spatial radar that renders the location of objects in respect to an origin in 3D spaceThe radar is essentially a circular plane at an angle with circular grid lines

185
Resampling and calculating year over year with partial data

Resampling and calculating year over year with partial data

I'm looking to see if there is a programmatic way to resample and calculate a year over year percent change calc when the final period is partialFor instance, say i wanted to do year over year changes

202