Benutzerdefinierte JS -Cursor -Updates zum Schwebewaren ⇐ HTML

[Guest]

Ich habe einen benutzerdefinierten Cursor -Effekt, der dem realen Browserpunkt um die Seite folgt. Wenn die Maus über ein Element mit einem Daten-Label -Werte-Set schwebt, wird eine Klasse von .Cursor-Trail-Hover hinzugefügt und der relevante Wert wird neben dem Cursor*angezeigt. Dies ist in/aus der Ansicht animiert.
Wenn Sie über jedes Bild im Karussell schweben, können Sie diese Arbeit perfekt sehen. Sie lassen die Maus auf der Seite, sodass es keine Bewegung gibt und die Inhaltscrollen/Übergeben unter dem Cursor. Der Text wird sich irgendwann ändern, aber er ändert sich ohne Animation und es scheint eine kleine Verzögerung zu geben, damit er aktualisiert wird. Wenn auch die Maus im Leerlauf ist? Der gleiche Ort, obwohl sich der Cursor bewegt hat - bis das "Klick" veröffentlicht wird. Ich bin mir nicht sicher, ob es eine Möglichkeit gibt, dies zu beheben, wobei das Karussell ein Plugin von Drittanbietern ist? Problem durch Ändern von Mousemove in pointermove im anfänglichen Cursor addEventListener . Animieren wie es bei schwacher Hauch ist, wenn es jetzt untätig ist < /p>


< pre class = "snippet-code-js Lang-js hübschesPrint-override">

Code: Select all

/* ==========================================================================
#LAZY LOAD IMAGES
========================================================================== */

/**
* Class to animate/transition an image into view once it has been loaded.
*/

const pixelImage = document.querySelectorAll(".pixel-load")

pixelImage.forEach(div => {
const img = div.querySelector("img")

function loaded() {
div.classList.add("loaded")
}

if (img.complete) {
loaded()
} else {
img.addEventListener("load", loaded)
}
})

/* ==========================================================================
#KEEN SLIDER
========================================================================== */

/**
* Using Keen-Slider for the infinite looping carousel, which I originally did
* in pure CSS - but I wanted to make this draggable by the user so made sense
* to use a 3rd party plug-in to do the heavy lifting.
*/

var animation = {
duration: 32000,
easing: (t) => t
}
new KeenSlider("#gallery-slider", {
dragSpeed: 1,
loop: true,
mode: "free",
slides: {
perView: 1.5,
renderMode: "performance",
spacing: 8
},
breakpoints: {
'(min-width: 768px)': {
slides: {
perView: 3,
spacing: 8
}
},
'(min-width: 1024px)': {
slides: {
perView: 4,
spacing: 8
}
}
},
created(s) {
s.moveToIdx(5, true, animation)
},
updated(s) {
s.moveToIdx(s.track.details.abs + 5, true, animation)
},
animationEnded(s) {
s.moveToIdx(s.track.details.abs + 5, true, animation)
}
})

/* ==========================================================================
#CURSOR
========================================================================== */

/**
* Two div's are on the page which are used to create a custom cursor effect.
* `.cursor` follows the pointer whereas the `.cursor-trail` is an outer circle
* that follows the cursor with a delay.
*
* The original script was based on this CodePen example:
* https://codepen.io/ntenebruso/pen/QWLzVjY
*
* But there were performance (lagging and jumping) issues cross-browser, mainly
* in Safari (Mac OS). So it was re-written and this version performed better.
* Previously `calc` was used for sizing and top/left values for positioning.
* Using fixed values instead of `calc` (as we know the size of the cursor) and
* `transform` wasn't as much of a performance hit. If we changed the size of
*  the cursor in the CSS we'd need to update the values here accordingly.
*/

var cursorTrail = document.querySelector(".cursor-trail");
var a = document.querySelectorAll("a");
var timeout;

window.addEventListener(
"pointermove",
function(e) {
var x = e.clientX;
var y = e.clientY;

if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
cursorTrail.style.transform = `translate(${x - 4}px, ${y - 4}px)`;
}, 24);
}
},
false
);

/**
* Add/remove set classes on hover.
*
* 1.  This used to start with `a.forEach((item) => {` but changed to `let` so
*    that an additional (non-anchor) item could be targeted. `#hello` is for
*    the image on the 404 page.
*/

// a.forEach((item) => {
let links = document.querySelectorAll('a'); /* [1] */
links.forEach((item) => {
/* [1] */
item.addEventListener("mouseover", () => {
cursorTrail.classList.add("cursor-trail--hover");
});
item.addEventListener("mouseleave", () => {
cursorTrail.classList.remove("cursor-trail--hover");
});
});

/**
* Add/remove classes on click (anywhere).
*/

document.addEventListener("mousedown", function() {
cursorTrail.classList.add("cursor-trail--click");
});

document.addEventListener("mouseup", function() {
cursorTrail.classList.remove("cursor-trail--click");
});

/**
* Add custom classes on hover if the cursor needs to be manipulated in a
* unique way. If an element has a `data-interaction=""` value set. This will
* be added as a class to the cursor on hover. For example, this is used to
* style the prev/next arrows on the carousel.
*
* This could be set using a specific class but I've just left it targeting all
* `a` elements for now. Which will add a class of `undefined` if no dataset is
* specified.
*/

a.forEach((item) => {
const interaction = item.dataset.interaction;

item.addEventListener("mouseover", () => {
cursorTrail.classList.add(interaction);
});
item.addEventListener("mouseleave", () => {
cursorTrail.classList.remove(interaction);
});
});

/**
* Text Label
*/

let hasLabel = document.querySelectorAll('.has-label');
var cursorText = document.querySelector('.cursor__label-text');

