指针 Class 在用户空闲时冻结
Pointer Class Freezes when User is Idle
我"attached"我的鼠标指针的关键帧动画。理想情况下,当用户闲置 2 秒时,鼠标周围应出现一个脉冲,然后在他们开始活动时消失。我正在切换 "pulse" class 的可见性。有两个问题:
- 关键帧动画不再附加到鼠标移动
- 当用户空闲时,动画会出现在脉冲的任何阶段。它可能非常小且微弱,也可能很厚且不透明,但在用户再次移动之前,环将保持静止:
var TimeoutID;
function inputdetect() {
// attaches event handler to specified event
// takes event as string, function to run, and optional boolean
// to indicate when the event propogates
// these are false, so events "bubble up"
this.addEventListener("mousemove",resetTimer,false);
this.addEventListener("mousedown",resetTimer,false);
this.addEventListener("mousewheel",resetTimer,false);
this.addEventListener("keypress",resetTimer,false);
this.addEventListener("touchmove",resetTimer,false);
this.addEventListener("DOMmousescroll",resetTimer,false);
this.addEventListener("MSpointermove",resetTimer,false);
startTimer();
}
inputdetect();
function startTimer() {
//waits two seconds before calling inactive
TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??
}
function resetTimer(e) {
window.clearTimeout(TimeoutID);
goActive();
}
function goActive() {
//what happens when the UI is not idle
$('p').text("The UI is not idle.");
$('.cursory').css("background-color","green");
$('.pulse').css('visibility','hidden');
startTimer();
}
function goInactive() {
$('p').text("The UI is idle.");
// REPLACING CURSOR WHEN UI IS IDLE
//this part won't work
$('.cursory').css("background-color","red");
$('.pulse').css('visibility','visible');
}
// THIS changes the pointer to a css element
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('.cursory').css({
left: e.pageX,
top: e.pageY
});
});
});
html {
cursor: none;
}
.cursory {
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0px;
padding: 5px;
background-color: green;
background-clip: content-box;
position: fixed;
}
.pulse {
border: 3px solid blue;
-webkit-border-radius:30px;
height:18px;
width:18px;
position: fixed;
z-index:-1;
left:-7px;
top:-7px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"><div class = "pulse"></div></div>
<!--this is where the HTML will go*/-->
<p>hello</p>
强调文本
将另一个 class 添加到 .pulse
。并将动画附加到 class。如果您不需要动画,只需删除 class。重新应用 class 动画将从起点开始,因此您不会看到任何不一致。
另外,为了确定你的动画,你给了 visibility: hidden;
到 .pulse
。但是在你的附加 class 中给出 visibility: visible;
并像这样 .pulse.additionalClass
提及你的附加 class。它将覆盖您的 .pulse
的 visibility: hidden
@shishir-trivedi 好的,我尝试将动画添加到脉冲 class 和:
var TimeoutID;
function inputdetect() {
// attaches event handler to specified event
// takes event as string, function to run, and optional boolean
// to indicate when the event propogates
// these are false, so events "bubble up"
this.addEventListener("mousemove",resetTimer,false);
this.addEventListener("mousedown",resetTimer,false);
this.addEventListener("mousewheel",resetTimer,false);
this.addEventListener("keypress",resetTimer,false);
this.addEventListener("touchmove",resetTimer,false);
this.addEventListener("DOMmousescroll",resetTimer,false);
this.addEventListener("MSpointermove",resetTimer,false);
startTimer();
}
inputdetect();
function startTimer() {
//waits two seconds before calling inactive
TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??
}
function resetTimer(e) {
window.clearTimeout(TimeoutID);
goActive();
}
function goActive() {
//what happens when the UI is not idle
$('p').text("The UI is not idle.");
$('.cursory').css("background-color","green");
$('.cursory').removeClass("pulse");
startTimer();
}
function goInactive() {
$('p').text("The UI is idle.");
// REPLACING CURSOR WHEN UI IS IDLE
//this part won't work
$('.cursory').css("background-color","red");
$('.cursory').addClass("pulse");
}
// THIS changes the pointer to a css element
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('.cursory').css({
left: e.pageX,
top: e.pageY
});
});
});
html {
cursor: none;
}
.cursory {
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0px;
padding: 5px;
background-color: green;
background-clip: content-box;
position: fixed;
}
.pulse {
border: 3px solid blue;
-webkit-border-radius:30px;
height:18px;
width:18px;
/*position: fixed;*/
z-index:-1;
left:-7px;
top:-7px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"></div>
<!--this is where the HTML will go*/-->
<p>hello</p>
现在整个事情都在跳动。如何使内圈保持相同大小?我已经为此工作了几天。我对 CSS 和 jQuery 都很陌生,所以请耐心等待。
我认为将它们分成单独的 classes 然后附加它们会调整它们的动作,同时保持它们的规格分开,但它似乎已经将 .cursor
class 混入了 .pulse
class。
我"attached"我的鼠标指针的关键帧动画。理想情况下,当用户闲置 2 秒时,鼠标周围应出现一个脉冲,然后在他们开始活动时消失。我正在切换 "pulse" class 的可见性。有两个问题:
- 关键帧动画不再附加到鼠标移动
- 当用户空闲时,动画会出现在脉冲的任何阶段。它可能非常小且微弱,也可能很厚且不透明,但在用户再次移动之前,环将保持静止:
var TimeoutID;
function inputdetect() {
// attaches event handler to specified event
// takes event as string, function to run, and optional boolean
// to indicate when the event propogates
// these are false, so events "bubble up"
this.addEventListener("mousemove",resetTimer,false);
this.addEventListener("mousedown",resetTimer,false);
this.addEventListener("mousewheel",resetTimer,false);
this.addEventListener("keypress",resetTimer,false);
this.addEventListener("touchmove",resetTimer,false);
this.addEventListener("DOMmousescroll",resetTimer,false);
this.addEventListener("MSpointermove",resetTimer,false);
startTimer();
}
inputdetect();
function startTimer() {
//waits two seconds before calling inactive
TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??
}
function resetTimer(e) {
window.clearTimeout(TimeoutID);
goActive();
}
function goActive() {
//what happens when the UI is not idle
$('p').text("The UI is not idle.");
$('.cursory').css("background-color","green");
$('.pulse').css('visibility','hidden');
startTimer();
}
function goInactive() {
$('p').text("The UI is idle.");
// REPLACING CURSOR WHEN UI IS IDLE
//this part won't work
$('.cursory').css("background-color","red");
$('.pulse').css('visibility','visible');
}
// THIS changes the pointer to a css element
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('.cursory').css({
left: e.pageX,
top: e.pageY
});
});
});
html {
cursor: none;
}
.cursory {
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0px;
padding: 5px;
background-color: green;
background-clip: content-box;
position: fixed;
}
.pulse {
border: 3px solid blue;
-webkit-border-radius:30px;
height:18px;
width:18px;
position: fixed;
z-index:-1;
left:-7px;
top:-7px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"><div class = "pulse"></div></div>
<!--this is where the HTML will go*/-->
<p>hello</p>
强调文本
将另一个 class 添加到 .pulse
。并将动画附加到 class。如果您不需要动画,只需删除 class。重新应用 class 动画将从起点开始,因此您不会看到任何不一致。
另外,为了确定你的动画,你给了 visibility: hidden;
到 .pulse
。但是在你的附加 class 中给出 visibility: visible;
并像这样 .pulse.additionalClass
提及你的附加 class。它将覆盖您的 .pulse
的 visibility: hidden
@shishir-trivedi 好的,我尝试将动画添加到脉冲 class 和:
var TimeoutID;
function inputdetect() {
// attaches event handler to specified event
// takes event as string, function to run, and optional boolean
// to indicate when the event propogates
// these are false, so events "bubble up"
this.addEventListener("mousemove",resetTimer,false);
this.addEventListener("mousedown",resetTimer,false);
this.addEventListener("mousewheel",resetTimer,false);
this.addEventListener("keypress",resetTimer,false);
this.addEventListener("touchmove",resetTimer,false);
this.addEventListener("DOMmousescroll",resetTimer,false);
this.addEventListener("MSpointermove",resetTimer,false);
startTimer();
}
inputdetect();
function startTimer() {
//waits two seconds before calling inactive
TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??
}
function resetTimer(e) {
window.clearTimeout(TimeoutID);
goActive();
}
function goActive() {
//what happens when the UI is not idle
$('p').text("The UI is not idle.");
$('.cursory').css("background-color","green");
$('.cursory').removeClass("pulse");
startTimer();
}
function goInactive() {
$('p').text("The UI is idle.");
// REPLACING CURSOR WHEN UI IS IDLE
//this part won't work
$('.cursory').css("background-color","red");
$('.cursory').addClass("pulse");
}
// THIS changes the pointer to a css element
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('.cursory').css({
left: e.pageX,
top: e.pageY
});
});
});
html {
cursor: none;
}
.cursory {
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0px;
padding: 5px;
background-color: green;
background-clip: content-box;
position: fixed;
}
.pulse {
border: 3px solid blue;
-webkit-border-radius:30px;
height:18px;
width:18px;
/*position: fixed;*/
z-index:-1;
left:-7px;
top:-7px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"></div>
<!--this is where the HTML will go*/-->
<p>hello</p>
现在整个事情都在跳动。如何使内圈保持相同大小?我已经为此工作了几天。我对 CSS 和 jQuery 都很陌生,所以请耐心等待。
我认为将它们分成单独的 classes 然后附加它们会调整它们的动作,同时保持它们的规格分开,但它似乎已经将 .cursor
class 混入了 .pulse
class。