Is there a easy way to change color or background-color when the cursor is on the black divs, and show them in the white "cursor-area" ?
I know that it is possible if you change the black divs color and z-index on hover, but is there a way to do it through the white cursor - so that i don't have to modify every div that i want to show above the cursor.
EDIT: I made a new codepen-site. So I want the 'Hello'-text to get black when the white-cursor is over it. The black 'hello'-text should appear in the white area
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');
for (var i = 0; i < clickableCursor.length; i++) {
clickableCursor[i].addEventListener('mouseover', () => {
cursor.style.height = "80px";
cursor.style.width = "80px";
cursor.style.animation = "cursorAnimation 5s linear infinite";
cursor.style.background = "white";
});
clickableCursor[i].addEventListener('mouseout', () => {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.animation = "none";
cursor.style.border = "2px solid white";
cursor.style.background = "none";
});
}
body {
cursor: none;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor::before {
content: '';
position: absolute;
height: 7px;
width: 7px;
border-radius: 100%;
background-color: white;
}
.clickableCursor {
font-size: 50px;
color: white;
position: fixed;
background: black;
padding: 50px
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
<div class="container">
<div id="cursor"></div>
<p class="clickableCursor one"> Hello </p>
</div>
You can consider the use of mix-blend-mode with the darken value since your cursor is white. You have to adjust your code to add an extra wrapper to isolate the mix-blend-mode effect from the background.
You can also simplify your JS code and consider CSS only hover effect:
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
body {
cursor: none;
margin: 0;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 100000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
background: radial-gradient(circle 4px, #fff 98%, transparent 100%);
transition: .1s ease-out;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
mix-blend-mode: darken;
}
.clickableCursor {
position: fixed;
height: 20px;
width: 20px;
background: black;
}
.clickableCursor:hover~#cursor {
width: 80px;
height: 80px;
background: white;
}
.clickableCursor:hover {
background:blue;
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
.three {
bottom: 50px;
left: 50px;
}
.four {
bottom: 50px;
right: 50px;
}
<div class="container">
<div style="isolation:isolate">
<div class="clickableCursor one"></div>
<div class="clickableCursor two"></div>
<div class="clickableCursor three"></div>
<div class="clickableCursor four"></div>
<div id="cursor"></div>
</div>
</div>
UPDATE TO UPDATED QUESTION
replace <p> with div, put into it <div id="cursor"></div>.
Then wrap text for example with <span> and make css
.text:hover {
color: black;
z-index: 1000000001; /*higher that #cursor's*/
position: relative; /*this is neede to z-index work*/
}
Also, if you replace <span> with <div>, take away padding from .clickableCursor and put it to .text, which is now <div>, result will be better. Look up in the snippet.
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');
for (var i = 0; i < clickableCursor.length; i++) {
clickableCursor[i].addEventListener('mouseover', () => {
cursor.style.height = "80px";
cursor.style.width = "80px";
cursor.style.animation = "cursorAnimation 5s linear infinite";
cursor.style.background = "white";
});
clickableCursor[i].addEventListener('mouseout', () => {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.animation = "none";
cursor.style.border = "2px solid white";
cursor.style.background = "none";
});
}
body {
cursor: none;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor::before {
content: '';
position: absolute;
height: 7px;
width: 7px;
border-radius: 100%;
background-color: white;
}
.clickableCursor {
font-size: 50px;
color: white;
position: fixed;
background: black;
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
.text {
padding: 50px
}
.text:hover {
color: black;
z-index: 1000000001;
position: relative;
}
<div class="container">
<div class="clickableCursor one">
<div id="cursor"></div>
<div class="text">
Hello
</div>
</div>
</div>
Why not use :hover? It works fine - or did I not understand you.
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');
for (var i = 0; i < clickableCursor.length; i++) {
clickableCursor[i].addEventListener('mouseover', () => {
cursor.style.height = "80px";
cursor.style.width = "80px";
cursor.style.animation = "cursorAnimation 5s linear infinite";
cursor.style.background = "white";
});
clickableCursor[i].addEventListener('mouseout', () => {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.animation = "none";
cursor.style.border = "2px solid white";
cursor.style.background = "none";
});
}
body {
cursor: none;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor::before {
content: '';
position: absolute;
height: 7px;
width: 7px;
border-radius: 100%;
background-color: white;
}
.clickableCursor {
position: fixed;
height: 20px;
width: 20px;
background: black;
}
.clickableCursor:hover {
z-index: 1000000001;
background: red;
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
.three {
bottom: 50px;
left: 50px;
}
.four {
bottom: 50px;
right: 50px;
}
<div class="container">
<div id="cursor"></div>
<div class="clickableCursor one"></div>
<div class="clickableCursor two"></div>
<div class="clickableCursor three"></div>
<div class="clickableCursor four"></div>
</div>
Related
Just like the above image or an idea or reference to achieve this design, I appreciate the help or suggestion given by community thank you
I have got reference of progress bar which is circular but not able find an approach to solve it.
const boxes = document.querySelectorAll(".box");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet']
boxes.forEach((box) => {
const insideContent = box.innerText;
box.style.border = `6px solid ${colors[insideContent]}`
})
#app {
display: flex;
}
.box {
width: 50px;
height: 50px;
margin: 10px;
background-color: cyan;
display: flex;
justify-content: center;
align-items: center;
}
<div id="app">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
As per your question I think this is what you are trying to achieve.
First define a pseudo class root
:root {
--color-val: blue;
}
Note: In order to use the --color-val you need to write it as color: var(--color-var) in CSS
Second use JavaScript to update the variable --color-val
let colors =
var root = document.querySelector(':root');
const delay = ms => new Promise(res => setTimeout(res, ms));
const colorChange = async () => {
await delay(1000);
color = colors[Math.floor(Math.random() * colors.length)]
console.log(color)
root.style.setProperty('--color-val', color);
};
colorChange()
Note:
Add the color list you want to select from or go to CodePen for a list of 1000+ hex codes.
Promise are used for asynchronous function and can be skipped by using setTimeOut for a delayed loop or if used with another eventlistener.
I apologize if I misunderstood the question. Wrote in a hurry and without beautyful visualisation, if you disassemble the principle, you can customize it.
h1 {
display: block;
margin:0 auto;
text-align: center;
padding-top:20%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
z-index: 110;
margin:0;
margin: -10px;
}
.top {
display:block;
background-color: green;
height: 24px;
width: 150px; /* gorizontal top */
animation: top 1s linear;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
.right {
background-color: green;
height: 0%;/* right */
width: 32px;
animation: right 1s linear;
animation-fill-mode: forwards;
animation-delay: 1s;
z-index: 10;
}
#keyframes right {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.bottom {
position: absolute;
top: 123px;
left: 150px;
background-color: green;
width: 0px;
height: 27px;
z-index: 10;
animation: bottom 1s linear;
animation-fill-mode: forwards;
animation-delay: 2s;
/* animation-direction: reverse; */
}
#keyframes bottom {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-250px,0);
-webkit-transform: translate(-250px,0); /** Safari & Chrome **/
-o-transform: translate(-250px,0); /** Opera **/
-moz-transform: translate(-250px,0); /** Firefox **/
width: 250px;
}
}
.left {
position: absolute;
top: 122px;
background-color: green;
width: 25px;
height: 0px;
animation: left 1s linear;
animation-fill-mode: forwards;
animation-delay: 3s;
}
#keyframes left {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-250px);
-webkit-transform: translate(0,-250px); /** Safari & Chrome **/
-o-transform: translate(0,-250px); /** Opera **/
-moz-transform: translate(0,-250px); /** Firefox **/
height: 277px;
}
}
<div class='head'>
<div class='container'>
<div class='top'></div>
<div class='box'>
<h1 id='timer'>
1
</h1>
</div>
<div class='right'></div>
<div class='bottom'></div>
<div class='left'></div>
</div>
</div>
<script type="text/javascript">
init()
function init()
{
sec = 0;
setInterval(tick, 1000);
}
function tick()
{ if (sec<3) { sec++
document.getElementById("timer").
childNodes[0].nodeValue = sec;
} else {
clearInterval(0);
}
}
</script>
Also, instead of the SetInterval script, you can take values from your block width and height styles and output a mathematical calculation in h1 instead of a stopwatch.
upd: After your comment, I decided to do what I wrote about above. You can play with values and math, I add a snippet of another solution that changes the progress bar from the entered values within the entered range. (of course, it would be easier on react than on pure js)
function grade () {
let grade = +document.getElementById("grade").value;
let range = +document.getElementById("range").value;
document.getElementById("timer").innerHTML = `${grade}/${range}`;
progress(grade,range)
}
function progress (value, grade) {
document.getElementById('1').style.backgroundColor = `white`
document.getElementById("left").className = "noactive";
document.getElementById('top').style.width = `0%`
document.getElementById('right').style.height = `0%`
document.getElementById('bottom').style.width = `0%`
let GradeValuSide = grade/4;
if (value <= GradeValuSide) {
document.getElementById('top').style.width =
`${value/GradeValuSide*100}%`
} else if (value > GradeValuSide && value <= (GradeValuSide*2)) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height =
`${(value-GradeValuSide)/GradeValuSide*100}%`
} else if (value >= grade/2 && value < (grade/4)*3) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width =
`${((((value-(GradeValuSide*2)) / GradeValuSide) *100) / 100) *27}%`
} else if (value >= grade-(grade/4) /* && value < value + 1 */) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width = `100%`
document.getElementById('1').style.backgroundColor = `green`
document.getElementById("left").className = "left";
document.getElementById('left').style.height =
`${(40 - (40 * ((((value-(GradeValuSide*3)) * 100) / GradeValuSide)/ 100)))}%`
}
}
h1 {
font-size:20px;
position: absolute;
left: 40px;
display: block;
margin: 0 auto;
align-items: center;
padding-top:10%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
margin:0;
margin: -10px;
}
div.top {
display:block;
background-color: green;
height: 24px;
width: 0%; /* gorizontal top */
z-index:999;
}
div.right {
position:relative;
background-color: green;
height: 0%;/* right */
width: 32px;
z-index: 9999;
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
background-color:white;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.wrap{
position: relative;
}
div.bottom {
position: absolute;
top: 123px;
background-color: green;
width: 0%; /* 27 = 100% */
height: 27px;
float: right;
right: 78vw;
z-index: 100;
}
div.left {
position: absolute;
background-color: white;
width: 23px;
height: 40%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
div.noactive {
position: absolute;
background-color: white;
width: 23px;
height: 0%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
.items {
margin-top: 50px;
text-align: center;
}
.grade,
.value {
height: 15px;
width: 50px;
align-items: center;
}
<div class='head'>
<div id='1' class='container'>
<div id='top' class='top'></div>
<div class='box'>
<h1 id='timer'>1</h1>
<div class='items'>
value<input id='grade' class='grade' type=number oninput="grade()"/>
range<input id='range' class='value' type=number oninput="grade()"/>
</div>
</div>
<div id='right' class='right'></div>
<div id='bottom' class='bottom'></div>
<div id='left' class='noactive'></div>
</div>
</div>
<script src='app.js'></script>
I have used the wheel of fortune code from how to draw a wheel of fortune?
I've modified function drawSector(sector,i) to drawImage on each sector like this:
function drawSector(sector, i) {
const ang = arc * i;
ctx.save();
// COLOR
ctx.beginPath();
ctx.fillStyle = sector.color;
ctx.moveTo(rad, rad);
ctx.arc(rad, rad, rad, ang, ang + arc);
ctx.lineTo(rad, rad);
ctx.fill();
// TEXT
ctx.translate(rad, rad);
ctx.rotate(ang + arc / 2);
if(!sector.label.includes('<img')){
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.fillText(sector.label, rad-10, txtPositionY);
}
else{
// IMG
const div = document.createElement('div')
div.innerHTML = sector.label
const img = div.querySelector('img');
const ratio = img.width/img.height;
let imgMinH = (2*PI*55)/sectors.length; // // r=110/2
let imgMaxW = (rad-15) - 55;
let imgW = imgMinH*ratio;
let imgH = imgMinH;
let imgX = (rad-15)-imgW;
let imgY = (-imgH)/2;
let LX = (2*PI*imgX)/sectors.length;
if(imgW<imgMaxW){
while( (imgX>55) && (imgH<LX) && (imgW<imgMaxW) ){
imgW += 1;
imgH = imgW/ratio;
imgX = (rad-15)-imgW;
imgY = (-imgH)/2;
LX = (2*PI*imgX)/sectors.length;
}
}
else{
while( (imgX<55) || (imgH>LX) || (imgW>imgMaxW) ){
imgW -= 1;
imgH = imgW/ratio;
imgX = (rad-15)-imgW;
imgY = (-imgH)/2;
LX = (2*PI*imgX)/sectors.length;
}
}
console.log("ratio:"+ratio+'\n orgH:'+imgMinH+'\n imgW:'+imgW+'\nimgH:'+imgH+'\nLX:'+LX+'\nimgX:'+imgX+'\nimgY:'+imgY+'\nimgMaxW:'+imgMaxW);
ctx.drawImage(img, imgX, imgY, imgW, imgH);
}
ctx.restore();
};
but i can not calculate exactly about image width, height and position. Please see the images below:
How to calculate exactly image width, height, position to drawImage like this image below?
Thank you!
const button = document.querySelector('.ring__button');
const ring = document.querySelector('.ring__wrapper');
button.addEventListener('click', () => {
ring.classList.add('ring__wrapper--rotate')
})
:root {
--size: 300px;
}
.ring {
width: var(--size);
height: var(--size);
position: relative;
z-index: 1;
}
.ring__wrapper {
display: flex;
flex-wrap: wrap;
border-radius: 100%;
overflow: hidden;
transform-origin: 50% 50%;
position: relative;
width: inherit;
height: inherit;
}
.ring__wrapper--rotate {
animation: rotate 3s;
transform: rotate(990deg)
}
.ring__button {
position: absolute;
z-index: 1;
border: none;
width: calc(var(--size) / 3);
height: calc(var(--size) / 3);
border-radius: 100%;
background: red;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: bold;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ring__button:after {
position: absolute;
z-index: 3;
display: block;
content: '';
left: 50%;
bottom: 100%;
border-bottom: 20px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: translate(-50%, 5%);
}
.ring__part {
width: calc(var(--size) / 2);
height: var(--size);
overflow: hidden;
}
.ring__part img {
width: inherit;
height: inherit;
object-fit: contain;
}
.ring__part--1 {background: aquamarine;}
.ring__part--1 img {transform: rotate(180deg);}
.ring__part--2 {background: antiquewhite;}
#keyframes rotate {
from {transform: rotate(0)}
to {transform: rotate(990deg)}
}
<div class="ring">
<button class="ring__button">QUAY</button>
<div class="ring__wrapper">
<div class="ring__part ring__part--1"><img src="https://images.unsplash.com/photo-1655810120657-9ce44d2f9e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" alt=""></div>
<div class="ring__part ring__part--2"><img src="https://images.unsplash.com/photo-1655810120657-9ce44d2f9e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" alt=""></div>
</div>
</div>
canvas is cool, but what about css?
const button = document.querySelector('.ring__button');
const ring = document.querySelector('.ring__wrapper');
button.addEventListener('click', () => {
ring.classList.add('ring__wrapper--rotate')
})
:root {
--size: 300px;
}
.ring {
width: var(--size);
height: var(--size);
position: relative;
z-index: 1;
}
.ring__wrapper {
display: flex;
flex-wrap: wrap;
border-radius: 100%;
overflow: hidden;
transform-origin: 50% 50%;
position: relative;
width: inherit;
height: inherit;
}
.ring__wrapper--rotate {
animation: rotate 3s;
transform: rotate(855deg)
}
.ring__button {
position: absolute;
z-index: 1;
border: none;
width: calc(var(--size) / 3);
height: calc(var(--size) / 3);
border-radius: 100%;
background: red;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: bold;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ring__button:after {
position: absolute;
z-index: 3;
display: block;
content: '';
left: 50%;
bottom: 100%;
border-bottom: 20px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: translate(-50%, 5%);
}
.ring__part {
width: calc(var(--size) / 2);
height: calc(var(--size) / 2);
overflow: hidden;
}
.ring__part img {
width: inherit;
height: inherit;
object-fit: contain;
}
.ring__part--1 {background: aquamarine;}
.ring__part--1 img {transform: rotate(225deg);}
.ring__part--2 {background: antiquewhite;}
.ring__part--2 img {transform: rotate(-45deg);}
.ring__part--3 {background: brown;}
.ring__part--3 img {transform: rotate(135deg);}
.ring__part--4 {background: burlywood;}
.ring__part--4 img {transform: rotate(45deg);}
#keyframes rotate {
from {transform: rotate(0)}
to {transform: rotate(855deg)}
}
<div class="ring">
<button class="ring__button">QUAY</button>
<div class="ring__wrapper">
<div class="ring__part ring__part--1"><img src="https://images.unsplash.com/photo-1655810120657-9ce44d2f9e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" alt=""></div>
<div class="ring__part ring__part--2"><img src="https://images.unsplash.com/photo-1655810120657-9ce44d2f9e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" alt=""></div>
<div class="ring__part ring__part--3"><img src="https://images.unsplash.com/photo-1655810120657-9ce44d2f9e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" alt=""></div>
<div class="ring__part ring__part--4"><img src="https://images.unsplash.com/photo-1655810120657-9ce44d2f9e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60" alt=""></div>
</div>
</div>
I used keyframes to apply animation while showing an element(Fade In & Fade Out). Because transition doesn't affect the display property. This is exactly what I mean (Why Transition properties do not work with display properties? - GeeksforGeeks)
But now I have another problem that the element Fades In finely but it doesn't Fade Out finely (It doesn't Fade Out when I scroll up after the button shows up.) This is what I mean (run the code.)
Thanks.
// BTT icon show
const bttDisplay = () => {
const backToTop = document.querySelector('.backToTop');
const windowHeight = window.pageYOffset;
if (windowHeight >= 500) {
backToTop.style.bottom = '40px';
backToTop.style.opacity = 1;
backToTop.style.display = 'grid';
backToTop.style.alignContent = 'center';
backToTop.style.justifyItems = 'center';
} else if (windowHeight <= 499) {
backToTop.style.bottom = 0;
backToTop.style.opacity = 0;
backToTop.style.display = 'none';
};
};
window.addEventListener('scroll', bttDisplay);
// Scroll back to top
const goUp = () => {
document.documentElement.scrollTop = 0;
};
document.querySelector('.backToTop').addEventListener('click', goUp)
#keyframes hover {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.bg {
display: grid;
justify-items: center;
align-content: center;
width: 100%;
height: 100vh;
color: rgb(88, 102, 116);
font-weight: 600;
font-size: 30px;
}
.bg1 {
background-color: #ECB0F5;
}
.bg2 {
background-color: #9EBFFF;
}
.bg3 {
background-color: #54E694;
}
.bg4 {
background-color: #FFFECC;
}
.bg5 {
background-color: #F2DDC7;
}
.backToTop {
width: 50px;
height: 50px;
position: fixed;
bottom: 0;
right: 25px;
display: none;
background-color: whitesmoke;
font-size: 20px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
animation: hover 300ms;
}
<section class="bg bg1">scroll</section>
<section class="bg bg2">down</section>
<section class="bg bg3">until to be</section>
<section class="bg bg4">able to</section>
<section class="bg bg5">return top</section>
<span class="backToTop">Top</span>
You're using CSS animations wrong. Animations by default only play once and you have manually control when they play using the animation-play-state property. Also you don't really need animations for this. A simple CSS transition works fine.
Try this code.
// BTT icon show
const bttDisplay = () => {
const backToTop = document.querySelector('.backToTop');
const windowHeight = window.pageYOffset;
if (windowHeight >= 500) {
backToTop.style.bottom = '40px';
backToTop.style.alignContent = 'center';
backToTop.style.justifyItems = 'center';
backToTop.style.display = 'grid';
backToTop.style.opacity = "1";
} else if (windowHeight <= 499) {
backToTop.style.opacity = "0";
};
};
window.addEventListener('scroll', bttDisplay);
// Scroll back to top
const goUp = () => {
document.documentElement.scrollTop = 0;
};
document.querySelector('.backToTop').addEventListener('click', goUp)
.bg {
display: grid;
justify-items: center;
align-content: center;
width: 100%;
height: 100vh;
color: rgb(88, 102, 116);
font-weight: 600;
font-size: 30px;
}
.bg1 {
background-color: #ECB0F5;
}
.bg2 {
background-color: #9EBFFF;
}
.bg3 {
background-color: #54E694;
}
.bg4 {
background-color: #FFFECC;
}
.bg5 {
background-color: #F2DDC7;
}
.backToTop {
width: 50px;
height: 50px;
position: fixed;
bottom: 0;
right: 25px;
display: none;
background-color: whitesmoke;
font-size: 20px;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
<section class="bg bg1">scroll</section>
<section class="bg bg2">down</section>
<section class="bg bg3">until to be</section>
<section class="bg bg4">able to</section>
<section class="bg bg5">return top</section>
<span class="backToTop">Top</span>
I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.
Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>
I am currently building a modified cursor for my portfolio-website. Unfortunately, my cursor lags when I try to scroll and move the cursor. However, it works when I remove all the other elements from HTML, CSS, and JavaScript and ONLY have the code concerning my cursor (https://codepen.io/djaisdjasidj/pen/RwNvePZ).
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');
for (var i = 0; i < clickableCursor.length; i++) {
clickableCursor[i].addEventListener('mouseover', () => {
cursor.style.height = "80px";
cursor.style.width = "80px";
cursor.style.animation = "cursorAnimation 5s linear infinite";
cursor.style.background = "white";
});
clickableCursor[i].addEventListener('mouseout', () => {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.animation = "none";
cursor.style.border = "2px solid white";
cursor.style.background = "none";
});
}
body {
cursor: none;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor::before {
content: '';
position: absolute;
height: 7px;
width: 7px;
border-radius: 100%;
background-color: white;
}
.clickableCursor {
font-size: 50px;
color: white;
position: fixed;
background: black;
padding: 50px
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
<div class="container">
<div id="cursor"></div>
<p class="clickableCursor one"> Hello </p>
</div>
CSS for my Cursor:
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
My question is - how do I prevent this cursor 'lag' when I have a bigger HTML, CSS, and JavaScript file?
I had the same problem and i solved it with this code :
(hope it can help you or other developers)
$(window).ready(function(){
let mouseX = 0;
let mouseY = 0;
let xp = 0;
let yp = 0;
$(document).mousemove(function(e){
$(".custom__cursor__inner").css({
transform: 'translate(' + (e.clientX - 3.25) + 'px, ' + (e.clientY - 3.25) + 'px)'
});
mouseX = e.clientX - 10;
mouseY = e.clientY - 10;
});
setInterval(function(){
xp += ((mouseX - xp)/6);
yp += ((mouseY - yp)/6);
$(".custom__cursor__outer").css({transform: 'translateX('+ (xp - 15) +'px) translateY('+ (yp - 15) +'px)'} );
}, 10);
})
*{
cursor: none;
}
.custom__cursor__inner{
height: 7.5px;
width: 7.5px;
position: fixed;
transform: translate(0px, 0px);
background-color: #F7D883;
border-radius: 50%;
transition: height .3s cubic-bezier(0.46,0.03,0.52,0.96), width .3s cubic-bezier(0.46,0.03,0.52,0.96);
z-index: 5000;
pointer-events: none;
}
.custom__cursor__outer{
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #0F1928;
background-color: transparent;
position: fixed;
z-index: 5000;
transform: translate(0px, 0px);
pointer-events: none;
opacity: 0.4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom__cursor__outer">
</div>
<div class="custom__cursor__inner">
</div>
The lag happens because you are using a transition to move the cursor to the current mouse location, explicitly stating that it should be lagging behind 100ms.
You should only apply the CSS transition on the elements and attributes that you want to animate, but not the location of the cursor.
Use the transition-property rule to define which attributes should be "transitioned" or use the transition shorthand syntax to explicitly specify the attribute names like #Tyler Roper does in his comment.