eff-anim/dist/index.mjs

Librería de efectos y animaciones con React

import{jsx as r}from"react/jsx-runtime";import{useRef as n,useState as t,useEffect as a}from"react";!function(r,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}("/* default effects */\r\n\r\n.eff-left {\r\n  transform: translate3d(100px, 0, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n\r\n}\r\n\r\n.eff-right {\r\n  transform: translate3d(-100px, 0, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-bottom {\r\n  transform: translate3d(0, 100px, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-top {\r\n  transform: translate3d(0, -100px, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n/* default active animations */\r\n\r\n\r\n.eff-left.animation {\r\n  opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n\r\n}\r\n\r\n.eff-right.animation {\r\n opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-bottom.animation {\r\n  opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-top.animation {\r\n  opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n\r\n/* zoom effects */\r\n\r\n\r\n.eff-zoom {\r\n  transform: scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-left {\r\n  transform: translate3d(100px, 0, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-right {\r\n  transform: translate3d(-100px, 0, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-top {\r\n  transform: translate3d(0, -100px, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n.eff-z-bottom {\r\n  transform: translate3d(0, 100px, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n/* zoom active animations */\r\n\r\n\r\n.eff-zoom.animation {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-left.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-right.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-top.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-bottom.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n/* flip effects */\r\n\r\n.eff-flip {\r\n  transform: perspective(2500px) rotateY(-100deg);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-left {\r\n  transform: perspective(2500px) rotateY(-100deg) translateX(100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-right {\r\n  transform: perspective(2500px) rotateY(100deg) translateX(-100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-top {\r\n  transform: perspective(2500px) rotateX(-100deg) translateY(-100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-bottom {\r\n  transform: perspective(2500px) rotateX(100deg) translateY(100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n/* flip active animations */\r\n\r\n.eff-flip.animation {\r\n  transform: perspective(2500px) rotateY(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-left.animation {\r\n  transform: perspective(2500px) rotateY(0) translateX(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-right.animation {\r\n  transform: perspective(2500px) rotateY(0) translateX(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-top.animation {\r\n  transform: perspective(2500px) rotateX(0) translateY(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-bottom.animation {\r\n  transform: perspective(2500px) rotateX(0) translateY(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n");var o=function(o){var s=o.children,i=o.threshold,e=void 0===i?.9:i,f=o.effect,p=void 0===f?"":f,c=n(null),m=t(!1),y=m[0],l=m[1];return a((function(){var r=c.current;if(r){var n=new IntersectionObserver((function(r){var n=r[0];l(n.isIntersecting)}),{threshold:e});return n.observe(r),function(){n.disconnect()}}}),[e]),r("section",{ref:c,className:"content ".concat(p," ").concat(y?"animation":""),children:s})};export{o as ContainerViews};
//# sourceMappingURL=index.mjs.map