We Keep Coding

How to make custom cursor stay with cursor on scroll

Looking for some help with a custom cursor. It's all working fine except for when you scroll, the custom cursor stays where it is on the page until you move the mouse again and then it catches up. So I need to make the custom cursor stick to the position of the default cursor at all times.
Thanks in advance!
const queryCursor = document.querySelector(".cursor");
var cursor = {
delay: 8,
_x: 0,
_y: 0,
endX: window.innerWidth / 2,
endY: window.innerHeight / 2,
cursorVisible: true,
cursorEnlarged: false,
$cursor: queryCursor,
init: function () {
this.outlineSize = this.$cursor.offsetWidth;
this.setupEventListeners();
this.animateDotOutline();
},
setupEventListeners: function () {
var self = this;
// On Hover Active
document.querySelectorAll("a, img, .elementor-custom-embed-image-overlay, button").forEach(function (el) {
el.addEventListener("mouseover", function () {
self.cursorEnlarged = true;
queryCursor.classList.add("active");
});
el.addEventListener("mouseout", function () {
self.cursorEnlarged = false;
queryCursor.classList.remove("active");
});
});
// On Hover Disappears
document.querySelectorAll("input, textarea, iframe, video, .footer").forEach(function (el) {
el.addEventListener("mouseover", function () {
self.cursorEnlarged = true;
queryCursor.classList.add("hidden");
});
el.addEventListener("mouseout", function () {
self.cursorEnlarged = false;
queryCursor.classList.remove("hidden");
});
});
document.addEventListener("mousemove", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.endX = e.pageX;
self.endY = e.pageY;
});
document.addEventListener("mouseenter", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$cursor.style.opacity = 1;
});
document.addEventListener("mouseleave", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$cursor.style.opacity = 0;
});
},
animateDotOutline: function () {
var self = this;
self._x += (self.endX - self._x) / self.delay;
self._y += (self.endY - self._y) / self.delay;
self.$cursor.style.top = self._y + "px";
self.$cursor.style.left = self._x + "px";
requestAnimationFrame(this.animateDotOutline.bind(self));
},
toggleCursorVisibility: function () {
var self = this;
if (self.cursorVisible) {
self.$cursor.style.opacity = 1;
} else {
self.$cursor.style.opacity = 0;
}
}
};
cursor.init();
.cursor {
z-index: 1000;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s, width 0.3s, height 0.3s;
width: 20px;
height: 20px;
background-color: #EBF602;
display: flex;
align-items: center;
justify-content: center;
}
.cursor.active {
transform: translate(-50%, -50%) scale(2);
opacity:0.7 !important;
}
.cursor.hidden {
opacity: 0 !important;
}
section{
min-height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<section></section>
<section></section>

Remove the ability to hold down a keyboard key

I have a small page. Circles appear here, when you click on them they disappear.
I added here the possibility that in addition to clicking on the LMB, you can also click on a keyboard key, in my case it is "A".
But I noticed the problem that if you hold down the "A" button, then drive in circles, then the need for clicks disappears, and this is the main goal.
Can I somehow disable the ability to hold this button so that only clicking on it works?
I tried pasting this code, but all animations stopped working for me.
var down = false;
document.addEventListener('keydown', function () {
if(down) return;
down = true;
// your magic code here
}, false);
document.addEventListener('keyup', function () {
down = false;
}, false);
Get error:
"message": "Uncaught ReferenceError: mouseOverHandler is not defined"
//create circle
var clickEl = document.getElementById("clicks");
var spawnRadius = document.getElementById("spawnRadius");
var spawnArea = spawnRadius.getBoundingClientRect();
const circleSize = 95; // Including borders
function createDiv(id, color) {
let div = document.createElement('div');
div.setAttribute('class', id);
if (color === undefined) {
let colors = ['#ebc6df', '#ebc6c9', '#e1c6eb', '#c6c9eb', '#c6e8eb', '#e373fb', '#f787e6', '#cb87f7', '#87a9f7', '#87f7ee'];
randomColor = colors[Math.floor(Math.random() * colors.length)];
div.style.borderColor = randomColor;
}
else {
div.style.borderColor = color;
}
// Randomly position circle within spawn area
div.style.top = `${Math.floor(Math.random() * (spawnArea.height - circleSize))}px`;
div.style.left = `${Math.floor(Math.random() * (spawnArea.width - circleSize))}px`;
div.classList.add("circle", "animation");
// Add click handler
let clicked = false;
div.addEventListener('mouseover', mouseOverHandler );
div.addEventListener('mouseout', mouseOutHandler );
div.addEventListener('click', (event) => {
if (clicked) { return; } // Only allow one click per circle
clicked = true;
div.style.animation = 'Animation 200ms linear forwards';
setTimeout(() => { spawnRadius.removeChild(div); }, 220);
});
spawnRadius.appendChild(div);
}
let i = 0;
const rate = 1000;
setInterval(() => {
i += 1;
createDiv(`circle${i}`);
}, rate);
let focusedEl = null;
const keyDownHandler = (evt) => {
if(evt.keyCode === 65 && focusedEl) focusedEl.click();
}
const mouseOutHandler = (evt) => focusedEl = null;
const mouseOverHandler = (evt) => focusedEl = evt.currentTarget;
document.addEventListener('keydown', keyDownHandler );
window.focus();
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #0f0f0f;
}
.circle {
width: 80px;
height: 80px;
border-radius: 80px;
background-color: #0f0f0f;
border: 3px solid #000;
position: absolute;
}
#spawnRadius {
top: 55%;
height: 250px;
width: 500px;
left: 50%;
white-space: nowrap;
position: absolute;
transform: translate(-50%, -50%);
background: #0f0f0f;
border: 2px solid #ebc6df;
}
#keyframes Animation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
opacity: 0;
}
}
<html>
<body>
<div id="spawnRadius"></div>
</body>
</html>

