On click add class to hide other elements using vanilla JavaScript - javascript

At the moment when the user clicks one of the SVGs the class "clicked" is added to that particular SVG. What I would like to happen is that when an SVG is clicked on the page, the other SVG elements are hidden (opacity: 0 or something) and not clickable.
My JS knowledge is a bit limited. I was thinking a class would need to be added to the SVGs when the others were inactive as I was thinking about transitioning them out when a click happens, however would appreciate any suggestions.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive SVG</title>
<link rel="stylesheet" href="static/css/styles.css" />
</head>
<body>
<div class="container" id="container">
<svg version="1.0" class="svg svg-a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect class="rect rect-a" width="100" height="100" />
</svg>
<svg version="1.0" class="svg svg-b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect class="rect rect-b" width="100" height="100" />
</svg>
<svg version="1.0" class="svg svg-c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect class="rect rect-c" width="100" height="100" />
</svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/animejs#3.0.1/lib/anime.min.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background: #222;
position: relative;
}
svg {
display: flex;
width: 100px;
height: 100px;
transition: 0.7s ease-out;
}
.rect {
cursor: pointer;
fill: #eee;
transform-origin: 50% 50%;
transition: 0.5s;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
box-shadow: 20px 20px 20px 0;
position: absolute;
}
.rect-a {
fill: cornflowerblue;
z-index: 390;
}
.rect-b {
fill: pink;
box-shadow: 20px 20px 20px 0;
}
.rect-c {
fill: azure;
box-shadow: 20px 20px 20px 0;
}
.clicked {
fill: cornflowerblue;
transform: scale(1.2);
transform-origin: 50% 50%;
transition: 0.5s;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.clicked svg {
fill: red;
transform: translateY(500px);
}
button {
position: absolute;
z-index: 1000;
color: red;
top: -5px;
right: -5px;
border-radius: 100px;
z-index: 900;
}
// First we get all the path elements and put them in an array
let paths = document.getElementsByClassName('svg');
// Now we can loop over the array and add an eventlistener to each path in the array and it listens to the 'click' event and then runs function toggleClass()
for (let i = 0; i < paths.length; i++) {
paths[i].addEventListener('click', toggleClass);
}
// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass() {
this.classList.toggle('clicked');
}
https://codepen.io/chrismorrison/pen/ZEWdJyV


Updated CodePen w/ rough implementation of what I believe you are looking for.
Below are the changes I made:
JS
// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass(e) {
const clickedClassName = 'clicked';
// If "disabled", don't respond to the click event.
if(this.classList.contains('disabled')) {
e.preventDefault();
}
// The element is "enabled". Has it been clicked
// already? If so, we need to restore it along with
// all the other SVGs back to their original state.
// If not, then hide all other SVGs and add the "clicked"
// class to the element that was clicked
else if(!this.classList.contains(clickedClassName)) {
this.classList.add(clickedClassName);
for(let p of paths) {
if(this !== p) {
toggleDisabled(p)
}
}
} else {
this.classList.remove(clickedClassName);
for(let p of paths) {
if(this !== p) {
toggleDisabled(p)
}
}
}
}
function toggleDisabled(p) {
p.classList.contains('disabled') ? p.classList.remove('disabled') : p.classList.add('disabled')
}
CSS
.disabled {
opacity: 0;
}

Related

How to use javascript to open the modal when connecting the API so that the user can see the animation effect?

