<section id="my-skills" class="my-skills">
<h2>Technologie</h2>
<!-- HTML -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-HTML"></div></div>
</div>
<!-- CSS -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-CSS"></div></div>
</div>
<!-- JAVASCRIPT -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-JS"></div></div>
</div>
<!-- PHP -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-PHP"></div></div>
</div>
<!-- MySQL -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-MySQL"></div></div>
</div>
<!-- RWD -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-RWD"></div></div>
</div>
<!-- SVG -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-SVG"></div></div>
</div>
<!-- CSS GRID -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-CSSGRID"></div></div>
</div>
<!-- FLEX BOX -->
<div class="cnt-skill">
<div class="cnt-skill-txt">HTML</div>
<div class="prog-skill"><div id="color-FlexBOX"></div></div>
</div>
</section>
:root
{
--colorHTML: #CC6600;
--colorCSS: #1c88c7;
--colorJS: #fddc23;
--colorPHP: #777bb3;
--colorMySQL: #3d9400;
--colorRWD: #6cc8c2;
--colorSVG: #494547;
--colorCSSGRID: #8b3ac7;
--colorFlexBOX: #b6f036;
}
.my-skills
{
background-color: white;
height: 135vh;
margin-top: 30vh;
position: sticky;
z-index: 3;
overflow: hidden;
}
.my-skills h2
{
color: #C0AB89;
font-size: 4rem;
text-align: center;
}
.cnt-skill
{
margin: 3.5vh;
width: 300px;
height: 30px;
}
.cnt-skill-txt
{
font-size: 2.25rem;
color: #000;
float: left;
}
.prog-skill
{
width:200px;
height: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
color:#000;
float: right;
}
#color-HTML
{
width: 0%;
background-color: var(--colorHTML);
height: 100%;
animation: progHTML 2s normal forwards;
animation-play-state: paused;
}
#color-CSS
{
width: 0%;
background-color: var(--colorCSS)
height: 100%;
animation: progCSS 2s normal forwards;
animation-play-state: paused;
}
#color-JS
{
width: 0%;
background-color: var(--colorJS)
height: 100%;
animation: progJS 2s normal forwards;
animation-play-state: paused;
}
#color-PHP
{
width: 0%;
background-color: var(--colorPHP)
height: 100%;
animation: progPHP 2s normal forwards;
animation-play-state: paused;
}
#color-MySQL
{
width: 0%;
background-color: var(--colorMySQL)
height: 100%;
animation: progMySQL 2s normal forwards;
animation-play-state: paused;
}
#color-RWD
{
width: 0%;
background-color: var(--colorRWD)
height: 100%;
animation: progRWD 2s normal forwards;
animation-play-state: paused;
}
#color-SVG
{
width: 0%;
background-color: var(--colorSVG)
height: 100%;
animation: progSVG 2s normal forwards;
animation-play-state: paused;
}
#color-CSSGRID
{
width: 0%;
background-color: var(--colorCSSGRID)
height: 100%;
animation: progCSSGRID 2s normal forwards;
animation-play-state: paused;
}
#color-FlexBOX
{
width: 0%;
background-color: var(--colorFlexBOX);
height: 100%;
animation: progFLEX 2s normal forwards;
animation-play-state: paused;
}
@keyframes progHTML
{
from {width: 0%;}
to {width: 70%;}
}
@keyframes progCSS
{
from {width: 0%;}
to {width: 80%;}
}
@keyframes progJS
{
from {width: 0%;}
to {width: 60%;}
}
@keyframes progPHP
{
from {width: 0%;}
to {width: 15%;}
}
@keyframes progMySQL
{
from {width: 0%;}
to {width: 25%;}
}
@keyframes progRWD
{
from {width: 0%;}
to {width: 80%;}
}
@keyframes progSVG
{
from {width: 0%;}
to {width: 30%;}
}
@keyframes progCSSGRID
{
from {width: 0%;}
to {width: 50%;}
}
@keyframes progFLEX
{
from {width: 0%;}
to {width: 40%;}
}
const mySkills = document.querySelector(".my-skills");
const progres1 = document.querySelector("#color-HTML");
const progres2 = document.querySelector("#color-CSS");
const progres3 = document.querySelector("#color-JS");
const progres4 = document.querySelector("#color-PHP");
const progres5 = document.querySelector("#color-MySQL");
const progres6 = document.querySelector("#color-RWD");
const progres7 = document.querySelector("#color-SVG");
const progres8 = document.querySelector("#color-CSSGRID");
const progres9 = document.querySelector("#color-FlexBOX");
mySkills.addEventListener("mouseover",function(){
progres1.style.animationPlayState="running";
progres2.style.animationPlayState="running";
progres3.style.animationPlayState="running";
progres4.style.animationPlayState="running";
progres5.style.animationPlayState="running";
progres6.style.animationPlayState="running";
progres7.style.animationPlayState="running";
progres8.style.animationPlayState="running";
progres9.style.animationPlayState="running";
if(progres1.style.width==="10%"){
progres1.style.animationPlayState="paused";
progres2.style.animationPlayState="paused";
progres3.style.animationPlayState="paused";
progres4.style.animationPlayState="paused";
progres5.style.animationPlayState="paused";
progres6.style.animationPlayState="paused";
progres7.style.animationPlayState="paused";
progres8.style.animationPlayState="paused";
progres9.style.animationPlayState="paused";
}
});
Na wstępie zaznaczam, że jest to robocza wersja ( sporo redundancji ). Wszystko jeszcze leci do poprawki.
Moje pytanie brzmi, dlaczego animuje się tylko 1 i 9 progres ,a reszta nie? Kombinowałem i wychodzi na to ,że key frames nie działa poprawie. W css zakomentowałem animation-play-state:paused; i odłączyłem JS i nadal nie działało, czyli wychodzi na to ,że to nie przez JS .
