fixed ios glitch; removed obsolete code; buy embassy glow

This commit is contained in:
Spencer Flagg
2022-10-18 21:57:28 +02:00
parent e82bc80050
commit df7924c1bc
5 changed files with 58 additions and 52 deletions

View File

@@ -8,7 +8,7 @@ layout: layouts/base.njk
<script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
{# <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script> #}
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
{# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #}

View File

@@ -1,4 +1,4 @@
var bodyRect = document.body.getBoundingClientRect();
//var bodyRect = document.body.getBoundingClientRect();
// TODO: pull these from data js
const sections = [
@@ -99,6 +99,8 @@ gsap.from("#pitch h1, #pitch p", {
},
});
console.log('test');
// gsap.from("#pitch iframe", {
// duration: 0.5,
// opacity: 0,
@@ -147,7 +149,11 @@ const buyTL = gsap
)
.to(
".product__buy-image",
{ opacity: 0.4, ease: "none", duration: 0.25 },
{ //opacity: 0.5,
ease: "none",
duration: 0.25,
filter: "drop-shadow(0 0 2rem rgba(0,0,0,.5)) invert(.9)"
},
0
);

View File

@@ -309,59 +309,59 @@ $pastels: (red, pink) (blue, purple) (green, yellow)
(#a1c4fd, #c2e9fb) (#f6d365, #fda085) (#ffecd2, #fcb69f);
$cube-edge: 4em;
body {
margin: 0;
height: 100vh;
// perspective: 25em; maybe move from main.css?
// background-color: linear-gradient();
}
// body {
// margin: 0;
// height: 100vh;
// // perspective: 25em; maybe move from main.css?
// // background-color: linear-gradient();
// }
[class*="cube"] {
position: absolute;
}
// [class*="cube"] {
// position: absolute;
// }
.cube {
top: 50%;
left: 50%;
transform-style: preserve-3d;
font-size: 8vmin;
animation: ani 8s ease-in-out infinite;
// .cube {
// top: 50%;
// left: 50%;
// transform-style: preserve-3d;
// font-size: 8vmin;
// animation: ani 8s ease-in-out infinite;
&__face {
margin: -0.5 * $cube-edge;
width: $cube-edge;
height: $cube-edge;
backface-visibility: hidden;
--i: 0;
--j: 1;
transform: rotate3d(var(--i), var(--j), 0, var(--a))
translateZ(0.5 * $cube-edge);
// interpolate because Sass apparently has issues with this
background: #{"linear-gradient(var(--ga), var(--gs))"};
// &__face {
// margin: -0.5 * $cube-edge;
// width: $cube-edge;
// height: $cube-edge;
// backface-visibility: hidden;
// --i: 0;
// --j: 1;
// transform: rotate3d(var(--i), var(--j), 0, var(--a))
// translateZ(0.5 * $cube-edge);
// // interpolate because Sass apparently has issues with this
// background: #{"linear-gradient(var(--ga), var(--gs))"};
&:nth-child(n + 5) {
--i: 1;
--j: 0;
}
// &:nth-child(n + 5) {
// --i: 1;
// --j: 0;
// }
@for $f from 0 to 6 {
&:nth-child(#{$f + 1}) {
--a: if($f < 4, $f, pow(-1, $f)) * 90deg;
--ga: random(360) * 1deg;
--gs: nth($pastels, $f + 1);
}
}
}
}
// @for $f from 0 to 6 {
// &:nth-child(#{$f + 1}) {
// --a: if($f < 4, $f, pow(-1, $f)) * 90deg;
// --ga: random(360) * 1deg;
// --gs: nth($pastels, $f + 1);
// }
// }
// }
// }
@keyframes ani {
from {
transform: rotateY(2turn) rotateX(2turn);
}
to {
transform: rotateY(1turn) rotateX(1turn);
}
}
// @keyframes ani {
// from {
// transform: rotateY(2turn) rotateX(2turn);
// }
// to {
// transform: rotateY(1turn) rotateX(1turn);
// }
// }
@media screen and (max-width: 500px) {
#hero{

View File

@@ -49,7 +49,7 @@ section#products {
}
img{
transform: scale(1.05);
opacity: .5;
//opacity: .5;
}
}
}

View File

@@ -94,7 +94,7 @@ layout: layouts/base.njk
<script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
{# <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script> #}
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
{# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #}