a week ago I saw a new IPad Pointer presentation and was very excited about what they did. It was very interesting to see how they design different pointer modes and attention to details. Here is the presentation:

一周前，我看到了一個新的IPad Pointer演示文稿，并對他們的工作感到非常興奮。 看到他們如何設計不同的指針模式并關注細節非常有趣。 這是演示：

Some of their approaches were very interesting, and I immediately start to think if I can recreate the same cursor effects on the web.

他們的一些方法非常有趣，我立即開始考慮是否可以在網絡上重新創建相同的光標效果。

Today, the article will be written as a diary — separated into days, it will be easier to track the progress and fallow the story.

今天，該文章將以日記形式寫成-分成幾天，可以更輕松地跟蹤進度并了解故事。

But before let me share my “contextCursor” module, so, you will know what I’m talking about👇🏽

但是在讓我分享我的“ contextCursor”模塊之前，您將了解我在說什么👇🏽

重現效果 (Effects to recreate)

There was a very interesting feature like custom cursor — when we can morph the standard cursor into any shape/image we want, but today I’ll try to recreate these effects:

有一個非常有趣的功能，例如自定義光標-當我們可以將標準光標變形為所需的任何形狀/圖像時，但是今天我將嘗試重新創建以下效果：

The general challenges here will be:

這里的一般挑戰將是：

1. Morphing/transitions smoothness.
   變形/過渡平滑度。
2. Parallax for the cursor and the target element on hover.
   光標和懸停目標元素的視差。
3. Cursor morphing in the “Lift” mode.
   “提升”模式下的光標變形。

The rest of the day I spend on my thoughts and research.

余下的時間，我會全神貫注于思想和研究。

I knew that perhaps I use GSAP library. I used it before and can say that it’s a problem solver for interactive animation. But I decided to start on my own, just to check how easy it will be and fill all layers of pain when something doesn't work.

我知道也許我使用了GSAP庫 。 我以前使用過它，可以說它是交互式動畫的問題解決者。 但是我決定獨自一人開始，只是檢查它會變得多么容易，并在某些不起作用的情況下彌補所有的痛苦。

The first shot was based on the collision tracking of an object with another object and the hover animation was solved with CSS transitions.

第一個鏡頭基于一個對象與另一個對象的碰撞跟蹤，并且懸停動畫通過CSS過渡解決。

I had some trouble with collisions. For some reason, the collision fired only for the last element.

我在碰撞時遇到了麻煩。 由于某種原因，碰撞僅針對最后一個元素觸發。

The rest of the day I spend torture myself mentally. I fell asleep thinking about waking up and solve this question.

剩下的一天，我會在精神上折磨自己。 我睡著了，想著醒來解決這個問題。

Gees what? I gave up. I ask Gods on the StackOverflow. It solved my issue.

什么？ 我放棄。 我在StackOverflow上問諸神。 它解決了我的問題。

The reason was in the wrong understanding of how forEach works. It doesn’t wait when a function returns. And instead of this:

原因是對forEach工作方式的錯誤理解。 當函數返回時，它不會等待。 而不是這樣：

I should use this:

我應該使用這個：

Not so elegant, but works! I mean with forEach we can use one loop function for all props.

不太優雅，但是有效！ 我的意思是，對于forEach我們可以對所有道具使用一個循環函數。

Here is the first implementation. Simple and… twitchy. Always start the cursor transformation from the top-left position.

這是第一個實現。 簡單而又抽搐。 始終從左上角開始光標轉換。

To be able to click through the overlay cursor I added pointer-events: none; to the fake cursor and added transition property for border-radius, width, height and background-color. The collision function:

為了能夠通過覆蓋光標單擊，我添加了pointer-events: none; 到偽造的光標，并為border-radius ， width, height和background-color添加了transition屬性。 碰撞功能：

The issue — cursor morphing start not from the cursor center but from the top/left position of the target element.

問題-光標變形不是從光標中心開始，而是從目標元素的頂部/左側位置開始。

So, I tried another approach — I tried to correct the start position with transform property.

因此，我嘗試了另一種方法-我嘗試使用transform屬性糾正起始位置。

But it was a bad idea to move the cursor with top and left positioning and use transform at the same time to correct the point of transformation. This only worked only on the “input” but not the “output”.

但是，將光標移動到頂部和左側位置并同時使用transform來校正transforming point是一個壞主意。 這僅對“輸入”有效，而對“輸出”無效。

