We Keep Coding

How to create a square box in which the border of the box will be filled by color depending on the value given on the box?

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>

Comparison slider – How do I make the mouse position operate the opposite way?

I'm trying to make a landing page comparison slider that reacts on the mouseX position,
but I want the slider to move the opposite direction of the mouse position.
Any suggestions on how I can make that happen?
Demo:
https://jsfiddle.net/uw5v94qf/
So basically, like the demo shows, in my case the slider follows the mouse position.
But I want it to kind of do the opposite(?), that is revealing the current slide that the mouse is hovering. The more the mouse moves towards the edge, the more it shows that particular slide.
(function($){
$(function(){
$('.before-wrapper').on( "mousemove", function(e) {
var offsets = $(this).offset();
var fullWidth = $(this).width();
var mouseX = e.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
$(this).parent().find('.comparison-slider').css({
left: mouseX,
transition: 'ease-out'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'all 1s'
});
$(this).find('.after-image').css({
transform: 'translateX(' + (-1*mouseX) + 'px)',
transition: 'all 1s'
});
});
$('.slider-wrapper').on( "mouseleave", function() {
$(this).parent().find('.comparison-slider').css({
left: '50%',
transition: 'all .3s'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all .3s'
});
$(this).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all .3s'
});
});
});
})(jQuery);
body{
margin:0;
font-family: open sans;
}
.slider-wrapper {
width: 100%;
height: 100vh;
position: relative;
}
.slider-wrapper:hover { cursor: crosshair;; }
.comparison-slider {
}
.before-wrapper {
display: block;
overflow: hidden;
width: auto;
height: 100%;
position: relative;
background: url("#") no-repeat center center #111111;
background-size: cover;
}
.before-wrapper:before {
display: block;
content: '';
width: 100%;
height:100%;
}
.after-wrapper, .after-image {
}
.after-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.after-image {
display: block;
width: auto;
height: 100%;
position: relative;
-webkit-transform: translateX(-50%);
61
transform: translateX(-50%);
background: url("#") no-repeat center center #efefef;
background-size: cover;
}
.past, .future{
padding: 40px;
color:#fff;
text-transform:uppercase;
font-size:20px;
/* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
font-weight:800;
z-index:10;
}
.past {
position: absolute;
display: block;
bottom: 0px;
left:0px;
color:#111;
}
.you {
width: 200px;
height: 200px;
position: absolute;
display: block;
right:0px;
left: 0px;
z-index:999;
background: red;
}
.future {
position: absolute;
display: block;
bottom: 0px;
right:0px;
}
<body>
<!-- partial:index.partial.html -->
<div class="slider-wrapper">
<div class="past">Interior</div>
<div class="future">3D</div>
<div class="before-wrapper">
<div class="after-wrapper">
<div class="after-image"></div>
</div>
</div>
<div class="comparison-slider"></div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script src="./script.js"></script>
</body>
</html>

Actually this small adjustment does the trick
var mouseX = $(window).width() - e.pageX ;
You're assigning the mouseX to be it's normal value (e.pageX) subtracted from the window's width
https://jsfiddle.net/kinglish/fb28Lmzg/5/

Parallax elements on scroll

Fiddle
I have a horizontal page with multiple sections on it. On section 2 I have three images. When I scroll section 2 into view, I want the images to move 50px in the opposite scroll direction.
I have two problems which I can't figure out due to the layout of this page (horizontal instead of vertical):
how to detect when I reach section 2
how to move the images by ~50px in the opposite direction of the scroll and make it as smooth as possible
I use this code to figure out the direction of the scroll
var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');
var $scrollOuterWrapper = $('.scroll_outer-wrapper');
$scrollWrapper.scrollTop(0)
$('#scrollBtn').on('click', function() {
$scrollWrapper.scrollTop($scrollWrapper.scrollTop() + 100)
});
var lastScrollTop = 0;
$scrollOuterWrapper.on('scroll', function() {
var st = $(this).scrollTop();
var endOfWrapper = $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight;
if (st > lastScrollTop){
// down scroll
console.log('downscroll');
// parallax elements - move to front
// ??
$moveElement = $('.move-on-scroll');
$moveElement.each(function() {
var firstTop = $(this).offset().top;
var wrapperScrollTop = $scrollOuterWrapper.scrollTop();
var shiftDistance = (firstTop - wrapperScrollTop)*0.02;
$(this).css("transform","translateX("+shiftDistance+"px)");
});
} else {
// upscroll
console.log('upscroll');
// parallax elements - move to back
// ??
}
lastScrollTop = st;
});
Here's also a snippet:
var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');
var $scrollOuterWrapper = $('.scroll_outer-wrapper');
$scrollWrapper.scrollTop(0)
$('#scrollBtn').on('click', function() {
$scrollWrapper.scrollTop($scrollWrapper.scrollTop() + 100)
});
var lastScrollTop = 0;
$scrollOuterWrapper.on('scroll', function() {
var st = $(this).scrollTop();
var endOfWrapper = $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight;
if (st > lastScrollTop){
// down scroll
console.log('downscroll');
// parallax elements - move to front
// ??
$moveElement = $('.move-on-scroll');
$moveElement.each(function() {
var firstTop = $(this).offset().top;
var wrapperScrollTop = $scrollOuterWrapper.scrollTop();
var shiftDistance = (firstTop - wrapperScrollTop)*0.2;
$(this).css("transform","translateX("+shiftDistance+"px)");
});
} else {
// upscroll
console.log('upscroll');
// parallax elements - move to back
// ??
}
lastScrollTop = st;
});
.scroll_outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
.scroll_wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
transition: transform .5s ease;
}
.scroll_section {
width: 100vw;
height: 100vh;
}
.scroll_section.one{background: black; color: white;}
.scroll_section.two{background: white; color: black;}
.scroll_section.three{background: black; color: white;}
.scroll_section.four{background: pink; color: black;}
#scrollBtn {
position: absolute;
bottom: 20px;
right: 20px;
background-color: darkblue;
color: white;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
cursor: pointer;
}
.move-on-scroll {
width: 150px;
height: 150px;
border: 2px solid red;
margin: 0 20px;
}
.move-on-scroll img {
width: 100%;
height: 100%;
object-fit: cover;
}
.two_inner {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
<div class="scroll_wrapper">
<section class="scroll_section one">
<h2>section 1</h2>
</section>
<section class="scroll_section two">
<h2>section 2</h2>
<div class="scroll_section two two_inner">
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
</div>
</div>
</section>
<section class="scroll_section three">
<h2>section 3</h2>
</section>
<section class="scroll_section four">
<h2>section 4</h2>
</section>
</div>
</div>
<button id="scrollBtn">Click to Scroll</button>

While writing the answer, start thinking. I'm not quite sure, what is the goal. Maybe if you show some images of a result or explain the scenario - i could do more accurate. For now - made this. First line of image starts moving with the second screen. The second line of images start moving from the beginning. View the code in Full page mode.
UPDATED
Simply added transition to CSS for the element, which is transforming with transform via jquery.
.move-on-scroll {transition: all .5s cubic-bezier(.25,.99,.52,.9);}
If you what to correct the ease transition-timing-function - you can create your own cubic-bezier here https://cubic-bezier.com/
var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');
var $scrollOuterWrapper = $('.scroll_outer-wrapper');
// Have no idea, what it shoud do
/*$scrollWrapper.scrollTop(0);
$('#scrollBtn').on('click', function() {
$scrollWrapper.scrollTop($scrollWrapper.scrollTop() + 100)
});*/
$scrollOuterWrapper.on('scroll', function() {
var st = $(this).scrollTop();
var sOneWidth = $('.scroll_section.one').width();
$moveElement = $('.move-on-scroll');
$moveElement.each(function() {
var firstTop = $(this).offset().left;
var shiftDistance = -st * 0.3;
// detects, when you reash section 2
if (st >= sOneWidth) {
//do something
}
$(this).css("transform", "translateX(" + shiftDistance + "px)");
});
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.scroll_outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
.scroll_outer-wrapper {
scrollbar-width: thin;
}
.scroll_outer-wrapper::-webkit-scrollbar {
width: 6px;
background-color: #fff;
}
.scroll_outer-wrapper::-webkit-scrollbar-track {
background-color: #F5F5F5;
border-radius: 10px;
}
.scroll_outer-wrapper::-webkit-scrollbar-thumb {
background: #ffa000;
}
.scroll_wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
transition: transform .5s ease;
}
.scroll_section {
width: 100vw;
height: 100vh;
}
.scroll_section.one {
background: black;
color: white;
}
.scroll_section.two {
background: white;
color: black;
}
.scroll_section.three {
background: black;
color: white;
}
.scroll_section.four {
background: pink;
color: black;
}
#scrollBtn {
position: absolute;
bottom: 20px;
right: 20px;
background-color: darkblue;
color: white;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
cursor: pointer;
}
.move-on-scroll {
width: 150px;
height: 150px;
border: 2px solid red;
margin: 0 20px;
transition: all .5s cubic-bezier(.25, .99, .52, .9);
}
.move-on-scroll img {
width: 100%;
height: 100%;
object-fit: cover;
}
.two_inner {
display: flex;
justify-content: flex-end;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
<div class="scroll_wrapper">
<section class="scroll_section one">
<h2>section 1</h2>
</section>
<section class="scroll_section two">
<h2>section 2</h2>
<div class="two_inner">
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80">
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80">
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80">
</div>
</div>
</section>
<section class="scroll_section three">
<h2>section 3</h2>
</section>
<section class="scroll_section four">
<h2>section 4</h2>
</section>
</div>
</div>
<button id="scrollBtn">Click to Scroll</button>

Change background or color on hover

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>

How to make percentage filling up with jquery + js

I am working on project to make percentage number increase and at the same time inside of the percentage number there is background color it needs to fill up according to percentage itself.
So far it is working but only background animation of itself. I mean if its 50 percent it needs to come half of the 50% number. if its 100 it needs to make color all the background of 100% number. Here are the relative code of the html and css.
var i = 0;
var perc = 0;
function buttonClick6() {
perc += 5;
document.getElementById('here').innerHTML = percentage(perc) + "%";
}
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = "€" + i;
}
function percentage(per) {
return (100 / 100) * per;
}
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
});
body {
position: absolute;
width: 1670px;
height: 1030px;
font-family: arial;
background-color: black;
}
.outer {
width: 100%;
height: 386px;
overflow: hidden;
position: relative;
margin-top: 300px;
text-align: center;
}
.inner {
background: url(color3.jpg);
bottom: 0;
height: 0%;
width: 100%;
overflow: hidden;
animation: animateMid 15s linear infinite;
-webkit-background-clip: text;
position: absolute;
}
.inner h2 {
font-size: 500px;
margin-top: -95px;
color: rgba(225, 225, 225, .1);
}
#keyframes animateMid {
0% {
background-position: left 800px top 500px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">0</h2>
<div></div>
</div>
</div>
</div>
<div class="perc">
<h3 id="here">0%</h3>
</div>
<button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

The way you have added CSS or HTML is by adding the scrollbar. Remove the scrollbar and the whole animation will be in one frame.
var i = 0;
var perc = 0;
function buttonClick6() {
perc += 5;
document.getElementById('here').innerHTML = percentage(perc) + "%";
document.getElementById('demo2').style.height = (125 - percentage(perc)) + "%";
}
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = "€" + i;
document.getElementById('demo2').innerHTML = "€" + i
}
function percentage(per) {
return (100 / 100) * per;
}
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
});
body {
position: absolute;
width: 1670px;
height: 1030px;
font-family: arial;
background-color: black;
}
.outer {
width: 100%;
height: 386px;
overflow: hidden;
position: relative;
margin-top: 300px;
text-align: center;
}
h3{
color: white;
}
.inner {
background: url(color3.jpg);
bottom: 0;
height: 0%;
width: 100%;
overflow: hidden;
animation: animateMid 15s linear infinite;
-webkit-background-clip: text;
position: absolute;
}
.inner h2 {
font-size: 500px;
margin-top: -95px;
color: #fff;
}
#keyframes animateMid {
0% {
background-position: left 800px top 500px;
}
}
p {
color: transparent;
font-size: 500px;
top: -95px;
left: 0;
z-index: 1;
width: 100%;
height: 130%;
margin: 0;
position: absolute;
font-weight: bold;
background: #2c2c2c;
background-clip: text;
-webkit-background-clip: text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%" data-value="0">
<p id="demo2">0</p>
<h2 id="demo">0</h2>
<div></div>
</div>
</div>
</div>
<div class="perc">
<h3 id="here">0%</h3>
</div>
<button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>