let btn = document.querySelector('.btn');
let modal = document.querySelector('.modal');
let wrap = document.querySelector('.wrap');
let photo = document.querySelector('.photo');
let svg = document.querySelector('svg');
let data = [{
title: "dog",
age: 10,
rank: [{
rankStatus: 'behind'
},
{
rankStatus: 'generally',
rankNum: '20'
},
{
rankStatus: 'excellent'
}
]
}]
let rankStatusArr = data[0].rank.map(item => item.rankStatus);
let rankNum = data[0].rank.find(item => item.rankNum).rankNum;
btn.addEventListener('click', function(e) {
svg.style.display = "block"
axios.get("https://dog.ceo/api/breeds/image/random")
.then((response) => {
// 设置处理程序以在加载图像后显示图像
photo.addEventListener('load', () => {
svg.style.display = "none"
modal.style.display = "flex";
});
// 添加“加载”处理程序后设置图像源
photo.src = response.data.message;
})
.catch((error) => console.log(error));
// 排名狀態在 popup 打開後再載入動畫
let progress = rankNum;
let dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = dotPosition + "%";
let txt = document.querySelectorAll('.txt');
for (let i = 0; i < txt.length; i++) {
txt[i].innerHTML = rankStatusArr[i];
}
})
wrap.addEventListener('click', function(e) {
e.stopPropagation();
})
modal.addEventListener('click', function() {
modal.style.display = "none"
})
.modal {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
}
.wrap {
width: 300px;
height: 300px;
padding: 20px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
flex-direction: column;
}
.wrap .photo {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 20px;
}
.wrap #progress-bar-container {
width: 100%;
height: 5px;
background-color: #fff;
position: relative;
display: flex;
flex-wrap: nowrap;
}
.wrap #progress-bar-container .progress-bar {
width: 33.33%;
height: 5px;
background-color: #ccc;
margin-right: 8px;
border-radius: 20px;
}
.wrap #progress-bar-container .progress-bar .txt {
text-align: center;
color: #ccc;
margin-top: 20px;
}
#progress-bar-1 {
background-color: #ddd;
}
#progress-bar-2 {
background-color: #ddd;
}
#progress-bar-3 {
background-color: #ddd;
margin-right: 0;
}
#dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: -3px;
left: 0;
transition: left 0.2s ease-out;
}
svg {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
svg .load {
stroke-dasharray: 0 500;
animation: rot 1s linear infinite;
}
#keyframes rot {
100% {
stroke-dasharray: 500 500;
}
}
.green {
color: yellowgreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.2/axios.min.js"></script>
<button class='btn'>open</button>
<div class="modal">
<div class="wrap">
<img class="photo" src="" alt="photo">
<div id="progress-bar-container">
<div class="progress-bar" id="progress-bar-1">
<p class="txt">1</p>
</div>
<div class="progress-bar" id="progress-bar-2">
<p class="txt">2</p>
</div>
<div class="progress-bar" id="progress-bar-3">
<p class="txt">3</p>
</div>
<div id="dot"></div>
</div>
</div>
</div>
<!-- load -->
<svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="110" cy="110" r="90" stroke-width="10" stroke="gainsboro" fill="none"></circle>
<circle cx="110" cy="110" r="90" stroke-width="10" stroke="darkturquoise" fill="none" class="load"></circle>
</svg>
I encountered a little difficulty in the following requirements. The first difficulty is that I hope that the popup will not be opened until the picture is fully loaded! But I hope that when the popup is opened, the dot can add animation and run to the specified progress position, but it seems that the animation I want to appear has already run before it is opened, and the user will not see the moving animation effect. The second problem is that I want to add a green color to the rankStatus font on the screen if the rankNum is included in the rankStatus object, but I am a novice in programming and don't know which section to add to achieve this. Hope to get your help, thank you.

To solve the first difficulty, you can add an event listener to the photo element which will be triggered when the image is loaded. Inside this event listener, you can set the display of the modal to 'flex' and the display of the svg element to 'none'.
To solve the second difficulty, you can use an if statement inside your rankStatusArr loop. This statement should check if the rankNum is included in the rankStatus object and if so, add a class to the txt element which adds the green color style.
let txt = document.querySelectorAll('.txt');
for (let i = 0; i < txt.length; i++) {
txt[i].innerHTML = rankStatusArr[i];
if (rankNum === rankStatusArr[i]) {
txt[i].classList.add('green');
}
}

Why is the variable not working properly on the CSS?

I created --item-width as a var variable in JavaScript. I thought it would work properly on the CSS, but it's not working properly. What should I do? I'm still a beginner, so I think I did something wrong. Help me.
I am writing again because I was banished from writing. I look forward to your kind cooperation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>marquee_text</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
<script src="js/script.js" defer></script>
</head>
<body>
<div id="wrap">
<div class="marquee-text">
<div class="marquee-text__wrapper" data-controller="marquee">
<div class="marquee-text__item">
<strong>Marquee Text</strong>
<svg class="marquee-text__separator" height="19" width="19" viewBox="0 0 100 95.11">
<polygon points="50 0 65.45 31.31 100 36.33 75 60.7 80.9 95.11 50 78.86 19.1 95.11 25 60.7 0 36.33 34.55 31.31 50 0"/>
</svg>
<span>Marquee Text</span>
</div>
</div>
</div>
</div>
</body>
</html>
#charset "UTF-8";
:root {
--item-width: 0;
}
.marquee-text {
position: relative;
width: 100%;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
height: 50px;
background-color: #222;
font-size: 17px;
color: #fff;
}
.marquee-text__wrapper {
display: flex;
align-items: center;
height: 100%;
}
.marquee-text__item {
padding: 0 10px;
}
.marquee-text__separator {
position: relative;
top: -1px;
margin: 0 10px;
font-size: 1.3em;
vertical-align: middle;
fill: currentColor;
}
.marquee-text a:hover {
opacity: 0;
}
#keyframes marquee-text-ani {
0% {
transform: translate3d(0, 0, 0);
}
100% {
/* This code is not working. */
transform: translate3d(-(var(--item-width))'px', 0, 0);
}
}
setTimeout(()=>{
this.move()
}, 200)
function move() {
const $marqueeTop = document.querySelector(".marquee-text__wrapper");
const $marqueeTopItem = document.querySelector(".marquee-text__wrapper>div");
const $root = document.querySelector(":root");
const itemWidth= $marqueeTopItem.clientWidth;
for (i = 0; i < 10; i++) {
let marqueeTopItem = $marqueeTopItem.cloneNode(!0);
$marqueeTop.appendChild(marqueeTopItem);
}
// This variable is not working in CSS.
$root.style.setProperty(`--item-width`, itemWidth);
$marqueeTop.style.animation = `marquee-text-ani 4s linear 1s forwards infinite`;
}

I changed the code like Terry gave me the comment, and it works well. Thank you.
transform: translate3d(calc((-1px) * var(--item-width)), 0, 0);