And to make a proper output animation I had to calculate a cursor position inside the target element and correct top/left and transform y, x in parallel. And I did it but the result was too glitchy.

為了制作適當的輸出動畫，我必須計算目標元素內的光標位置，并校正頂部/左側并并行轉換y，x。 我做到了，但是結果太小故障了。

I wrote this module with Typescript. Because it helped me to keep my code clean and helped me to handle errors + very convenient tips.

我用Typescript編寫了這個模塊。 因為它可以幫助我保持代碼干凈，并幫助我處理錯誤和非常方便的提示。

Body styles

體型

I added a property that will reset margin and padding for the body, due to this the mouse can be positioned wrong.

我添加了一個屬性，該屬性將重置主體的邊距和填充，因此，鼠標可能定位錯誤。

I fell asleep with a thought that the next day I’ll try GSAP.

我睡著了，想到第二天我將嘗試GSAP 。

The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. This allows for precise control for more involved animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.

GreenSock動畫平臺(簡稱GSAP )是一個功能強大JavaScript庫，使前端開發人員和設計人員可以創建基于時間軸的強大動畫。 這允許對更多涉及的動畫序列進行精確控制，而不是CSS有時提供的約束keyframe和animation屬性。

So, GSAP. GSAP forums it’s a powerful thing. But many examples you can find on Codepen as well. A simple and small example that I found as a reference.

因此，GSAP。 GSAP論壇是一項強大的功能。 但是，您也可以在Codepen上找到許多示例。 我找到一個簡單的小例子作為參考。

And I tried the same approach. With GSAP it works like a charm

我嘗試了相同的方法。 借助GSAP，它就像魅力一樣運作

A few interesting examples. A library that can morp the cursor to the target element and without external libraries 👇🏽

一些有趣的例子。 無需外部庫即可將光標拖到目標元素的庫👇🏽

And really awesome cursor effects on Codrops including source code 👇🏽

而且對Codrops的光標效果非常好，包括源代碼👇🏽

I also learned the difference between mouseleave / mouseenter and mouseout / mouseover 👇🏽

我也學會之間的區別mouseleave / mouseenter和mouseout / mouseover 👇🏽

?T?h?e? ?n?e?x?t? ?t?h?i?n?g? ?I? ?d?i?d? ?i?s? ?s?e?p?a?r?a?t?e?d? ?e?x?e?c?u?t?e? ?f?u?n?c?t?i?o?n?s? ?b?y? ?t?y?p?e?s?.? ?B?e?c?a?u?s?e? ?I? ?p?l?a?n?n?e?d? ?t?o? ?m?a?k?e? ?s?e?v?e?r?a?l? ?m?o?d?e?s? ?o?f? ?t?h?e? ?c?u?r?s?o?r?.? ?T?h?e? ?f?i?r?s?t? ?a?n?d? ?t?h?e? ?d?e?f?a?u?l?t? ?o?n?e? ?w?i?l?l? ?b?e? ?c?o?n?t?e?x?t? ?c?u?r?s?o?r?.? UPD: I leave only one mode — context-cursor

接下來的事情我所做的是分開執行的功能由?t?y?p?e?s?.?因為我計劃做幾種模式的?c?u?r?s?o?r?.?第一和一個默認將上下文?c?u?r?s?o?r?.?UPD：我只留下一個模式-上下文光標

I also separated cursor effects. You can add specify these types in the data attribute data-cursor.

我還分離了光標效果。 您可以在data屬性data-cursor添加指定這些類型。

因此，我們有以下效果： (So we have these effects:)

— noPadding. By default will add small padding to the cursor.

— noPadding。 默認情況下會向光標添加小填充。

— noParallax. Will switch off the parallax effect.

— noParallax。 將關閉視差效果。

— Lift effect. The cursor will be dissolved in the button. Reincarnating the cursor into a button — we will lift the button a little and add a shadow to it.

—提升效果。 光標將是 溶解在按鈕上。 將光標重新變成按鈕-我們將按鈕稍微抬起并為其添加陰影。

視差效果 (Parallax effect)

First, we need to do is detect when the mouse moves right and left when it is on a hovered element mouseenter. To do so we need to take the relative mouse position:

首先，我們要做的是檢測鼠標在懸停元素mouseenter上時何時左右移動。 為此，我們需要采用鼠標的相對位置：

and then we need to subtract half the width of the element from the relative position:

然后我們需要從相對位置減去元素的一半寬度：

