Zoom image mousemove keydown scroll
Bonjour,
Je cherche a appliquer un code jquery à mon site web. (https://tds.datweb.ch)
J'aimerais utiliser un code qui permette d'élargir le logo en haut à gauche sur toute la surface de la page lorsqu'il n'y a aucune interaction avec le clavier, le clique de la souris, le scroll ou le mouvement de la souris durant 5 secondes.
Lorsqu'une interaction est effectuée, le compteur se remet à zéro et le logo se réduit pour retrouver sa taille d'origine.
J'ai trouvé un code ci-dessous qui pourrait être repris pour appliquer ce que je souhaite faire.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| (function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
$("body").append("<p>Welcome Back.</p>");
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery) |
J'ai trouvé un autre code (JS ou JQuery) qui pourrait aider : https://www.geeksforgeeks.org/how-to-detect-idle-time-in-javascript/ et un plugin qui agit comme je le voudrais mais onmouse hover : https://makitweb.com/zoom-images-on-...-with-zoomove/
Je ne connais malheureusement pas ce langage pour programmer moi-même. Est-ce que l'un ou l'une de vous pourrait m'aider à faire un petit script qui permette de réaliser cela ?
Merci infiniment pour votre soutien.
Bonne journée
