We Keep Coding

How to animate the fill of an arc in CSS? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is there a way we can fill color of css semi-circle in an incremental way in anticlockwise direction like a progress bar.
Here is the semi-circle code. https://jsfiddle.net/sonymax46/wqfovdjh/7/.
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid blue;
transform: translateX(50%);
}
I want existing blue colour to be filled with Green on an event. How to achieve this with css O SVG
Thank in Advance

Option A is to use a container that cut's off a circular element and a pseudo-class as a "mask" over the top of the circle. Then a gradient background shows the other color when the element is rotated.
The major drawback to this is you have to have a solid color background that the overlay can match visually.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
/* just to show the box could be transparent */
background-color: lightgray;
cursor: pointer;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
/* Use relative on parent so mask aligns */
left: 50%;
/* Move the circle 'outside' the wrapper */
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.arc:after {
/* this creates the 'mask' */
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
background-color: white;
border-radius: 50%;
}
.wrapper:hover .arc {
/* rotate the full element because we can't transition backgrounds */
transform: rotate(-180deg);
}
.gradientExample {
/* just to show the gradient */
height: 20px;
width: 200px;
margin: 0 20px;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the arc</p>
<div class="wrapper">
<div class="arc"></div>
</div>
<div class="gradientExample"></div>
Option B - Use a clip-path instead of overlapping elements. This is much better but you need to create an SVG object to use for the arc and that's a pain from a sizing standpoint.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
background-color: lightgray;
cursor: pointer;
}
.svgArc {
width: 100%;
height: 100%;
position: relative;
clip-path: url(#svgPath);
}
.svgArc:after {
/* have to use a pseudo element because we can't rotate the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.v2:hover .svgArc:after {
transform: rotate(180deg);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the gray square</p>
<div class="wrapper v2">
<div class="svgArc">
</div>
</div>
<svg width="0" height="0" viewBox="0 0 200 200">
<defs>
<clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
</clipPath>
</defs>
</svg>
Option C - Create an SVG circle and animate the offset-path. See my answer and example here: How to make linear css transition to SVG path?

maybe with css custom variables ?
const Root = document.documentElement
, btColor = document.getElementById('bt-color')
;
btColor.onclick=_=>
{
Root.style.setProperty('--bColor', 'green')
}
:root {
--bColor : blue;
}
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid var(--bColor);
transform: translateX(50%);
}
<div class="cc">
<div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>

Change color when scrolling

I've been looking a solution for this but I couldn't get it to work.
I would like my page header to change from a transparent background to a red background as the user begins scrolling the page.
$(window).on("scroll", function() {
if($(window).scrollTop() > 800) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
* {margin:0;padding:0}
html {
background: lightgray;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 1s ease-in-out;
height: auto;
background-color: rgba(17, 42, 107, 0.7);
text-align: center;
line-height: 40px;
}
.header.active {
background: red;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">the header</div>

$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 10) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});

For NoUiSlider, how do I set the width of a handle/thumb?

I have attempted to set the width of a NoUiSlider
via the css:
.noUi-horizontal .noUi-handle {
width:8px;
height:25px;
left: 0px;
top: -8px;
border: 0px solid #000000;
border-radius: 0px;
background: #000;
cursor: default;
box-shadow: none; /*inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;*/ }
.noUi-handle {
left:0px; }
.noUi-active {
box-shadow: none /*inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ }
.noUi-handle:before, .noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 0px;
background: #000000;
left: 14px;
top: 6px; }
.noUi-handle:after {
left: 0px; }
Thought this does give me the narrow handle that I want, the handle no longer covers the
transition in the track between white and green,
but rather that transition is exposed, unlike
when you don't change the handle width.

One of the complications of using nouislider is getting a complete answer.
I've made one below incorporating lg102's response, and added a few things
to make it more obvious. I needed to use !important in the CSS to make
some properties take effect.
Something like this example would make a good addition to
nouislider's website doc, which is already way better
than the average doc for a JS library.
<head>
<script type="text/javascript" src="nouislider.js"></script>
<link href="nouislider.css" rel="stylesheet">
<script>
function init(){
noUiSlider.create(slider_id, {
start: [25, 75],
connect: [false, true, false],
range: {
'min': 0,
'max': 100
}
})
}
</script>
<style>
.noUi-handle {
width: 10px !important;
right: -5px !important; /* must be (width / 2) * -1 */
background: #AA00AA;
}
</style>
</head>
<body onload="init()" >
<h3>slide test1</h3>
<div id="slider_id" style="width:300px;height:20px;"/>
</body>

You are setting the left value for .noUi-handle to 0. The default CSS for LTR sliders looks like this:
.noUi-handle {
width: 34px;
height: 28px;
left: auto;
right: -17px; /* The 17 here is half of the 34 width. The - pulls it in the other direction */
top: -6px;
}
Since you are changing the width to 8, you should set the right (or left, depending on the page orientation) to -4 (8/2).
The minimum changes to make are adding:
width: 10px;
right: -5px;
You can try this out in the documentation:

Temporarily delay page scrolling with jQuery

I have so far create a page that when scrolling down and a container div is reached, a number of divs within it begin to scroll horizontally along the page. My problem is that I want the page to stop scrolling vertically until all the divs have scrolled all the way along to the left then for the page to begin scrolling vertically again. Essentially, the user scrolls down to the container, horizontal scrolling of the divs are triggered, once across the page, begin scrolling down again. This is what I have so far:
Code:
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
$(window).scroll(function() {
$("#service1, #service2, #service3").css({
"left": windowWidth - $(window).scrollTop()
});
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I hope I have been clear.

You can use DOMMouseScroll event for check the scroll and block this with detect and replace event. Please try below. I have block vertical scroll when scroll arrive in third section and reactive when is arrive a size defined left. You can modify with what you want.
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$(document).scrollLeft($(document).scrollLeft()-(delta*40));
$("body").scrollLeft($(document).scrollLeft()-(delta*40));
e.preventDefault();
}
$('html').on ('DOMMouseScroll', function (e) {
var sens = e.originalEvent.detail;
var lastDivTop = ($(window).scrollTop() - $("#services").offset().top)
var lastDivLeft = ($(window).scrollLeft() - $("#services").offset().left)
if (sens < 0) { //scroll Up
if(lastDivLeft > 0 && lastDivTop < 100 ){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
} else if (sens > 0) { //scroll down
if(lastDivTop > 0 && lastDivLeft < 1500){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
}
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Why this implementation of turnjs not work?

I'm trying to implement this example locally:
The first is to import:
jquery library and turnjs.
Turn JS
HTML:
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/07.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/08.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/09.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/10.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/11.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/12.jpg)"></div>
</div>
JavaScript: It seems the error is here, but I have little experience in JavaScript. I do not understand why this happens.
window.addEventListener('resize', resize);
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
// e.stopPropagation();
});
function loadApp() {
console.log('Load App');
var size = getSize();
console.log(size);
// Create the flipbook
$('.flipbook').turn({
// Width
width: size.width,
// Height
height: size.height,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
function getSize() {
console.log('get size');
var width = document.body.clientWidth;
var height = document.body.clientHeight;
return {
width: width,
height: height
}
}
function resize() {
console.log('resize event triggered');
var size = getSize();
console.log(size);
if (size.width > size.height) { // landscape
$('.flipbook').turn('display', 'double');
}
else {
$('.flipbook').turn('display', 'single');
}
$('.flipbook').turn('size', size.width, size.height);
}
// Load App
loadApp();
CSS:
html,
body {
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
overflow: hidden;
background-color: #fcfcfc;
margin: 0;
padding: 0;
}
.flipbook-viewport {
overflow: hidden;
width: 100%;
height: 100%;
}
.flipbook-viewport .container {
position: absolute;
top: 0;
left: 0;
margin: auto;
}
.flipbook-viewport .flipbook {
width: 922px;
height: 600px;
}
.flipbook-viewport .page {
width: 461px;
height: 600px;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.flipbook .page {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.flipbook-viewport .page img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
.flipbook-viewport .shadow {
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow: 0 0 20px #ccc;
-moz-box-shadow: 0 0 20px #ccc;
-o-box-shadow: 0 0 20px #ccc;
-ms-box-shadow: 0 0 20px #ccc;
box-shadow: 0 0 20px #ccc;
}
but not working.
This is console logs:
what should I do?
Thanks!

The problem is (as you can see in the console error) that the document.body is null.. That's because Dom (html structure) is not fully loaded, AKA ready..
Wrap your code in jQuery ready handler..
jQuery(document).ready(function() {......});
Note that this is better than `window load' as suggested in comments because this doesn't wait for every image to be fully loaded to execute.