You can check the repeat property of the event, which
… is true if the given key is being held down such that it is automatically repeating.
(but notice the compatibility notes on auto-repeat handling)
const keyDownHandler = (evt) => {
if (!evt.repeat && evt.keyCode === 65) {
// ^^^^^^^^^^^
focusedEl?.click();
}
}
//create circle
var clickEl = document.getElementById("clicks");
var spawnRadius = document.getElementById("spawnRadius");
var spawnArea = spawnRadius.getBoundingClientRect();
const circleSize = 95; // Including borders
function createDiv(id, color) {
let div = document.createElement('div');
div.setAttribute('class', id);
if (color === undefined) {
let colors = ['#ebc6df', '#ebc6c9', '#e1c6eb', '#c6c9eb', '#c6e8eb', '#e373fb', '#f787e6', '#cb87f7', '#87a9f7', '#87f7ee'];
randomColor = colors[Math.floor(Math.random() * colors.length)];
div.style.borderColor = randomColor;
}
else {
div.style.borderColor = color;
}
// Randomly position circle within spawn area
div.style.top = `${Math.floor(Math.random() * (spawnArea.height - circleSize))}px`;
div.style.left = `${Math.floor(Math.random() * (spawnArea.width - circleSize))}px`;
div.classList.add("circle", "animation");
// Add click handler
let clicked = false;
div.addEventListener('mouseover', mouseOverHandler );
div.addEventListener('mouseout', mouseOutHandler );
div.addEventListener('click', (event) => {
if (clicked) { return; } // Only allow one click per circle
clicked = true;
div.style.animation = 'Animation 200ms linear forwards';
setTimeout(() => { spawnRadius.removeChild(div); }, 220);
});
spawnRadius.appendChild(div);
}
let i = 0;
const rate = 1000;
setInterval(() => {
i += 1;
createDiv(`circle${i}`);
}, rate);
let focusedEl = null;
const mouseOutHandler = (evt) => focusedEl = null;
const mouseOverHandler = (evt) => focusedEl = evt.currentTarget;
document.addEventListener('keydown', keyDownHandler );
window.focus();
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #0f0f0f;
}
.circle {
width: 80px;
height: 80px;
border-radius: 80px;
background-color: #0f0f0f;
border: 3px solid #000;
position: absolute;
}
#spawnRadius {
top: 55%;
height: 250px;
width: 500px;
left: 50%;
white-space: nowrap;
position: absolute;
transform: translate(-50%, -50%);
background: #0f0f0f;
border: 2px solid #ebc6df;
}
#keyframes Animation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
opacity: 0;
}
}
<html>
<body>
<div id="spawnRadius"></div>
</body>
</html>