And the last thing we have to do to make it work is to add the speed variable. This variable will slow down the movement. We will add this variable to the module as a changeable argument.

為了使它起作用，我們要做的最后一件事是添加speed變量 。 此變量將減慢運動速度。 我們將此變量作為可變參數添加到模塊中。

Let’s make a function that will count the parallax.

讓我們做一個計算視差的函數。

Now we need to implement the same effect to the hovered element but with the negative sign:

現在，我們需要對懸停的元素實現相同的效果，但帶有負號：

I added an active class c-cursor_active when the cursor is hovering an element. That you can add your custom active styles without involving JS.

當光標懸停在元素上時，我添加了一個活動類c-cursor_active 。 您可以在不涉及JS的情況下添加自定義活動樣式。

But there is a problem. X and Y props go as subpixels in CSS transform but left and right props go as rounded numbers and because of that, the animation was to “steppy” like there is 10 fps instead of 60.

但有一個問題。 X和Y道具在CSS transform以子像素的形式出現，而左，右道具以四舍五入的形式出現，因此，動畫就像是10幀/秒而不是60幀/秒的“步進式”。

Compare to the back icon which we animated with X and Y property which GSAP translates to the transform prop. Translate animation is much smoother.

與我們使用X和Y屬性動畫化的后退圖標進行比較，GSAP將其轉換為transform道具。 翻譯動畫要流暢得多。

It took me some time, but I wrote an operation for the cursor using X and Y transform.

我花了一些時間，但是我使用X和Y transform為光標編寫了一個操作。

It’s a dirty code, but works. I’m planning to make it up after I’ll do all that I planned to achieve.

這是一個骯臟的代碼，但是有效。 我打算完成我打算實現的所有任務后，再進行彌補。

Here is the result before (with the left and top props) and after (with the x and y props):

這是之前 (帶有左側和頂部道具)和之后 (帶有x和y道具)的結果：

Also if you want more about difference betweeen transform and pos:top/left check this article that explains Translate() and absolute position movement:

另外，如果您想進一步了解betweeen transform與pos:top/left差異，請查看這篇介紹Translate()和絕對位置移動的文章：

The last day to add the final effect. I added the “Shift” effect. It was easy to do because all you need to do here is add a shadow and scale to the target element.

最后一天添加最終效果。 我添加了“ Shift”效果。 這樣做很容易，因為您要做的就是在目標元素上添加陰影和縮放比例。

Here are some tips how you can use CSS variables, but I used c-cursor_active class to set the active CSS color.

這里有一些技巧，您可以使用CSS變量，但是我使用了c-cursor_active類來設置活動CSS的顏色。

https://greensock.com/forums/topic/21422-how-to-animate-using-css-variables-as-target-values

https://greensock.com/forums/topic/21422-how-to-animate-using-css-variables-as-target-values

The first version looks like this:

第一個版本如下所示：

