Aufgabe: #
Die Maus in einem bestimmten Bereich einer Website als einen dicken Kreis darstellen.
Row für die geänderte Maus #
Füge eine Row in deine Website ein – setze die padding-top und -bottom auf 0.
Textmodul für die geänderte Maus #
Erstelle ein Textmodul das den Text innerhalb des Kreis enthält und lege die folgenden Einstellungen fest:
Background: gewünschte Farbe
Text Color: gewünschte Farbe
Text-Alignment: center
Width: 100px (oder wie gewünscht)
Height: 100px (oder wie gewünscht)
Rounded Corners: 100px
Class: thecursor
Position: fixed
Z index: 10
Füge dem Main Element den folgen Code hinzu
transition: all .1s linear;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
Code Modul für die styles und das JS #
Füge ein Code Modul hinzu und setze die CSS und das JS an – denke daran die beiden Codes mit <style></style> bzw. <script></script> Tags einzusetzen
.hide-cursor {
cursor: none;
}
.thecursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
jQuery(document).ready(function($){
var cursor = $('.thecursor');
$('.drag-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.drag-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
Ergebnis: #
Fahre mit der Maus über den grauen Bereich.
drag
