diff --git a/src/plainui/static/plainui/img/05_Collage/05_collage_1_bust_vr-goggles_L_fullres_ani_V02.webm b/src/plainui/static/plainui/img/05_Collage/05_collage_1_bust_vr-goggles_L_fullres_ani_V02.webm deleted file mode 100644 index c8ee1a7d9e3207e80e6d2dd1199623e4de199abb..0000000000000000000000000000000000000000 Binary files a/src/plainui/static/plainui/img/05_Collage/05_collage_1_bust_vr-goggles_L_fullres_ani_V02.webm and /dev/null differ diff --git a/src/plainui/static/plainui/js/animations.js b/src/plainui/static/plainui/js/animations.js index 46fe4cc31f1fbf081e71ad1e6e07522bd74091d8..6efbbb6f4be5ad688b9d0662d5e8982fdc9ff985 100644 --- a/src/plainui/static/plainui/js/animations.js +++ b/src/plainui/static/plainui/js/animations.js @@ -30,9 +30,9 @@ initParallax(() => { layer05L.classList.add(`collage-l-` + Math.floor((Math.random() * 6) + 1)); } - const setTransform = (el, factor) => { + const setTransform = (el, factor, scale) => { if (el) { - el.style.transform = "translate3D(0," + window.scrollY * factor + "px,0)" + el.style.transform = `translate3D(0,${window.scrollY * factor}px,0) scale(${scale})`; } } const setBgPosition = (el, factor) => { @@ -47,10 +47,10 @@ initParallax(() => { if (lastPos !== window.scrollY) { setBgPosition(layer01, -1.2); - setTransform(layer05R, -0.1); - setTransform(layer05L, -0.2); + setTransform(layer05R, -0.1, "1"); + setTransform(layer05L, -0.2, "1"); setBgPosition(layer06, 0.5); - setTransform(layer10, -0.02); + setTransform(layer10, -0.02, "1"); // Move mask for header if (main) { main.style.maskPositionY = window.scrollY - 170 + "px"; diff --git a/src/plainui/styles/_util-classes.scss b/src/plainui/styles/_util-classes.scss index ed77369d09ae7ee4ec6992c6326dab5e7a80d1e6..7a4d426bae9863c0fa9e1b162b9064b0787f7495 100644 --- a/src/plainui/styles/_util-classes.scss +++ b/src/plainui/styles/_util-classes.scss @@ -623,73 +623,110 @@ h6, &-L { display: block; content: ""; - height: 450px; - width: 600px; position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center; + transform: scale(1); } &-R { - right: -300px; top: 28vh; &.collage-r-1 { background-image: url('img/05_Collage/05_collage_1_bust_vr-goggles_R_halfres_ani_V01.gif'); + height: 250px; + width: 250px; + right: -125px; } &.collage-r-2 { background-image: url('img/05_Collage/05_Collage_2_robothand_nib_R_halfres_ani_V01.gif'); + height: 200px; + width: 300px; + right: -150px; } &.collage-r-3 { background-image: url('img/05_Collage/05_Collage_3_baby_ethernet_R_halfres_ani_V01.gif'); + height: 300px; + width: 300px; + right: -150px; } &.collage-r-4 { background-image: url('img/05_Collage/05_Collage_4_sunflower_bitcoin_R_halfres_ani_V01.gif'); + height: 450px; + width: 350px; + right: -150px; } &.collage-r-5 { background-image: url('img/05_Collage/05_Collage_7_bird_cam_R_halfres_ani_V01.gif'); + height: 300px; + width: 600px; + right: -300px; } &.collage-r-6 { background-image: url('img/05_Collage/05_Collage_6_astronaut_c64_R_halfres_ani_V01.gif'); + height: 500px; + width: 300px; + right: -150px; } &.collage-r-7 { background-image: url('img/05_Collage/05_Collage_5_smartphone_tunnel_halfres_ani_V01.gif'); + height: 350px; + width: 250px; + right: -125px; } } &-L { - left: -300px; + left: 0; bottom: -1vh; &.collage-l-1 { background-image: url('img/05_Collage/05_Collage_5_smartphone_tunnel_halfres_ani_V01.gif'); + height: 350px; + width: 250px; + left: -125px; } &.collage-l-2 { background-image: url('img/05_Collage/05_collage_1_bust_vr-goggles_L_halfres_ani_V01.gif'); + height: 250px; + width: 250px; + left: -125px; } &.collage-l-3 { background-image: url('img/05_Collage/05_Collage_2_robothand_nib_L_halfres_ani_V01.gif'); + height: 200px; + width: 300px; + left: -150px; } &.collage-l-4 { background-image: url('img/05_Collage/05_Collage_3_baby_ethernet_L_halfres_ani_V01.gif'); + height: 300px; + width: 300px; + left: -150px; } &.collage-l-5 { background-image: url('img/05_Collage/05_Collage_6_astronaut_c64_L_halfres_ani_V01.gif'); + height: 500px; + width: 300px; + left: -150px; } &.collage-l-6 { background-image: url('img/05_Collage/05_Collage_7_bird_cam_L_halfres_ani_V01.gif'); + height: 300px; + width: 600px; + left: -300px; } } }