diff --git a/components/Parallax.vue b/components/Parallax.vue index 620ffb0..fe7ce8b 100644 --- a/components/Parallax.vue +++ b/components/Parallax.vue @@ -39,30 +39,40 @@ const containerStyle: CSSProperties = { const layer0 = computed(() => ({ ...layerBase, - transform: `translateX(${parallax.tilt * 10}px) translateY(${ - parallax.roll * 10 - }px) scale(1)`, + transform: `translateX(${parallax.tilt * 10}px) translateY(${parallax.roll * 10 + }px) scale(1)`, })) const layer1 = computed(() => ({ - ...layerBase, - transform: `translateX(${parallax.tilt * 20}px) translateY(${ - parallax.roll * 20 - }px) scale(1.33)`, + userSelect: 'none', + "-webkit-user-drag": "none", + transform: `translateX(${parallax.tilt * 20}px) translateY(${parallax.roll * 20 + }px) scale(1.33)`, + 'background-image': 'linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%)', + 'background-position': '50% 50%', + 'background-size': '160%', + 'background-blend-mode': 'overlay', + filter: 'brightness(1) contrast(1)', + 'mix-blend-mode': 'color-dodge', + opacity: '1', + position: 'absolute', })) const layer2 = computed(() => ({ - ...layerBase, - transform: `translateX(${parallax.tilt * 30}px) translateY(${ - parallax.roll * 30 - }px) scale(1.33)`, + transform: `translateX(${parallax.tilt * 30}px) translateY(${parallax.roll * 30 + }px) scale(1.33)`, + 'background-image': 'linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)', + opacity: '.1', + filter: 'brightness(.5) contrast(1)', + width: '100%', + height: '100%', + position: 'absolute', })) const layer3 = computed(() => ({ ...layerBase, - transform: `translateX(${parallax.tilt * 40}px) translateY(${ - parallax.roll * 40 - }px) scale(1.33)`, + transform: `translateX(${parallax.tilt * 40}px) translateY(${parallax.roll * 40 + }px) scale(1.33)`, })) const layer4 = layerBase @@ -75,10 +85,9 @@ const cardStyle = computed(() => ({ border: '1px solid #000000', overflow: 'hidden', transition: '.3s ease-out all', - boxShadow: '0 0 20px 0 rgba(255, 255, 255, 0.1)', - transform: `rotateX(${parallax.roll * 20}deg) rotateY(${ - parallax.tilt * 20 - }deg)`, + boxShadow: '-20px -20px 30px -25px #ec9bb6, 20px 20px 30px -25px #ccac6f, -7px -7px 10px -5px #ec9bb6, 7px 7px 10px -5px #ccac6f, 0 0 13px 4px rgba(255,255,255,0.3),0 55px 35px -20px rgba(0, 0, 0, 0.5)', + transform: `rotateX(${parallax.roll * 20}deg) rotateY(${parallax.tilt * 20 + }deg)`, })) @@ -93,15 +102,70 @@ export default {
+