why does event Listener need two elements?

In the code below, you'll notice i have two event listeners
window.addEventListener("click", jump);
window.addEventListener("click", jump());
The problem is removing either one of these makes the event listener invalid i.e. it doesnt work, they have to both be present and I'm having a hard time figuring out why.
note: click to jump and view snippet in full page since i havent done the responsive part yet
const ball = document.querySelector(".ball");
const obs = document.querySelector(".obstacle");
const score = document.querySelector("#s");
let temp = 0; // a temporary variable to stop event listener from running as soon as game starts
function jump() {
let bottom = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));
if (temp > 0 && bottom === 150) {
ball.style.bottom = "400px";
setTimeout(() => {
ball.style.bottom = "150px";
}, 300);
}
temp++;
}
window.addEventListener("click", jump);
window.addEventListener("click", jump());
let z = 0; // intitial score to be incremented by each succesful second
setInterval(() => {
let ballX = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));
let obsY = parseInt(window.getComputedStyle(obs).getPropertyValue('right'));
if (ballX >= 150 && ballX <= 240 && obsY >= 785 && obsY <= 970) {
ball.style.animationPlayState = "paused";
obs.style.animationPlayState = "paused";
ball.style.bottom = `${ballX}px`
window.removeEventListener("keydown", jump);
clearInterval();
} else {
s.innerHTML = z;
z += 1;
}
}, 10);
window.onload = () => {
if (screen.availHeight > screen.availWidth) {
alert("This game is best played in landscape, so rotate your phone if you can :)");
}
}
#import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.screen {
margin: 20px;
width: 1000px;
height: 500px;
background: skyblue;
outline: solid 3px;
position: absolute;
overflow: hidden;
}
.score {
position: absolute;
top: 5px;
right: 5px;
width: 200px;
height: 50px;
display: flex;
align-items: flex-end;
font-size: 150%;
font-family: "Comic Neue";
font-weight: bold;
}
.s {
display: flex;
justify-content: center;
align-items: center;
line-height: 50px;
text-shadow: 3px 3px 0px white;
}
#s-title {
width: 40%;
}
#s {
width: 60%;
}
.ball {
position: absolute;
left: 30px;
bottom: 150px;
width: 80px;
height: 80px;
border-radius: 50%;
background: red;
transition: bottom 0.3s ease-in-out;
animation: spin 1s linear infinite;
}
#keyframes spin {
to {
transform: rotate(720deg);
}
}
.obstacle {
width: 100px;
height: 100px;
position: absolute;
right: -150px;
bottom: 150px;
background: red;
animation: attack 1.5s linear infinite;
animation-play-state: running;
}
#keyframes attack {
to {
right: 1150px;
}
}
.grass {
position: absolute;
bottom: 125px;
width: 100%;
height: 25px;
background: rgb(55, 141, 52);
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 125px;
background: rgb(82, 80, 69);
}
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Rollin</title>
<link rel='stylesheet' href='rollin.css'>
<link rel='icon' href='assets/logo.ico'>
</head>
<body>
<div class="screen">
<div class="score">
<div id="s-title" class="s">Score:</div>
<div id="s" class="s">000000</div>
</div>
<div class="ball">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<defs>
<style type="text/css">
.str0 {stroke:black;stroke-width:0.667;stroke-miterlimit:2.61313}
.fil1 {fill:black}
.fil2 {fill:#1A1A1A}
.fil0 {fill:#AE0000}
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g>
<path class="fil0" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281z"/>
<path id="1" class="fil1" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281zm338.197 165.084c-86.55,-86.551 -206.121,-140.084 -338.197,-140.084 -132.076,0 -251.648,53.533 -338.198,140.084 -86.55,86.55 -140.083,206.121 -140.083,338.197 0,132.076 53.533,251.647 140.083,338.197 86.551,86.551 206.122,140.084 338.198,140.084 132.076,0 251.647,-53.533 338.197,-140.084 86.551,-86.55 140.083,-206.121 140.083,-338.197 0,-132.076 -53.532,-251.647 -140.083,-338.197z"/>
</g>
<g>
<path class="fil2" d="M517.231 246.225c149.688,0 271.035,121.346 271.035,271.035 0,149.688 -121.347,271.035 -271.035,271.035 -149.689,0 -271.035,-121.347 -271.035,-271.035 0,-149.689 121.346,-271.035 271.035,-271.035zm184.58 86.454c-47.237,-47.237 -112.497,-76.454 -184.58,-76.454 -72.084,0 -137.343,29.217 -184.581,76.454 -47.237,47.238 -76.455,112.497 -76.455,184.581 0,72.083 29.218,137.343 76.455,184.58 47.238,47.237 112.497,76.455 184.581,76.455 72.083,0 137.343,-29.218 184.58,-76.455 47.237,-47.237 76.455,-112.497 76.455,-184.58 0,-72.084 -29.218,-137.343 -76.455,-184.581z"/>
</g>
<circle class="fil1 str0" cx="517.231" cy="517.26" r="100.656"/>
<path class="fil1 str0" d="M213.398 645.876c-54.056,-27.029 -41.008,-69.901 -48.444,-92.065 -3.228,-9.623 -41.293,134.779 56.413,170.477 18.411,6.727 36.767,13.855 70.319,8.264 25.978,-4.33 61.512,-22.368 72.238,-53.613 12.934,-37.676 6.05,-56.363 -16.318,-82.46 -8.188,-9.553 -35.416,-37.28 -89.472,-20.504 -33.759,19.875 -36.584,43.161 -44.736,69.901z"/>
<path class="fil1 str0" d="M561.667 188.198c52.09,-14.249 81.039,-0.564 103.952,4.079 9.948,2.016 -96.076,-103.15 -175.843,-36.384 -15.032,12.581 -30.384,24.914 -42.317,56.766 -9.24,24.663 -11.386,64.455 10.311,89.367 26.161,30.039 45.787,33.421 79.571,27.098 12.367,-2.315 49.994,-12.031 62.493,-67.234 -0.333,-39.173 -19.087,-53.263 -38.167,-73.692z"/>
<path class="fil1 str0" d="M786.104 714.481c3.621,60.329 -40.031,70.465 -55.509,87.986 -6.72,7.607 137.369,-31.629 119.431,-134.093 -3.38,-19.308 -6.384,-38.769 -28.003,-65.031 -16.738,-20.332 -50.127,-42.086 -82.549,-35.753 -39.095,7.637 -51.837,22.942 -63.253,55.361 -4.179,11.868 -14.578,49.312 26.979,87.737 34.092,19.299 55.671,10.103 82.904,3.793z"/>
</g>
</svg>
</div>
<div class="obstacle">
<img src="assets/kakashi.png" alt="">
</div>
<div class="grass"></div>
<div class="ground"></div>
</div>
<script src='rollin.js' defer></script>
</body>
</html>

How does this not work? You can try this better here: JSFidlle
const ball = document.querySelector(".ball");
const obs = document.querySelector(".obstacle");
const score = document.querySelector("#s");
let temp = 0; // a temporary variable to stop event listener from running as soon as game starts
function jump() {
let bottom = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));
if (temp > 0 && bottom === 150) {
ball.style.bottom = "400px";
setTimeout(() => {
ball.style.bottom = "150px";
}, 300);
}
temp++;
}
window.addEventListener("click", jump);
let z = 0; // intitial score to be incremented by each succesful second
setInterval(() => {
let ballX = parseInt(window.getComputedStyle(ball).getPropertyValue('bottom'));
let obsY = parseInt(window.getComputedStyle(obs).getPropertyValue('right'));
if (ballX >= 150 && ballX <= 240 && obsY >= 785 && obsY <= 970) {
ball.style.animationPlayState = "paused";
obs.style.animationPlayState = "paused";
ball.style.bottom = `${ballX}px`
window.removeEventListener("keydown", jump);
clearInterval();
} else {
s.innerHTML = z;
z += 1;
}
}, 10);
window.onload = () => {
if (screen.availHeight > screen.availWidth) {
alert("This game is best played in landscape, so rotate your phone if you can :)");
}
}
#import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.screen {
margin: 20px;
width: 1000px;
height: 500px;
background: skyblue;
outline: solid 3px;
position: absolute;
overflow: hidden;
}
.score {
position: absolute;
top: 5px;
right: 5px;
width: 200px;
height: 50px;
display: flex;
align-items: flex-end;
font-size: 150%;
font-family: "Comic Neue";
font-weight: bold;
}
.s {
display: flex;
justify-content: center;
align-items: center;
line-height: 50px;
text-shadow: 3px 3px 0px white;
}
#s-title {
width: 40%;
}
#s {
width: 60%;
}
.ball {
position: absolute;
left: 30px;
bottom: 150px;
width: 80px;
height: 80px;
border-radius: 50%;
background: red;
transition: bottom 0.3s ease-in-out;
animation: spin 1s linear infinite;
}
#keyframes spin {
to {
transform: rotate(720deg);
}
}
.obstacle {
width: 100px;
height: 100px;
position: absolute;
right: -150px;
bottom: 150px;
background: red;
animation: attack 1.5s linear infinite;
animation-play-state: running;
}
#keyframes attack {
to {
right: 1150px;
}
}
.grass {
position: absolute;
bottom: 125px;
width: 100%;
height: 25px;
background: rgb(55, 141, 52);
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 125px;
background: rgb(82, 80, 69);
}
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Rollin</title>
<link rel='stylesheet' href='rollin.css'>
<link rel='icon' href='assets/logo.ico'>
</head>
<body>
<div class="screen">
<div class="score">
<div id="s-title" class="s">Score:</div>
<div id="s" class="s">000000</div>
</div>
<div class="ball">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<defs>
<style type="text/css">
.str0 {stroke:black;stroke-width:0.667;stroke-miterlimit:2.61313}
.fil1 {fill:black}
.fil2 {fill:#1A1A1A}
.fil0 {fill:#AE0000}
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g>
<path class="fil0" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281z"/>
<path id="1" class="fil1" d="M517.231 11.182c277.954,0 503.28,225.327 503.28,503.281 0,277.954 -225.326,503.281 -503.28,503.281 -277.954,0 -503.281,-225.327 -503.281,-503.281 0,-277.954 225.327,-503.281 503.281,-503.281zm338.197 165.084c-86.55,-86.551 -206.121,-140.084 -338.197,-140.084 -132.076,0 -251.648,53.533 -338.198,140.084 -86.55,86.55 -140.083,206.121 -140.083,338.197 0,132.076 53.533,251.647 140.083,338.197 86.551,86.551 206.122,140.084 338.198,140.084 132.076,0 251.647,-53.533 338.197,-140.084 86.551,-86.55 140.083,-206.121 140.083,-338.197 0,-132.076 -53.532,-251.647 -140.083,-338.197z"/>
</g>
<g>
<path class="fil2" d="M517.231 246.225c149.688,0 271.035,121.346 271.035,271.035 0,149.688 -121.347,271.035 -271.035,271.035 -149.689,0 -271.035,-121.347 -271.035,-271.035 0,-149.689 121.346,-271.035 271.035,-271.035zm184.58 86.454c-47.237,-47.237 -112.497,-76.454 -184.58,-76.454 -72.084,0 -137.343,29.217 -184.581,76.454 -47.237,47.238 -76.455,112.497 -76.455,184.581 0,72.083 29.218,137.343 76.455,184.58 47.238,47.237 112.497,76.455 184.581,76.455 72.083,0 137.343,-29.218 184.58,-76.455 47.237,-47.237 76.455,-112.497 76.455,-184.58 0,-72.084 -29.218,-137.343 -76.455,-184.581z"/>
</g>
<circle class="fil1 str0" cx="517.231" cy="517.26" r="100.656"/>
<path class="fil1 str0" d="M213.398 645.876c-54.056,-27.029 -41.008,-69.901 -48.444,-92.065 -3.228,-9.623 -41.293,134.779 56.413,170.477 18.411,6.727 36.767,13.855 70.319,8.264 25.978,-4.33 61.512,-22.368 72.238,-53.613 12.934,-37.676 6.05,-56.363 -16.318,-82.46 -8.188,-9.553 -35.416,-37.28 -89.472,-20.504 -33.759,19.875 -36.584,43.161 -44.736,69.901z"/>
<path class="fil1 str0" d="M561.667 188.198c52.09,-14.249 81.039,-0.564 103.952,4.079 9.948,2.016 -96.076,-103.15 -175.843,-36.384 -15.032,12.581 -30.384,24.914 -42.317,56.766 -9.24,24.663 -11.386,64.455 10.311,89.367 26.161,30.039 45.787,33.421 79.571,27.098 12.367,-2.315 49.994,-12.031 62.493,-67.234 -0.333,-39.173 -19.087,-53.263 -38.167,-73.692z"/>
<path class="fil1 str0" d="M786.104 714.481c3.621,60.329 -40.031,70.465 -55.509,87.986 -6.72,7.607 137.369,-31.629 119.431,-134.093 -3.38,-19.308 -6.384,-38.769 -28.003,-65.031 -16.738,-20.332 -50.127,-42.086 -82.549,-35.753 -39.095,7.637 -51.837,22.942 -63.253,55.361 -4.179,11.868 -14.578,49.312 26.979,87.737 34.092,19.299 55.671,10.103 82.904,3.793z"/>
</g>
</svg>
</div>
<div class="obstacle">
<img src="assets/kakashi.png" alt="">
</div>
<div class="grass"></div>
<div class="ground"></div>
</div>
<script src='rollin.js' defer></script>
</body>
</html>

You can try to put the -listener- above the -jump- function and remove:
-- window.addEventListener("click", jump()); --

lazy line painter as a pre-loader

I have an animated SVG using lazy line painter that I would like to use as a pre-loader. How can I review the page content (with a transition or a simple fade-in) after the line animation is completed?
So the concept is this: on landing LOAD SVG animation when COMPLETE transition into page content.
<!-- Include lazylinepainter -->
<script src="https://cdn.jsdelivr.net/npm/ lazy-line-painter#1.9.4/lib/lazy-line-painter-1.9.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.15.0/d3.min.js"></script>
<script type="text/javascript">
(function(){
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
let el = document.querySelector('#markin2');
let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":2.2,"strokeOpacity":1,"strokeColor":"#fff"});
myAnimation.paint();
}
}
})();
</script>
<svg version="1.1" id="markin2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="314.094px" height="314.765px" viewBox="0 0 314.094 314.765" enable-background="new 0 0 314.094 314.765" xml:space="preserve" data-llp-composed="true" class="lazy-line-painter">
<circle fill="none" stroke-miterlimit="10" cx="157.828" cy="157.404" r="150.813" data-llp-id="markin2-0" data-llp-duration="2920" data-llp-delay="0" fill-opacity="1" data-llp-stroke-join="" data-llp-stroke-cap=""/>
<path id="#markin2" class=".markin2" fill="none" values="#000" stroke-miterlimit="10" d="M18.482,132.273
c1.019-4.147,1.774-8.38,3.099-12.427c7.988-24.405,24.611-39.774,49.798-44.317c26.582-4.795,47.878,5.064,64.031,26.525
c2.094,2.782,2.112,4.714-0.499,7.183c-3.496,3.306-6.592,7.035-10.095,10.837c-2.364-3.506-4.425-7.039-6.94-10.211
C104.843,93.427,81.91,88.297,62.884,97.426c-18.967,9.102-29.097,30.539-24.289,51.399c4.649,20.172,22.977,34.573,43.973,34.571
c13.572-0.002,24.751-5.104,33.906-15.18c22.505-24.771,44.815-49.735,67.885-73.971c17.361-18.239,39.164-24.295,63.441-17.369
c24.221,6.91,39.282,23.516,45.102,48.006c3.184,13.398,1.887,26.967-2.008,39.987c-1.322,4.422-5.715,7.985-8.899,11.78
c-10.94,13.035-24.349,21.988-41.47,24.67c-19.018,2.979-35.86-2.006-50.829-13.86c-1.162-0.92-2.304-1.863-4.361-3.533
c0,2.48-0.004,4.178,0,5.873c0.045,22.324,0.009,44.646,0.213,66.967c0.037,3.956-0.771,7.102-3.877,9.674
c-1.653,1.37-3.243,2.961-4.409,4.748c-2.552,3.912-5.974,4.865-10.668,3.637c0-6.688,0.01-13.473-0.003-20.258
c-0.041-22.488,0.024-44.979-0.227-67.465c-0.056-4.814,1.073-8.443,4.622-11.914c6.039-5.908,11.509-12.398,17.593-19.056
c4.06,8.205,9.36,14.85,16.678,19.736c15.507,10.355,35.698,10.172,51.128-0.49c15.202-10.506,22.338-29.406,18.086-47.903
c-3.979-17.298-19.188-31.573-37.106-33.975c-15.415-2.066-29.11,2.093-39.841,13.781c-21.17,23.057-42.371,46.092-63.192,69.461
c-14.497,16.271-31.743,25.988-53.992,25.404c-30.517-0.799-56.945-24.744-60.94-55.143c-0.123-0.934-0.602-1.821-0.915-2.73
C18.482,140.272,18.482,136.272,18.482,132.273z" data-llp-id="markin2-1" data-llp-duration="2920" data-llp-delay="0" fill-opacity="1" data-llp-stroke-join="" data-llp-stroke-cap=""/>
</svg>
CSS
body, html {
background: #000;
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#markin2 {
width: 40vw;
height: 40vh;
position: relative;
overflow: visible;
}
.markin2 {
animation: stroke_fill 4s linear forwards, changeColor 2s, forwards;
stroke-dasharray: 1538.2169189453125px;
stroke-dashoffset: 0;
}
#keyframes stroke_fill {
0% {
fill: white;
}
50% {
fill: white;
stroke-dashoffset: 0;
}
100% {
fill: black;
stroke-dashoffset: 0;
}
}
#keyframes changeColor {
from{ fill: rgba(0,0,0,0);}
to{ fill: rgba(0,0,0,1)}
}
Here is the SVG animation example:
https://codepen.io/cpawl/pen/zYvEqYq

