andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 13:34:04 +03:00
parent d35dab24c3
commit 3077d4c71f
27 changed files with 141 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
snippets/mouse-cursor-gradient-tracking.md
View File

@ -28,7 +28,7 @@ A hover effect where the gradient follows the mouse cursor.
position: relative;
}
.mouse-cursor-gradient-tracking::before {
.mouse-cursor-gradient-tracking:before {
--size: 0;
content: '';
position: absolute;
@ -41,27 +41,27 @@ A hover effect where the gradient follows the mouse cursor.
transition: width 0.2s ease, height 0.2s ease;
}
.mouse-cursor-gradient-tracking:hover::before {
.mouse-cursor-gradient-tracking:hover:before {
--size: 200px;
}
```
```js
var btn = document.querySelector('.mouse-cursor-gradient-tracking')
let btn = document.querySelector('.mouse-cursor-gradient-tracking');
btn.onmousemove = function(e) {
var rect = e.target.getBoundingClientRect()
var x = e.clientX - rect.left
var y = e.clientY - rect.top
btn.style.setProperty('--x', x + 'px')
btn.style.setProperty('--y', y + 'px')
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
btn.style.setProperty('--x', x + 'px');
btn.style.setProperty('--y', y + 'px');
}
```
#### Explanation
1. `--x` and `--y` are used to track the position of the mouse on the button.
2. `--size` is used to keep modify of the gradient's dimensions.
3. `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion.
- `--x` and `--y` are used to track the position of the mouse on the button.
- `--size` is used to keep modify of the gradient's dimensions.
- `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion.
#### Browser support