diff --git a/index.html b/index.html index 98adfb0..2785b23 100644 --- a/index.html +++ b/index.html @@ -164,7 +164,7 @@

Transcend Barriers Animation

-

This animations was made for web view. I used aftereffects and bodymoving to accomplish this: +

This animation was made for web view. I used aftereffects and bodymoving to accomplish this: the result? High definition svg anmimation that looks crisp on any resolution and maintains a relatively light weight

diff --git a/main.css b/main.css index 3637ea6..0e29acf 100644 --- a/main.css +++ b/main.css @@ -233,7 +233,7 @@ h1, h2, h3, h4 { h1 { - font-size: 46px; + font-size: 62px; } h2 { @@ -243,7 +243,7 @@ h2 { } h3 { - + font-size: 30px; } h4 { @@ -851,6 +851,7 @@ input:focus { .portfolio-entry > div:nth-of-type(1) p { font-size: 16px; + opacity: .8; } .portfolio-entry > div:nth-of-type(2) { @@ -1742,6 +1743,10 @@ input:focus { @media (max-width: 430px) { + h3 { + font-size: 24px; + } + p { font-size: 16px; } diff --git a/scripts/main.js b/scripts/main.js index b59cb92..a14d188 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -433,7 +433,7 @@ function contentsObserverAboutImg(entries) { myImageAbout.animate([ { transform: "none", - opacity: .5, + opacity: .8, } ], { duration: 1300, @@ -656,40 +656,41 @@ const myImage = ben(".benjamin-image-block"); const myImageOverlay = ben(".benjamin-image-block-overlay"); const serviceDisplay = ben(".service-display-block"); -uiuxDesignerLinks.forEach(item => { +if (window.innerWidth > 1200) { - item.addEventListener("mouseover", function (event) { + uiuxDesignerLinks.forEach(item => { - // myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)"; - myImage.style.width = "20vw"; + item.addEventListener("mouseover", function (event) { - if (event.target.className == "uiux-designer-link") { + // myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)"; + myImage.style.width = "20vw"; - myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)"; + if (event.target.className == "uiux-designer-link") { - } else if (event.target.className == "web-designer-link") { + myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)"; - myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)"; - // serviceDisplay.style.width = "300px"; - // serviceDisplay.style.height = "250px"; + } else if (event.target.className == "web-designer-link") { - } else if (event.target.className == "frontend-designer-link") { + myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)"; + // serviceDisplay.style.width = "300px"; + // serviceDisplay.style.height = "250px"; - myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)"; - // serviceDisplay.style.width = "250px"; - // serviceDisplay.style.height = "200px"; + } else if (event.target.className == "frontend-designer-link") { - } else if (event.target.className == "graphic-motion-designer-link") { + myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)"; + // serviceDisplay.style.width = "250px"; + // serviceDisplay.style.height = "200px"; - myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)"; - // serviceDisplay.style.width = "200px"; - // serviceDisplay.style.height = "200px"; + } else if (event.target.className == "graphic-motion-designer-link") { - } + myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)"; + // serviceDisplay.style.width = "200px"; + // serviceDisplay.style.height = "200px"; + } + }); }); - -}); +} uiuxDesignerLinks.forEach(item => {