The Lazy Line Painter library has some custom events built in to which you can listen. Such as the complete event whenever you animation has been completed. Whenever that event is called, hide the SVG.
In the example below I've added this event listener but also wrapped your animation in a Promise. This way you can wait for it to finish and then do something. And also another Promise which listens for the load event on the document. So that this is an actual page loader and the SVG would not disappear before the page would be loaded.
In your HTML first load the SVG and then the JS you see below here. Inside the then callback function either delete your SVG, or set a class to the body which hides the class. Anyway you see fit.
body,
html {
background: #000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#markin2 {
width: 20vw;
height: 20vh;
position: relative;
overflow: visible;
}
.markin2 {
animation: stroke_fill 4s linear forwards, changeColor 2s, forwards;
stroke-dasharray: 1538.2169189453125px;
stroke-dashoffset: 0;
}
#keyframes stroke_fill {
0% {
fill: white;
}
50% {
fill: white;
stroke-dashoffset: 0;
}
100% {
fill: black;
stroke-dashoffset: 0;
}
}
#keyframes changeColor {
from {
fill: rgba(0, 0, 0, 0);
}
to {
fill: rgba(0, 0, 0, 1);
}
}
.hsvg {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
background: #000000;
z-index: 999;
transition: 2000ms ease-in-out;
transition-property: opacity, visibility;
}
body.is-loaded .hsvg {
opacity: 0;
visibility: hidden;
}
.main-content {
color: #fff;
}
<script src="https://cdn.jsdelivr.net/npm/lazy-line-painter#1.9.6/lib/lazy-line-painter-1.9.6.min.js"></script>
<!-- Include lazylinepainter -->
<div class="hsvg">
<svg version="1.1" id="markin2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="314.094px" height="314.765px" viewBox="0 0 314.094 314.765" enable-background="new 0 0 314.094 314.765" xml:space="preserve"
data-llp-composed="true" class="lazy-line-painter">
<circle fill="none" stroke-miterlimit="10" cx="157.828" cy="157.404" r="150.813" data-llp-id="markin2-0" data-llp-duration="2920" data-llp-delay="0" fill-opacity="1" data-llp-stroke-join="" data-llp-stroke-cap=""/>
<path id="#markin2" class=".markin2" fill="none" values="#000" stroke-miterlimit="10" d="M18.482,132.273
c1.019-4.147,1.774-8.38,3.099-12.427c7.988-24.405,24.611-39.774,49.798-44.317c26.582-4.795,47.878,5.064,64.031,26.525
c2.094,2.782,2.112,4.714-0.499,7.183c-3.496,3.306-6.592,7.035-10.095,10.837c-2.364-3.506-4.425-7.039-6.94-10.211
C104.843,93.427,81.91,88.297,62.884,97.426c-18.967,9.102-29.097,30.539-24.289,51.399c4.649,20.172,22.977,34.573,43.973,34.571
c13.572-0.002,24.751-5.104,33.906-15.18c22.505-24.771,44.815-49.735,67.885-73.971c17.361-18.239,39.164-24.295,63.441-17.369
c24.221,6.91,39.282,23.516,45.102,48.006c3.184,13.398,1.887,26.967-2.008,39.987c-1.322,4.422-5.715,7.985-8.899,11.78
c-10.94,13.035-24.349,21.988-41.47,24.67c-19.018,2.979-35.86-2.006-50.829-13.86c-1.162-0.92-2.304-1.863-4.361-3.533
c0,2.48-0.004,4.178,0,5.873c0.045,22.324,0.009,44.646,0.213,66.967c0.037,3.956-0.771,7.102-3.877,9.674
c-1.653,1.37-3.243,2.961-4.409,4.748c-2.552,3.912-5.974,4.865-10.668,3.637c0-6.688,0.01-13.473-0.003-20.258
c-0.041-22.488,0.024-44.979-0.227-67.465c-0.056-4.814,1.073-8.443,4.622-11.914c6.039-5.908,11.509-12.398,17.593-19.056
c4.06,8.205,9.36,14.85,16.678,19.736c15.507,10.355,35.698,10.172,51.128-0.49c15.202-10.506,22.338-29.406,18.086-47.903
c-3.979-17.298-19.188-31.573-37.106-33.975c-15.415-2.066-29.11,2.093-39.841,13.781c-21.17,23.057-42.371,46.092-63.192,69.461
c-14.497,16.271-31.743,25.988-53.992,25.404c-30.517-0.799-56.945-24.744-60.94-55.143c-0.123-0.934-0.602-1.821-0.915-2.73
C18.482,140.272,18.482,136.272,18.482,132.273z" data-llp-id="markin2-1" data-llp-duration="2920" data-llp-delay="0" fill-opacity="1" data-llp-stroke-join="" data-llp-stroke-cap=""/>
</svg>
</div>
<script>
const pageLoad = new Promise(resolve => {
window.addEventListener('load', resolve);
});
const animationLoad = new Promise(resolve => {
let el = document.querySelector('#markin2');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 2.2,
"strokeOpacity": 1,
"strokeColor": "#fff"
});
myAnimation.paint();
myAnimation.on('complete', resolve);
});
Promise.all([pageLoad, animationLoad]).then(function() {
document.body.classList.add('is-loaded');
console.log('Load event fired and animation done');
});
</script>
<div class="main-content">
<h1>IS THIS THING ON?</h1>
</div>

