tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add color overlay to animation block

Browse Source
This commit is contained in:
BenjaminToby 2021-05-25 21:49:37 +01:00
parent 84ce11122a
commit 43eaa49ddb
3 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -68,7 +68,10 @@
</div>
<div class="column-50 centered-content" style="perspective:600px;z-index:-1;">
<div class="face-wrapper" id="my-face-wrapper"><div id="my-face"></div></div>
<div class="face-wrapper" id="my-face-wrapper">
<div id="my-face"></div>
<div id="color-overlay"></div>
</div>
</div>
</div>
</section>

19
main.css
View File

@ -205,6 +205,7 @@ section.hero-section {
.hero-content-link {
color: #888;
transition: all .3s ease-out;
border-bottom: 2px solid #aaa;
}
.hero-content-link:hover {
@ -273,7 +274,7 @@ section.hero-section {
border: none;
display: flex;
justify-content: flex-start;
margin-right: 10px;
margin-right: 20px;
}
.linkedin-link:hover {
@ -349,6 +350,16 @@ section.hero-section {
margin: 0;
}
#color-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
left: 0;
transition: all .3s ease-out;
}
@ -420,11 +431,12 @@ section.hero-section {
}
#my-face {
right: -20vw;
}
.face-wrapper {
margin-top: -10vw;
right: -20vw;
}
}
@ -471,16 +483,15 @@ section.hero-section {
}
#my-face {
right: -60vw;
margin-top: 0;
}
.face-wrapper {
top: 0;
right: 0;
width: auto;
height: auto;
margin-top: -65vh;
right: -60vw;
}
}

18
scripts/main.js
View File

@ -46,6 +46,22 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
});
});
document.getElementById("ui-ux-design").addEventListener("mouseover", () => {
document.getElementById("color-overlay").style.backgroundColor = "#A5E6BA";
});
document.getElementById("web-design").addEventListener("mouseover", () => {
document.getElementById("color-overlay").style.backgroundColor = "#5B2A86";
});
document.getElementById("frontend-dev").addEventListener("mouseover", () => {
document.getElementById("color-overlay").style.backgroundColor = "#7785AC";
});
document.getElementById("graphic-design").addEventListener("mouseover", () => {
document.getElementById("color-overlay").style.backgroundColor = "#9AC6C5";
});
//--------------------------------------------------------------------------- Services mouseout
document.querySelectorAll(".hero-content-link").forEach(item => {
@ -55,10 +71,10 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
steadyState();
faceWrapper.style.transform = "none";
document.getElementById("color-overlay").style.backgroundColor = "transparent";
}, 500);
});
});