Now let’s make the effect prettier. Move the box-shadow property from the cursor to the target element to make the transitions smooth. And add a “flare” on the button that will fallow the cursor. I also added a little blur to cursor on the hover to smooth the morphing and this gave an interesting side effect — as is a lens-flare that blurs objects` edge a little.

現在讓效果更漂亮。 將box-shadow屬性從光標移動到目標元素，以使過渡平滑。 并在按鈕上添加一個“ flare”，它將使光標消失。 我還在懸停時在光標上添加了一些模糊以平滑變形，這產生了一個有趣的副作用-鏡頭光暈使對象的邊緣稍微模糊了。

In addition, I added a few adjustments — you can switch off paddings for the cursor when it hovered and switch off the parallax effect on hovering.

另外，我添加了一些調整-您可以在光標懸停時關閉其填充，并在懸停時關閉視差效果。

{Writing this article and unsuccessful attempts to make an NPM module}

{撰寫本文，但未成功制作NPM模塊}

I wanted to upload this module as an NPM package but the adjustment for this will take too much time, so I publish it as is, and you still can copy it and use it in your projects or modify it any way you want.

我想將此模塊作為NPM軟件包上載，但是對此的調整將花費太多時間，因此我按原樣發布，您仍然可以復制它并在項目中使用它，也可以根據需要進行任何修改。

Next three days I spend to write the documentation and made the demo, and to finish this article as well :-)

接下來的三天，我將花時間編寫文檔并進行演示，并同時完成本文:-)

In general, I achieved and tested things that I wanted and could say that it looks interesting on the web. But here is my reasons why such cursors won't be implemented as a unified pointer:

總的來說，我實現并測試了我想要的東西，并且可以說它在網絡上看起來很有趣。 但是，這就是為什么我不能將這些游標實現為統一指針的原因：

1. The web already has their cursors, there are some many of them. The web cursor is a solid pattern. We associate the web with the arrow cursor.

   網絡已經有了他們的光標，其中有很多 。 Web光標是實心圖案。 我們將網絡與箭頭光標關聯。

2. Using this type of cursor as a default one could be a CPU consuming task.
   將這種類型的游標用作默認游標可能是一項占用CPU的任務。
3. The web doesn’t need to change patterns and look. The web is a pure constructor with which you can build whatever you want — it only gives you a simple boilerplate, you can use it or you can write your own.
   網絡不需要更改樣式和外觀。 Web是一個純粹的構造函數，您可以用它構建所需的任何內容–它只為您提供一個簡單的樣板，您可以使用它，也可以編寫自己的模型。
4. We have many different interfaces on the web — tense and opposite, with a lot of white space, controls, buttons with different functions, etc. So the implementation of such pointer will ruin UX half of them. It will force to redesign websites to make them fit for a new pattern.
   我們在Web上有許多不同的界面-緊張而相對，具有許多空白，控件，具有不同功能的按鈕等。因此，此類指針的實現將破壞UX中的一半。 它將迫使重新設計網站，使它們適應新的模式。

But… at the same time, I do not reject that in the future we will see a new “fancy” cursor, because:

但是……同時，我不拒絕在將來我們會看到一個新的“花式”光標，因為：

1. Our computers are getting more powerful, which means that we’ll be able to implement more complex features, without reducing efficiency.
   我們的計算機變得越來越強大，這意味著我們將能夠實現更復雜的功能，而不會降低效率。
2. Major, big companies that have a monopoly on the market could implement and force new features in their products. Exactly like apple did with iPad pointer. And developers will be free to choose between the old and the new.
   在市場上具有壟斷地位的大型公司可以在其產品中實施并強制采用新功能。 就像蘋果使用iPad指針一樣。 開發人員可以在新舊之間自由選擇。

Just before I publish this article I saw a new article on codrops by Mary Lou, it calls magnetic buttons. Very similar to what I wanted to achieve here and so different solutions. Realy liked it. You can also check it and view the source code.

在我發表這篇文章之前，我看到了Mary Lou撰寫的有關codrop的新文章，它稱為磁性按鈕。 與我要在此處實現的目標非常相似，因此有不同的解決方案。 Realy喜歡它。 您也可以檢查它并查看源代碼。

Another cool feature by Mary Lou and iPad pointer also has it is — non-standart hit area, a bigger hit area. Which is pretty cool when you can choose when to trigger the cursor morphing. I’ll implement it if someone asks me to include it in the code. But here are two ways how I think we can achieve it:

Mary Lou和iPad指針的另一個很酷的功能是-非標準擊中區域，更大的擊中區域。 當您可以選擇何時觸發光標變形時，這非常酷。 如果有人要我將其包含在代碼中，我將實現它 。 但是我認為我們可以通過兩種方式實現這一目標：

1. The cheap and simple way — just add :pseudo-element to the cursor and make it bigger. Then we track when pseudo-element cross the target element.

   便宜而簡單的方法-只需在光標上添加:pseudo-element并將其增大。 然后我們跟蹤偽元素何時穿過目標元素。

2. The second way — we track everything in mousemove listener and use a special collider function.

   第二種方法-我們跟蹤mousemove偵聽器中的所有內容，并使用特殊的對撞機功能。

I found an interesting bug when I started to make a demo page — the cursor is not moving during the scroll (like on the example below). The solution is very simple — just add position: fixed to the cursor.

當我開始制作演示頁面時，我發現了一個有趣的錯誤-滾動過程中光標沒有移動(如以下示例所示)。 解決方案非常簡單-只需添加position: fixed在光標上。

And another fix that I made — I changed the method to get an element position. When you have scroll on your page — use el.getBoundingClientRect().top or left instead of el.offsetTop or el.offsetLeft.

我所做的另一項修復-我更改了獲取元素位置的方法。 在頁面上滾動后，請使用el.getBoundingClientRect().top或left代替el.offsetTop或el.offsetLeft 。

DEMO PAGE 👇🏽

演示頁👇🏽

GITHUB PAGE 👇🏽

GITHUB頁面👇🏽

Thank you for reading!

感謝您的閱讀！