build semi circle progress bar with round corners and shadow in java script and CSS

I searched a lot and finding nothing on it. I want to make a progress bar with round corners.progress bar need to have shadow. All I did as of now is here :
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt( val.text(), 10);
$({p:0}).animate({p:per}, {
duration: 3000,
easing: "swing",
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
});
});
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>100</span>%
</div>
I want to make corners round and having shadow. below given image represent what actually i want. Shadow is missing because i don't know to draw. :
I have tried Progressbar.js also, but I don't have much knowledge about SVG. Any answer would be appreciated.

#jaromanda for suggestion of learning SVG.
Yes is looks very hard to achieve from border-radius. So i looked into SVG and find it pretty handy. Here is my snippet:
// progressbar.js#1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.SemiCircle(container, {
strokeWidth: 10,
color: 'red',
trailColor: '#eee',
trailWidth: 10,
easing: 'easeInOut',
duration: 1400,
svgStyle: null,
text: {
value: '',
alignToBottom: false
},
// Set default step function for all animate calls
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
var value = Math.round(bar.value() * 100);
if (value === 0) {
bar.setText('');
} else {
bar.setText(value+"%");
}
bar.text.style.color = state.color;
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(0.45); // Number from 0.0 to 1.0
#container {
width: 200px;
height: 100px;
}
svg {
height: 120px;
width: 200px;
fill: none;
stroke: red;
stroke-width: 10;
stroke-linecap: round;
-webkit-filter: drop-shadow( -3px -2px 5px gray );
filter: drop-shadow( -3px -2px 5px gray );
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

I want to suggest some stupid but quick solution since you're already using position: absolute. You can add background color to the circles when your animation starts.
html:
<div class="progress-bar">
<div class="left"></div>
<div class="right"><div class="back"></div></div>
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>0</span>%
</div>
css:
/** all your css here **/
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float: left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
transform: rotate(45deg);
}
.progress-bar > .left {
position: absolute;
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
left: 0;
bottom: -4px;
overflow: hidden;
}
.progress-bar > .right {
position: absolute;
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
right: 0;
bottom: -4px;
overflow: hidden;
}
.back {
width: 15px;
height: 15px;
background: gray;
position: absolute;
}
jquery:
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt( val.text(), 10);
var $right = $('.right');
var $back = $('.back');
$({p:0}).animate({p:per}, {
duration: 3000,
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
}).delay( 200 );
if (per == 100) {
$back.delay( 2600 ).animate({'top': '18px'}, 200 );
}
if (per == 0) {
$('.left').css('background', 'gray');
}
});
https://jsfiddle.net/y86qs0a9/7/