Changing different CSS animations with JS

Vision: On "mouseenter" spin the letter and change the color. On second "mouseenter" spin the letter and change color back.
Problem: When changing class, second animation is not working.
const landingEl = document.getElementById("landing");
const landingText = document.getElementById("landing-text");
// line brake on dot
const landingFraze = `Lorem ipsum dolor sit amet consectetur adipisicing elit.`;
const spans = document.getElementsByTagName('span');
let letterList = [];
let text;
// rotate leter function
function rotate(ind) {
let index = ind.path[0].id
let spiningLeter = document.getElementById(index);
if(!spiningLeter.classList.contains ('rotate') & !spiningLeter.classList.contains('unrotate')) {
spiningLeter.classList.add('rotate');
}
else if (spiningLeter.classList.contains('unrotate')) {
spiningLeter.classList.remove('unrotate');
spiningLeter.classList.add('rotate');
}
else {
spiningLeter.classList.replace('rotate', 'unrotate');
}
}
function everyLeter() {
let text = landingFraze;
// split fraze in sentences on dot
let sentenceList = text.split(".");
// adding css to every letter
sentenceList.forEach((element, i) => {
let div = document.createElement('div');
// spliting every letter
let list = element.split("");
// creating new element and adding letter to it with css
list.forEach((leter, index) => {
let span = document.createElement("span");
span.id = `${index}a${i}`;
// event listener on mouse enter
span.addEventListener('mouseenter', rotate);
let leterP = document.createElement('p');
// adding space between words
if(leter === ' ') {
leterP.style.marginLeft = '20px'
}
// add a dot at the end of the sentence
if(list.length === index + 1){
leterP.textContent = `${leter}.`;
} else {
leterP.textContent = leter;
}
// appending
span.appendChild(leterP);
div.appendChild(span);
});
// appending div to landing
landingText.appendChild(div);
});
}
// functions
everyLeter();
#import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Roboto:wght#400;700&display=swap");
:root {
--font-color: rgb(243, 14, 224);
}
.landing-text {
font-family: "Luckiest Guy", cursive;
flex-wrap: wrap;
height: 100vh;
font-size: 6vw;
margin-top: 40vh;
margin-left: 4rem;
}
.landing-text div{
display: flex;
max-height: 120px;
}
.rotate {
animation: rotate 2s forwards;
}
#keyframes rotate {
100% {
transform: rotateY(720deg);
color: var(--font-color);
}
};
.unrotate {
animation: unrotate 2s forwards;
}
#keyframes unrotate {
100%{
transform: rotateY(720deg);
color: black;
};
}
<div class="landing" id='landing'>
<div class ="landing-text" id="landing-text"></div>
</div>
Vision: On "mouseenter" spin the letter and change the color. On second "mouseenter" spin the letter and change color back.
Problem: When changing class, second animation is not working.
Javscript
function rotate(ind) {
let index = ind.path[0].id;
let spiningLeter = document.getElementById(index);
if(!spiningLeter.classList.contains ('rotate') & !spiningLeter.classList.contains('unrotate')) {
spiningLeter.classList.add('rotate');
}
else if (spiningLeter.classList.contains('unrotate')) {
spiningLeter.classList.remove('unrotate');
spiningLeter.classList.add('rotate');
}
else {
spiningLeter.classList.replace('rotate', 'unrotate');
}
}
CSS
.rotate {
animation: rotate 2s forwards;
}
#keyframes rotate {
100% {
transform: rotateY(360deg);
color: rgb(26, 212, 2)}
};
.unrotate {
animation: unrotate 2s forwards;
}
#keyframes unrotate {
100%{
transform: rotateY(720deg);
color: var(--font-color);
};
}