hasLabel.forEach((item) => {
const label = item.dataset.label;

item.addEventListener("mouseover", () => {
cursorText.textContent = label;
cursorTrail.classList.add("cursor-trail--label");
});
item.addEventListener("mouseleave", () => {
cursorTrail.classList.remove("cursor-trail--label");
});
});< /code>
/* ==========================================================================
#BASE
========================================================================== */

html {
font-size: 62.5%;
margin: 0;
padding: 0;
}

body {
font-size: 12px;
font-family: "Arial", sans-serif;
margin: 0;
padding: 64px 0 0;
text-transform: uppercase;
}

h2 {
font-size: 12px;
font-weight: 400;
margin: 0 16px 16px;
padding: 0;
}

figure {
margin: 0;
padding: 0;
}

img {
height: auto;
width: 100%;
max-width: 100%;
}

/* ==========================================================================
#CURSOR
========================================================================== */

/**
* Hide the cursor if the `hover` event doesn't exist so the custom cursor isn't
* displayed on touch devices.
*/

@media (hover: none) {
.cursor-trail {
display: none;
}
}

/**
* Core `.cursor-trail` styling which is a larger cricle that follows `.cursor`
* around the screen but with a smooth delay/lag.
*
* 1. Fade-in the object only when `body` is hovered over. Otherwise on page
*    load the cursor is stuck in the top/left of the browser until you move the
*    mouse, which looks a bit crap. At least this is a bit more graceful.
* 2. Add a lot transitions for various click/hover states which adjust the size
*    and colour of the element. `transform` is the one for the smooth lag when
*    moving the cursor.
*/

.cursor-trail {
background: white;
box-sizing: border-box;
height: 8px;
margin: 0;
opacity: 0;
/* [1] */
pointer-events: none;
position: fixed;
transform-origin: center center;
transition: height 0.04s ease-out, margin 0.04s ease-out, opacity 0.16s 0.16s, transform 0.32s cubic-bezier(0, 0.48, 0.64, 1), width 0.08s ease-out;
/* [2] */
width: 8px;
mix-blend-mode: difference;
z-index: 1000;
}

body:hover .cursor-trail {
opacity: 1;
}

/**
* A class of `.cursor-trail--hover` is added when the user hovers over a link.
* When this occurs we shrink the trailing div.  The `margin` keeps the div
* centred with `.cursor` when triggered. Previously a `transform` was used to
* centre the div - but pixel values just meant less was being calculated at
* the same time and led to better/smoother performance.
*/

.cursor-trail--hover {
height: 0;
margin: 4px 0 0 4px;
width: 0;
}

/**
* If an element on the page has a `data-label` set, Javascript gets the value
* and displays the text within `.cursor__label-text` to a label can be
* displayed alongside the cursor.
*
* 1. The parent of the label which has `overflow: hidden` set, allows the text
*    to be animated vertically in/out of view on hover.
*/

.cursor__label {
color: white;
overflow: hidden;
/* [1] */
position: absolute;
top: -8px;
left: 16px;
}

/**
* 1. The label begins out of view, pushed beyond the bottom edge of the parent.
* 2. When an element with a label is hovered over, a class and animation is
*    added to the main `.cursor-trail` element. This allows us to animate the
*    text into view. Only running the animation when the class is added, not
*    when it is removed...
* 3. The `transition` only runs when `.cursor-trail--label` is removed from the
*    parent. As the `animation` only runs when the class is added, it allows us
*    to `transition` the text out the top edge of it's container without the
*    animation interfering with it.
*/

.cursor__label-text {
display: block;
opacity: 0;
transform: translateY(-100%);
/* [1] */
transition: opacity 0.16s ease-out, transform 0.16s ease-out;
/* [3] */
white-space: nowrap;
}

.cursor-trail--label .cursor__label-text {
/* [2] */
animation: cursor-label 0.16s ease-out;
opacity: 1;
transform: translateY(0);
}

/**
* Animation which moves the label into view from the bottom of it's parent.
*/

@keyframes cursor-label {
0% {
opacity: 0;
transform: translateY(100%);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

/* ==========================================================================
#KEEN SLIDER
========================================================================== */
/**
* 1. Removed `overflow: hidden` so I could align the slider with the main grid
*    but still have it bleed off the edges of the page. To avoid a horizontal
*    scroll on the site, I've added `overflow: hidden` to a parent div.
*/
.keen-slider:not([data-keen-slider-disabled]) {
display: flex;
align-content: flex-start;
overflow: hidden;
position: relative;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
min-height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
flex-wrap: wrap;
}

/* ==========================================================================
#GALLERY
========================================================================== */
/**
* My overrides for the Keen Slider gallery.
*
* 1. Remove `overflow: hidden` from the slider and add it to the parent. This
*    allows the slider to align with the grid but also bleed off the edges of
*    the page.
* 2.  Align container with the global grid.
*/

.gallery {
margin-bottom: 64px;
overflow: hidden;
/* [1] */
padding: 0 16px;
/* [2] */
}

.gallery .keen-slider {
overflow: visible;
/* [1] */
}

/* ==========================================================================
#PIXEL LOAD
========================================================================== */

/**
* Add a pixelated effect to images while the load.
*/

.pixel-load {
overflow: hidden;
position: relative;
}

.pixel-load__preload img {
image-rendering: pixelated;
position: absolute;
inset: 0;
opacity: 1;
pointer-events: none;
}

.loaded .pixel-load__preload img {
animation: loaded 0.32s 0.32s steps(1, end) both;
}

@keyframes loaded {
0% {
scale: 1.1;
}

64% {
scale: 1.04;
}

75% {
opacity: 0.8;
scale: 1.02;
}

100% {
opacity: 0;
z-index:  1;
}
}< /code>