Same as the answers above, I found it much easier to implement using SVG instead of pure CSS.
However I couldn't find a single simplistic implementation using only HTML and CSS, or at least with no libraries, no external scripts or no dependencies. I found that given the math that needs to be calculated to make the SVG transformations to represent the percentage, JS needs to be included (if someone knows how to achieve this with only HTML and CSS I'd love to learn how). But what the JS script does is not long or complex enough to justify the overhead of adding yet another dependency to my codebase.
The JS calculations are pretty easy once you read through. You need to calculate the coordinate for the end point of the gauge in the coordinate system of the SVG. so basic trig.
Most of the CSS is not even needed and I added just to style it and to make it pretty. You can add shadow or gradients same as you could with any HTML pure shape.
Here is the codePen https://codepen.io/naticaceres/pen/QWQeyGX
You can easily tinker with this code to achieve any kind of shape of circular gauge (full circle, lower half of the semi-circle, or any variation including ellipsis).
Hope this is helpful.
// # Thanks to mxle for the first rounded corner CSS only solution https://stackoverflow.com/a/42478006/4709712
// # Thanks to Aniket Naik for the styling and the basic idea and implementation https://codepen.io/naikus/pen/BzZoLL
// - Aniket Naik has a library, linked to that codepen you should check out if you don't want to copy-paste or implement yourself
// the arc radius in the meter-value needs to stay the same, and must always be x=y, not lower than the possible circle that can connect the two points (otherwise the ratio is not preserved and the curvature doesn't match the background path).
// to style the gauge, make it bigger or smaller, play with its parent element and transform scale. don't edit width and height of SVG directly
function percentageInRadians(percentage) {
return percentage * (Math.PI / 100);
}
function setGaugeValue(gaugeElement, percentage, color) {
const gaugeRadius = 65;
const startingY = 70;
const startingX = 10;
const zeroBasedY = gaugeRadius * Math.sin(percentageInRadians(percentage));
const y = -zeroBasedY + startingY;
const zeroBasedX = gaugeRadius * Math.cos(percentageInRadians(percentage));
const x = -zeroBasedX + gaugeRadius + startingX;
// # uncomment this to log the calculations of the coordinates for the final point of the gauge value path.
//console.log(
// `percentage: ${percentage}, zeroBasedY: ${zeroBasedY}, y: ${y}, zeroBasedX: ${zeroBasedX}, x: ${x}`
//);
gaugeElement.innerHTML = `<path d="M ${startingX} ${startingY}
A ${gaugeRadius} ${gaugeRadius} 0 0 1 ${x} ${y}
" stroke="${color}" stroke-width="10" stroke-linecap="round" />`;
}
percentageChangedEvent = (gauge, newPercentage, color) => {
const percentage =
newPercentage > 100 ? 100 : newPercentage < 0 ? 0 : newPercentage;
setGaugeValue(gauge, percentage, color);
};
function initialGaugeSetup(gaugeElementId, inputId, meterColor, initialValue) {
const gaugeElement = document.getElementById(gaugeElementId);
setGaugeValue(gaugeElement, 0, meterColor);
const inputElement = document.getElementById(inputId);
inputElement.value = initialValue;
setGaugeValue(gaugeElement, initialValue, meterColor);
inputElement.addEventListener("change", (event) =>
percentageChangedEvent(gaugeElement, event.target.value, meterColor)
);
}
// Gauge Initial Config
initialGaugeSetup(
"svg-graph-meter-value",
"svg-gauge-percentage-2",
"rgb(227 127 215)",
40
);
body {
background-color: rgba(0, 0, 0, 0.8);
color: #999;
font-family: Hevletica, sans-serif;
}
/* SVG Path implementation */
.svg-container {
margin: 20px auto 10px;
height: 80px;
width: 150px;
}
svg {
fill: transparent;
}
.input-percent-container {
text-align: center;
}
.input-percent-container>* {
display: inline;
}
input {
text-align: right;
width: 40px;
margin: auto;
background-color: #5d5d5d;
color: white;
border-radius: 6px;
border: black;
}
<div class="svg-container">
<svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 70
A 65 65 0 1 1 140 70
" stroke="grey" stroke-width="3" stroke-linecap="round" />
<g id="svg-graph-meter-value">
</g>
</svg>
</div>
<div class="input-percent-container"><input id="svg-gauge-percentage-2" /><span>%<span/></div>

Categories

Resources