Try and specify the start state of each animation.
const landingEl = document.getElementById('landing')
const landingText = document.getElementById('landing-text')
// line brake on dot
const landingFraze = `Lorem ipsum dolor sit amet consectetur adipisicing elit.`
const spans = document.getElementsByTagName('span')
let letterList = []
let text
// rotate leter function
function rotate(ind) {
let spiningLeter = ind.target
if (!spiningLeter.classList.contains('rotate') &
!spiningLeter.classList.contains('unrotate')
) {
spiningLeter.classList.add('rotate')
} else if (spiningLeter.classList.contains('unrotate')) {
spiningLeter.classList.remove('unrotate')
spiningLeter.classList.add('rotate')
} else {
spiningLeter.classList.replace('rotate', 'unrotate')
}
}
function everyLeter() {
let text = landingFraze
// split fraze in sentences on dot
let sentenceList = text.split('.')
// adding css to every letter
sentenceList.forEach((element, i) => {
let div = document.createElement('div')
// spliting every letter
let list = element.split('')
// creating new element and adding letter to it with css
list.forEach((leter, index) => {
let span = document.createElement('span')
span.id = `${index}a${i}`
// event listener on mouse enter
span.addEventListener('mouseenter', rotate)
let leterP = document.createElement('p')
// adding space between words
if (leter === ' ') {
leterP.style.marginLeft = '20px'
}
// add a dot at the end of the sentence
if (list.length === index + 1) {
leterP.textContent = `${leter}.`
} else {
leterP.textContent = leter
}
// appending
span.appendChild(leterP)
div.appendChild(span)
})
// appending div to landing
landingText.appendChild(div)
})
}
// functions
everyLeter()
:root {
--font-color: rgb(243, 14, 224);
}
.landing-text {
font-family: 'Luckiest Guy', cursive;
font-size: 4vw;
}
.landing-text div {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.rotate {
animation: rotate 2s forwards;
}
#keyframes rotate {
0% {
color: black;
transform: rotateY(0deg);
}
100% {
transform: rotateY(720deg);
color: var(--font-color);
}
}
.unrotate {
animation: unrotate 2s forwards;
}
#keyframes unrotate {
0% {
color: var(--font-color);
transform: rotateY(720deg);
}
100% {
transform: rotateY(0deg);
color: black;
}
}
/* For demo only */
span {
margin: 4px;
padding: 0;
line-height: 0px;
}
/* ***** */
<div class="landing" id="landing">
<div class="landing-text" id="landing-text"></div>
</div>

How to decrease anime time when it is out of screen

