diff --git a/css/experience.css b/css/experience.css index 0332b35..d7f1ca5 100644 --- a/css/experience.css +++ b/css/experience.css @@ -91,6 +91,24 @@ 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 */ @media screen and (max-width: 1200px) { #section3 { diff --git a/css/general.css b/css/general.css index 91ddab2..573cfc4 100644 --- a/css/general.css +++ b/css/general.css @@ -68,6 +68,27 @@ h1 { 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 */ @keyframes textfade { from { diff --git a/css/home.css b/css/home.css index 92ea3c2..f0d65ea 100644 --- a/css/home.css +++ b/css/home.css @@ -64,6 +64,7 @@ animation: textfade 1s 0ms 1 forwards; } +/* hover effects */ #homepicture:hover { box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px; transition: all 500ms; diff --git a/js/index.js b/js/index.js index f7fb8d8..e586c51 100644 --- a/js/index.js +++ b/js/index.js @@ -19,6 +19,8 @@ $(function () { if (px) { $("#experienceheader").addClass("animationappear600ms"); $("#experiencecontentcontainer").addClass("animationappear300ms"); + + $("#experiencecontentcontainer").addClass("experiencecontaineranimation"); } });