Le curseur le plus simple et le plus petit du monde
En tant que concepteur de mise en page à l'époque, j'ai parfaitement compris le fonctionnement des plugins et j'ai fouillé à plusieurs reprises dans le front-end avec un esprit curieux, essayant de réduire au minimum le code et d'optimiser le travail avec CSS ou la même mise en page.
Le curseur est né après quelques expériences avec z-index et, à ma grande surprise, le programme ne faisait que 10 lignes. Je n'ai pas transformé les images en image d'arrière-plan et j'ai laissé la possibilité de faire défiler même les blocs de mise en page.
Voici le code HTML du conteneur de scène:
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
Ajoutons du CSS qui chargera les balises d'image dans une plate-forme à X: 0 et Y: 0 (haut: 0px et gauche: 0px):
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
Je n'utilise plus de valeurs statiques telles que PX dans la mise en page en raison de l'apparence des moniteurs 8K et plus, mais je fais tout sur des unités de port d'affichage évolutives, ce qui me permet d'éviter les escaliers vers les requêtes multimédias et les interfaces de conception pour toute résolution d'écran.
Maintenant, écrivons un gestionnaire JavaScript qui parcourra simplement le jeu sans aucun effet avec un intervalle de temps:
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
Nous utilisons setInteval pour aspirer à l'initialisation pendant 3 secondes et implémenter un itérateur réinitialisable sur une pseudo boucle. À chaque tick suivant du minuteur, modifiez le z-index de l'image souhaitée dans l'ordre. Le z-index de l'image précédente est définitivement remis à 0, et l'élément de la boucle actuelle est amené au premier plan en définissant le z-index sur 1.
C'est tout. Le curseur le plus simple et le plus petit du monde est prêt, fiable et élémentaire comme un fusil d'assaut Kalachnikov. Maintenant, tout le deck tourne et l'élément actuel de la pseudo boucle vient au premier plan. Tout fonctionne sans tiers en JavaScript pur.
Ajouter des effets
Rotor (comme je l'ai appelé) est sorti trop simple et je voulais ajouter des effets de transition. Pour ce faire, vous devez déjà utiliser une bibliothèque qui sait animer CSS avec des effets d'accélération sympas (il y en a 43 dans RevolveR).
Voici la liste:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
Ici, une séquence de rappel est implémentée pour terminer l'état de l'animation, qui correspond au temps total pendant le type de minuterie setInterval, et nous obtenons des transitions sympas avec un fondu et un scintillement.
Tout va bien, mais nous ajouterons également un délai en retournant le drapeau lorsque le pointeur est sur la scène:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
Rotor by RevolveR Labs en action
Découvrez le Rotor en action ici .
Comme vous pouvez le voir, il n'y a pas tellement de code ici non plus, et des effets plus complexes et intéressants peuvent être implémentés. Mais cela dépend de vous.