animation in navabar and on experience page

This commit is contained in:
lukas-heiligenbrunner 2020-04-01 10:49:45 +02:00
parent 2966ca55ba
commit e0fd9a10e8
4 changed files with 42 additions and 0 deletions

View File

@ -91,6 +91,24 @@
font-size: large; font-size: large;
} }
/* navbar animation */
.experiencecontaineranimation :nth-child(2){
visibility: hidden;
animation: textfade 500ms 600ms 1 forwards;
}
.experiencecontaineranimation :nth-child(4){
visibility: hidden;
animation: textfade 500ms 700ms 1 forwards;
}
.experiencecontaineranimation :nth-child(6){
visibility: hidden;
animation: textfade 500ms 800ms 1 forwards;
}
.experiencecontaineranimation :nth-child(8){
visibility: hidden;
animation: textfade 500ms 900ms 1 forwards;
}
/* Screen smaller than 600px -- general small width screens */ /* Screen smaller than 600px -- general small width screens */
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#section3 { #section3 {

View File

@ -68,6 +68,27 @@ h1 {
font: bold 15px/1.4 'Open Sans', arial, sans-serif; font: bold 15px/1.4 'Open Sans', arial, sans-serif;
} }
/* navbar animation */
.nav :nth-child(1) a{
visibility: hidden;
animation: textfade 1s 600ms 1 forwards;
}
.nav :nth-child(2) a{
visibility: hidden;
animation: textfade 1s 700ms 1 forwards;
}
.nav :nth-child(3) a{
visibility: hidden;
animation: textfade 1s 800ms 1 forwards;
}
.nav :nth-child(4) a{
visibility: hidden;
animation: textfade 1s 900ms 1 forwards;
}
/* The animation code */ /* The animation code */
@keyframes textfade { @keyframes textfade {
from { from {

View File

@ -64,6 +64,7 @@
animation: textfade 1s 0ms 1 forwards; animation: textfade 1s 0ms 1 forwards;
} }
/* hover effects */
#homepicture:hover { #homepicture:hover {
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px; box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
transition: all 500ms; transition: all 500ms;

View File

@ -19,6 +19,8 @@ $(function () {
if (px) { if (px) {
$("#experienceheader").addClass("animationappear600ms"); $("#experienceheader").addClass("animationappear600ms");
$("#experiencecontentcontainer").addClass("animationappear300ms"); $("#experiencecontentcontainer").addClass("animationappear300ms");
$("#experiencecontentcontainer").addClass("experiencecontaineranimation");
} }
}); });