I have a anime whose duration decreases when the black container crosses red, but this creates glitches. Can there be any method to remove the glitch in it.
I tried to delay the changes until path is completed by red but still faces the glitches.
delayInAnimeSub = ourVillanAnimeDuration * (ourVillanFigXValue / window.innerWidth)
animeDelayAmount = Math.abs(delayInAnimeSub.toFixed(2) - 0.2).toFixed(2);
I calculated the leftover distance of red from the left side and get the duration to complete that distance and added that to delay. But it still show glitches.
Here what happens in below snippet
Black box is hero which is controlled by space(to jump), <(to move left), >(to move right).
Red is villan(demon) which have animation to move from right side to left side with some duration in animation.
Whenever hero passes the red, red becomes faster(by trying to reduce animation duration), but with this red has glitches and start from anywhere(not from the place it should be next).
I want to increase speed of red but facing the glitches so tried to delay the change in animation duration until red crosses the screen but that didn't seems to work
let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
if (e.code === "ArrowRight") {
valueXCoordinate = ourHeroFigXValue + 100;
} else if (e.code === "KeyA" || e.code === "ArrowLeft") {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100;
} else {
valueXCoordinate = 0;
}
} else if (e.code === "Space") {
ourHeroFig.classList.add("animateHero");
setTimeout(function() {
ourHeroFig.classList.remove("animateHero");
}, 700)
}
changePosition();
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ""
setInterval(
function() {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
let ourVillanFigXValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('left'));
let ourVillanFigYValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('bottom'));
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue);
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue);
if (gameOverValueX < ourVillanFig.offsetWidth && gameOverValueY < ourVillanFig.offsetHeight) {
console.log("yes touched");
ourVillanFig.classList.remove("animateVillan");
obstacleBarCrossed = false;
} else if (obstacleBarCrossed && gameOverValueX < ourVillanFig.offsetWidth) {
ourVillanAnimeDuration = parseFloat(getComputedStyle(ourVillanFig).getPropertyValue('animation-duration'));
delayInAnimeSub = ourVillanAnimeDuration * (ourVillanFigXValue / window.innerWidth)
animeDelayAmount = Math.abs(delayInAnimeSub.toFixed(2) - 0.2).toFixed(2);
console.log(animeDelayAmount, ourVillanAnimeDuration, ourVillanFigXValue)
if (ourVillanAnimeDuration <= 2) {
ourVillanAnimeDuration = 2
}
setTimeout(() => {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1 + "s";
}, animeDelayAmount);
}
// console.log(gameOverValueX,gameOverValueY)
}, 10);
#ourHero {
width: 20px;
height: 100px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
left: 50vw;
}
.animateVillan {
animation: animateVillan 5s linear infinite;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>
Thanks for help in advance

One way is to use Animation.playbackRate but it is still experimental.
let VillRate = 1
...
// inside the collision check
if (VillRate < 20) {
ourVillanFig.getAnimations()[0].playbackRate += 0.2
VillRate += 0.5
}
In the below snippet, red speed will increase untill a certain point everytime it touches black. You can adjust that behavior as you need.
let ourHeroFig = document.getElementById('ourHero')
let ourVillanFig = document.getElementById('obstacleBar')
let gameScoreDigits = document.getElementById('gameScoreDigits')
let valueXCoordinate = ''
let obstacleBarCrossed = true
let VillRate = 1
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('left')
)
let ourHeroFigYValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('bottom')
)
if (e.code === 'ArrowRight') {
valueXCoordinate = ourHeroFigXValue + 100
} else if (e.code === 'KeyA' || e.code === 'ArrowLeft') {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100
} else {
valueXCoordinate = 0
}
} else if (e.code === 'Space') {
ourHeroFig.classList.add('animateHero')
setTimeout(function() {
ourHeroFig.classList.remove('animateHero')
}, 700)
}
changePosition()
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ''
setInterval(function() {
let ourHeroFigXValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('left')
)
let ourHeroFigYValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('bottom')
)
let ourVillanFigXValue = parseInt(
getComputedStyle(ourVillanFig).getPropertyValue('left')
)
let ourVillanFigYValue = parseInt(
getComputedStyle(ourVillanFig).getPropertyValue('bottom')
)
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue)
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue)
if (
gameOverValueX < ourVillanFig.offsetWidth &&
gameOverValueY < ourVillanFig.offsetHeight
) {
if (VillRate < 20) {
ourVillanFig.getAnimations()[0].playbackRate += 0.2
VillRate += 0.5
}
}
}, 10)
#ourHero {
width: 20px;
height: 100px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
left: 50vw;
}
.animateVillan {
animation: animateVillan 5s linear infinite;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

I tried this:
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1 + "s";
}
It works ok but when time get reduced to 4s and after it, the red don't start from the end but start in between. Almost start from middle at 3s
let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
if (e.code === "ArrowRight") {
valueXCoordinate = ourHeroFigXValue + 100;
} else if (e.code === "KeyA" || e.code === "ArrowLeft") {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100;
} else {
valueXCoordinate = 0;
}
} else if (e.code === "Space") {
ourHeroFig.classList.add("animateHero");
setTimeout(function() {
ourHeroFig.classList.remove("animateHero");
}, 700)
}
changePosition();
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ""
setInterval(
function() {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
let ourVillanFigXValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('left'));
let ourVillanFigYValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('bottom'));
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue);
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue);
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1 + "s";
}
if (gameOverValueX < ourVillanFig.offsetWidth && gameOverValueY < ourVillanFig.offsetHeight) {
console.log("yes touched");
ourVillanFig.classList.remove("animateVillan");
obstacleBarCrossed = false;
} else if (obstacleBarCrossed && gameOverValueX < ourVillanFig.offsetWidth) {
ourVillanAnimeDuration = parseFloat(getComputedStyle(ourVillanFig).getPropertyValue('animation-duration'));
console.log(ourVillanFigXValue < 0, ourVillanAnimeDuration)
if (ourVillanAnimeDuration <= 2) {
ourVillanAnimeDuration = 2
}
}
// console.log(gameOverValueX,gameOverValueY)
}, 10);
#ourHero {
width: 20px;
height: 180px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 180px;
background-color: red;
position: fixed;
bottom: 0;
left: 50vw;
}
.animateVillan {
animation: animateVillan 5s linear infinite;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

Changing the different Keyframes in css using Javascript

I'm creating a small website that tells a story by using css and sprite animation.
The problem I'm encountering is that I do not know how to change the keyframes once I have set them in the css files expecially while I try to make it compatible with all of the browsers.
Here is what I have,
the main part of the css:
#ManSprite{
overflow:hidden;
width:200px;
height:200px;
position:absolute;
top:280px;
left:140px;
background-image: url("http://imageshack.com/a/img571/1710/2r1h.png");
z-index:99;
animation: play .4s steps(2) infinite;
-webkit-animation: play .4s steps(2) infinite;
-moz-animation: play .4s steps(2) infinite;
-ms-animation: play .4s steps(2) infinite;
-o-animation: play .4s steps(2) infinite;
}
#keyframes play {
from { background-position: -200px; }
to { background-position: -600px; }
}
#-webkit-keyframes play {
from { background-position: -200px; }
to { background-position: -600px; }
}
#-moz-keyframes play {
from { background-position: -200px; }
to { background-position: -600px; }
}
#-ms-keyframes play {
from { background-position: -200px; }
to { background-position: -600px; }
}
#-o-keyframes play {
from { background-position: -200px; }
to { background-position: -600px; }
}
Then in my javascript I would like to change the background position for every keyframe but I'm not sure how to change it. I've tried the following but it does not work.
var StoryPart = 0;
var fromArray = new Array("0px", "-200px", "-800px", "-1400px", "-2200px", "-3200px");
var toArray = new Array("0px", "-600px", "-1400px", "-2200px", "-3230px", "-4000px");
var stepsArray = new Array(0, 2, 3, 4, 5, 4);
function nextBtn() {
StoryPart++;
startChange();
}
// begin the new animation process
function startChange() {
// remove the old animation from our object
document.getElementById('ManSprite').style.webkitAnimationName = "none";
document.getElementById('ManSprite').style.animationName = "none";
document.getElementById('ManSprite').style.msAnimationName = "none";
document.getElementById('ManSprite').style.oAnimationName = "none";
document.getElementById('ManSprite').style.mozAnimationName ="none";
// call the change method, which will update the keyframe animation
setTimeout(function () { change("play", fromArray[StoryPart], toArray[StoryPart]); }, 0);
}
// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule) {
// gather all stylesheets into an array
var ss = document.styleSheets;
// loop through the stylesheets
for (var i = 0; i < ss.length; ++i) {
// loop through all the rules
for (var j = 0; j < ss[i].cssRules.length; ++j) {
// find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule
|| ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name == rule
)
return ss[i].cssRules[j];
}
}
// rule not found
return null;
}
// remove old keyframes and add new ones
function change(anim, fromValue, toValue) {
// find our -webkit-keyframe rule
var keyframes = findKeyframesRule(anim);
// remove the existing 0% and 100% rules
keyframes.deleteRule("0%");
keyframes.deleteRule("100%");
// create new 0% and 100% rules with random numbers
keyframes.insertRule("0% {background-position: " + fromValue + ";}");
keyframes.insertRule("100% {background-position: " + toValue + ";}");
// assign the animation to our element (which will cause the animation to run)
document.getElementById('ManSprite').style.webkitAnimationName = anim;
document.getElementById('ManSprite').style.animationName = anim;
document.getElementById('ManSprite').style.msAnimationName = anim;
document.getElementById('ManSprite').style.oAnimationName = anim;
document.getElementById('ManSprite').style.mozAnimationName = anim;
}
For some reason in Chrome, it doesn't find any cssRule inside the findKeyframesRule method, but in firefox it does. Firefox crashes, however, on this line
keyframes.insertRule("0% {background-position: " + fromValue + ";}");
which confuses me because it was able to use deleteRule well.
Anyone ever work with these?