html修改js版本控制,javascript – 使用JS mousemove性能更改CSS属性

成功.我的解决方案是一系列建议.

我现在正在更改每个元素的transform属性,但在执行此操作时遇到了另一个问题.我在这些相同的元素上有一个变换关键帧动画,并且忽略了JS应用的样式.

为了解决这个问题,我嵌套了关键帧动画元素并使用JS来转换父元素.

我已经应用了来自@CristianTraìna的建议来移动我的mousemove外的window.requestAnimationFrame()

遗憾的是,CodePen不允许对项目进行版本控制.

最终的工作代码

(function($) {

'use strict';

var $banner = $('section.interactive');

if ($banner.length) {

var $patterns = $banner.find('.pattern');

var x = 0,

y = 0;

// Bind animation to cursor

$(window).on('mousemove', function(event) {

x = event.pageX;

y = event.pageY;

});

/**

* Tell the browser that we wish to perform an animation

* @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

*/

window.requestAnimationFrame(function animation() {

// Loop each pattern layer

$patterns.each(function(key) {

// Modify the x,y coords per element to give "depth"

var modifier = 20 * (key + 1);

// Move background position

$(this).css({

'transform': 'translate('+(x / modifier)+'px, '+(y / modifier)+'px)'

});

});

window.requestAnimationFrame(animation);

});

}

})(jQuery);

section.interactive {

position: relative;

height: 100vh;

background-image: linear-gradient(45deg, #6ac8ea 0%, #5de2c1 100%);

}

section.interactive .layers {

overflow: hidden;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.1) 100%);

}

section.interactive .layers .pattern {

position: absolute;

top: -10px;

left: -10px;

bottom: -10px;

right: -10px;

background-position: top left;

will-change: background-position;

background-size: 1000px 1000px;

}

section.interactive .layers .pattern .inner {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

section.interactive .layers .pattern.pattern-1 .inner {

background-image: url("http://www.inrialpes.fr/sed/people/boissieux/VEAD/out_Stars.svg");

filter: blur(2px);

opacity: 0.3;

z-index: 1;

animation: Floating 10s infinite;

animation-delay: 2s;

background-size: 800px 800px;

}

section.interactive .layers .pattern.pattern-2 .inner {

background-image: url("http://www.inrialpes.fr/sed/people/boissieux/VEAD/out_Stars.svg");

filter: blur(1px);

opacity: 0.4;

z-index: 2;

animation: Floating 10s infinite;

animation-delay: 1s;

background-size: 900px 900px;

}

section.interactive .layers .pattern.pattern-3 .inner {

background-image: url("http://www.inrialpes.fr/sed/people/boissieux/VEAD/out_Stars.svg");

opacity: 0.4;

z-index: 3;

animation: Floating 10s infinite;

background-size: 1000px 1000px;

}

@keyframes Floating {

0% {

transform: translate(-10px, 10px);

}

50% {

transform: translate(10px, -10px);

}

100% {

transform: translate(-10px, 10px);

}

}

Animation performance