nodality 1.0.0-beta.6 → 1.0.0-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/appleanim.cjs.js +1 -0
- package/dist/appleanim.esm.js +1 -0
- package/dist/bundle.umd.js +1 -1
- package/dist/designer.cjs.js +1 -1
- package/dist/designer.esm.js +1 -1
- package/dist/finalresult.esm.js +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/stacker.cjs.js +1 -0
- package/dist/stacker.esm.js +1 -0
- package/dist/transformanim.cjs.js +1 -0
- package/dist/transformanim.esm.js +1 -0
- package/layout/index.js +12 -1
- package/lib/AppleAnim.js +789 -0
- package/lib/Stacker.js +36 -0
- package/lib/TransformAnim.js +514 -0
- package/lib/designer.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{"use strict";var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{KeyframeAnim:()=>i});class i{constructor(t){return this.fromFirstImageFlag=!1,this.flag=0,this.flagValue=t.flagValue,this.data=t,this.mask=t.mask,this.maskData=t.maskData,this.id=t.id,this.halfHeight=t.halfHeight,void 0===this.data.type?this.type="default":this.type=this.data.type,this.stickData=t.stickData,this.targetHeight=this.data.targetHeight,this.html=document.body,this.res=document.createElement("div"),this.res.setAttribute("id",this.data.id),this.res.style.border="1px solid green",this.res.style.width="100%",this.res.style.display="grid",this.res.style.position="sticky",this.res.style.top=0,this.res.style.alignSelf="flex-start",this.res.style.justifyContent="center",this.res.style.alignItems="center",this.data.added||(this.res.style.marginTop=this.data.noAddedDistance),this.frameCount=100,this.lastScrollTop=window.scrollY,this.setupTopElement(),this.scrollFunction(),window.addEventListener("scroll",(()=>{this.scrollFunction()})),this.preloadImages(),this}marginTop(t){return this.res.style.marginTop=t,this}toCode(){return[""]}scrollFunction=()=>{void 0===this.flagValue&&(this.flagValue=0);const t=(this.html.scrollTop-this.flagValue)/(this.html.scrollHeight-window.innerHeight)*16;var e=Math.min(this.frameCount-1,Math.ceil(t*this.frameCount));isNaN(e)&&(e=1),e<0&&(e=0),this.data.limit?e<this.data.limit&&requestAnimationFrame((()=>this.updateImage(e+1))):requestAnimationFrame((()=>this.updateImage(e+1))),window.matchMedia("(max-device-width: 415px)")};currentFrame=t=>`${this.data.path}${t.toString().padStart(4,"0")}.${this.data.extension}`;preloadImages=()=>{for(let t=1;t<this.frameCount;t++)new Image,this.img.src=this.currentFrame(t)};updateImage=t=>{this.img.src=this.currentFrame(t)};drawImageProp(t,e,i,s,a,n,r,h){2===arguments.length&&(i=s=0,a=t.canvas.width,n=t.canvas.height),(r="number"==typeof r?r:.5)<0&&(r=0),(h="number"==typeof h?h:.5)<0&&(h=0),r>1&&(r=1),h>1&&(h=1);var l,o,d,c,m=e.width,g=e.height,p=Math.min(a/m,n/g),y=m*p,w=g*p,u=1;y<a&&(u=a/y),Math.abs(u-1)<1e-14&&w<n&&(u=n/w),(l=(m-(d=m/((y*=u)/a)))*r)<0&&(l=0),(o=(g-(c=g/((w*=u)/n)))*h)<0&&(o=0),d>m&&(d=m),c>g&&(c=g),console.log("WEIRD"),console.log(e),console.log(o),console.log(d),t.drawImage(e,l,o,d,c,i,s,a,n)}maska(t){return window.addEventListener("scroll",(()=>{this.innerMask(t)})),this}innerMask(t){if(t){let e=smartRange(window.scrollY,{min:t.start,max:t.end},{min:0,max:7}),i=smartRange(window.scrollY,{min:t.start,max:t.end},{min:37,max:37});this.res.style.clipPath=`inset(${e}% ${e}% round 0 0 ${i}px ${i}px)`}}setupTopElement(){console.warn("TOP INIT");let t=document.createElement("canvas");if(t.style.gridArea="1/1",t.zIndex=1,t.style.display="grid",t.style.gridTemplate="1fr/1fr",t.style.justifyContent="center",t.style.alignItems="center",t.style.marginLeft="auto",t.style.marginRight="auto",this.context=t.getContext("2d"),this.context.canvas.width=window.innerWidth,this.context.canvas.height=1.2*window.innerHeight,this.img=new Image,this.img.onload=()=>{this.data.halfHeight?this.drawImageProp(this.context,this.img,0,0,window.innerWidth,window.innerHeight/2):this.drawImageProp(this.context,this.img,0,0,window.innerWidth,1.2*window.innerHeight)},window.addEventListener("resize",(()=>{this.context.canvas.width=window.innerWidth,this.context.canvas.height=1.2*window.innerHeight,this.drawImageProp(this.context,this.img,0,0,window.innerWidth,1.2*window.innerHeight)})),this.res.appendChild(t),this.data.text){let t=document.createElement("div");t.style.gridArea="1/1";let i=this.data.text.render();if(this.h2a=i,t.appendChild(i),t.setAttribute("id","rem"),this.data.hasRect){let t=document.createElement("div");t.style.width="30px",t.style.height="30px",t.style.backgroundColor="orange"}else for(var e=0;e<this.res.children.length;e++)"rem"===this.res.children[e].id&&this.res.removeChild(this.res.children[e]);this.res.appendChild(t)}this.lastScrollTop=0,this.count=1,this.isUp=!1,this.done=!1,this.fireOnce=!0,this.dec=1,this.tdec=1,this.atdec=0,this.textOpacity=1,this.res.children[this.res.children.length-1].children[0].style.opacity=0,this.data.text&&window.addEventListener("scroll",(()=>{this.h2a.style.backgroundColor="rgba(0, 0, 0, 0.8)",this.h2a.style.opacity=1})),window.addEventListener("scroll",(t=>{if(this.data.stickyData&&this.data.stickyData.top){const t=this.data.stickyData.top;this.data.uncomment&&(window.scrollY>t?(wrapDiv.style.background="pink",wrapDiv.style.position="relative",wrapDiv.style.top=t):(wrapDiv.style.background="orange",wrapDiv.style.top=0,wrapDiv.style.position="fixed"))}let e=window.scrollY||document.documentElement.scrollTop;if(e>this.lastScrollTop?this.isUp=!1:this.isUp=!0,this.lastScrollTop=e<=0?0:e,this.isUp&&this.textOpacity<.98&&(this.textOpacity+=.01),!1===this.isUp&&this.textOpacity>.02&&(this.textOpacity-=.01),this.data.mask){let t=this.res,e=smartRange(window.scrollY,{min:this.data.maskData.start,max:this.data.maskData.end},{min:0,max:7});if(t.style.clipPath=`inset(${e}% ${e}% round 20px)`,!this.hasH2){let e=document.createElement("div");e.style.background="#ecf0f1",e.style.width="86%",e.style.marginLeft="7%",e.style.borderRadius="1rem",this.hasH2=!0,e.appendChild(this.data.newSection.render()),t.parentElement.appendChild(e)}}this.data.targetHeight}))}setLazyText(t){return this.lazyText=t,window.addEventListener("scroll",(()=>{let t=smartRange(window.scrollY,{min:this.lazyText.start,max:this.lazyText.end},{min:0,max:200}),e=smartRange(window.scrollY,{min:this.lazyText.start,max:this.lazyText.end},{min:0,max:1});for(var i=0;i<this.h2a.children[0].children.length;i++)console.log("P"),this.h2a.children[0].children[i].style.transform=`matrix(1, 0, 0, 1, 0, -${t})`,this.h2a.children[0].children[i].style.opacity=""+(e-.2*i)})),this}setProps(t){return t.targetHeight&&(this.data.targetHeight=t.targetHeight),t.flagValue&&(this.flagValue=t.flagValue),this}fixedToRelative(t){this.data.uncomment=t}toSticky(){return this.res.style.position="sticky",this.res.style.top="0",this}setOpacityRange(t){return this.data.opacityRange=t.opacityRange,this.data.scaleRange=t.scaleRange,window.addEventListener("scroll",(()=>{let t=smartRange(window.scrollY,{min:this.data.opacityRange.start,max:this.data.opacityRange.end},{min:0,max:1});this.h2a.style.opacity=t;let e=smartRange(window.scrollY,{min:this.data.scaleRange.start,max:this.data.scaleRange.end},{min:3,max:1});window.matchMedia("(max-device-width: 415px)").matches||(this.h2a.children[0].style.transform=`scale(${e})`)})),this}stick(t){return t?(t.offset&&(null!=this.data.stickyData?this.data.stickyData.top=t.offset:this.data.stickyData={top:t.offset}),t.value?this.makeSticky():this.noSticky(),this):(this.makeSticky(),this)}to100vh(){this.res.style.height="100vh"}makeSticky(){return this.res.style.position="sticky",this.res.style.top=0,this}noSticky(){return this.res.style.position="",this}toOpacity(t){this.res.style.opacity=`${t}`}render(t){if(!t)return this.res;document.querySelector(t).appendChild(this.res)}}module.exports=e})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{_:()=>i});class i{constructor(t){return this.fromFirstImageFlag=!1,this.flag=0,this.flagValue=t.flagValue,this.data=t,this.mask=t.mask,this.maskData=t.maskData,this.id=t.id,this.halfHeight=t.halfHeight,void 0===this.data.type?this.type="default":this.type=this.data.type,this.stickData=t.stickData,this.targetHeight=this.data.targetHeight,this.html=document.body,this.res=document.createElement("div"),this.res.setAttribute("id",this.data.id),this.res.style.border="1px solid green",this.res.style.width="100%",this.res.style.display="grid",this.res.style.position="sticky",this.res.style.top=0,this.res.style.alignSelf="flex-start",this.res.style.justifyContent="center",this.res.style.alignItems="center",this.data.added||(this.res.style.marginTop=this.data.noAddedDistance),this.frameCount=100,this.lastScrollTop=window.scrollY,this.setupTopElement(),this.scrollFunction(),window.addEventListener("scroll",(()=>{this.scrollFunction()})),this.preloadImages(),this}marginTop(t){return this.res.style.marginTop=t,this}toCode(){return[""]}scrollFunction=()=>{void 0===this.flagValue&&(this.flagValue=0);const t=(this.html.scrollTop-this.flagValue)/(this.html.scrollHeight-window.innerHeight)*16;var e=Math.min(this.frameCount-1,Math.ceil(t*this.frameCount));isNaN(e)&&(e=1),e<0&&(e=0),this.data.limit?e<this.data.limit&&requestAnimationFrame((()=>this.updateImage(e+1))):requestAnimationFrame((()=>this.updateImage(e+1))),window.matchMedia("(max-device-width: 415px)")};currentFrame=t=>`${this.data.path}${t.toString().padStart(4,"0")}.${this.data.extension}`;preloadImages=()=>{for(let t=1;t<this.frameCount;t++)new Image,this.img.src=this.currentFrame(t)};updateImage=t=>{this.img.src=this.currentFrame(t)};drawImageProp(t,e,i,s,a,n,r,h){2===arguments.length&&(i=s=0,a=t.canvas.width,n=t.canvas.height),(r="number"==typeof r?r:.5)<0&&(r=0),(h="number"==typeof h?h:.5)<0&&(h=0),r>1&&(r=1),h>1&&(h=1);var l,o,d,c,m=e.width,g=e.height,p=Math.min(a/m,n/g),y=m*p,w=g*p,u=1;y<a&&(u=a/y),Math.abs(u-1)<1e-14&&w<n&&(u=n/w),(l=(m-(d=m/((y*=u)/a)))*r)<0&&(l=0),(o=(g-(c=g/((w*=u)/n)))*h)<0&&(o=0),d>m&&(d=m),c>g&&(c=g),console.log("WEIRD"),console.log(e),console.log(o),console.log(d),t.drawImage(e,l,o,d,c,i,s,a,n)}maska(t){return window.addEventListener("scroll",(()=>{this.innerMask(t)})),this}innerMask(t){if(t){let e=smartRange(window.scrollY,{min:t.start,max:t.end},{min:0,max:7}),i=smartRange(window.scrollY,{min:t.start,max:t.end},{min:37,max:37});this.res.style.clipPath=`inset(${e}% ${e}% round 0 0 ${i}px ${i}px)`}}setupTopElement(){console.warn("TOP INIT");let t=document.createElement("canvas");if(t.style.gridArea="1/1",t.zIndex=1,t.style.display="grid",t.style.gridTemplate="1fr/1fr",t.style.justifyContent="center",t.style.alignItems="center",t.style.marginLeft="auto",t.style.marginRight="auto",this.context=t.getContext("2d"),this.context.canvas.width=window.innerWidth,this.context.canvas.height=1.2*window.innerHeight,this.img=new Image,this.img.onload=()=>{this.data.halfHeight?this.drawImageProp(this.context,this.img,0,0,window.innerWidth,window.innerHeight/2):this.drawImageProp(this.context,this.img,0,0,window.innerWidth,1.2*window.innerHeight)},window.addEventListener("resize",(()=>{this.context.canvas.width=window.innerWidth,this.context.canvas.height=1.2*window.innerHeight,this.drawImageProp(this.context,this.img,0,0,window.innerWidth,1.2*window.innerHeight)})),this.res.appendChild(t),this.data.text){let t=document.createElement("div");t.style.gridArea="1/1";let i=this.data.text.render();if(this.h2a=i,t.appendChild(i),t.setAttribute("id","rem"),this.data.hasRect){let t=document.createElement("div");t.style.width="30px",t.style.height="30px",t.style.backgroundColor="orange"}else for(var e=0;e<this.res.children.length;e++)"rem"===this.res.children[e].id&&this.res.removeChild(this.res.children[e]);this.res.appendChild(t)}this.lastScrollTop=0,this.count=1,this.isUp=!1,this.done=!1,this.fireOnce=!0,this.dec=1,this.tdec=1,this.atdec=0,this.textOpacity=1,this.res.children[this.res.children.length-1].children[0].style.opacity=0,this.data.text&&window.addEventListener("scroll",(()=>{this.h2a.style.backgroundColor="rgba(0, 0, 0, 0.8)",this.h2a.style.opacity=1})),window.addEventListener("scroll",(t=>{if(this.data.stickyData&&this.data.stickyData.top){const t=this.data.stickyData.top;this.data.uncomment&&(window.scrollY>t?(wrapDiv.style.background="pink",wrapDiv.style.position="relative",wrapDiv.style.top=t):(wrapDiv.style.background="orange",wrapDiv.style.top=0,wrapDiv.style.position="fixed"))}let e=window.scrollY||document.documentElement.scrollTop;if(e>this.lastScrollTop?this.isUp=!1:this.isUp=!0,this.lastScrollTop=e<=0?0:e,this.isUp&&this.textOpacity<.98&&(this.textOpacity+=.01),!1===this.isUp&&this.textOpacity>.02&&(this.textOpacity-=.01),this.data.mask){let t=this.res,e=smartRange(window.scrollY,{min:this.data.maskData.start,max:this.data.maskData.end},{min:0,max:7});if(t.style.clipPath=`inset(${e}% ${e}% round 20px)`,!this.hasH2){let e=document.createElement("div");e.style.background="#ecf0f1",e.style.width="86%",e.style.marginLeft="7%",e.style.borderRadius="1rem",this.hasH2=!0,e.appendChild(this.data.newSection.render()),t.parentElement.appendChild(e)}}this.data.targetHeight}))}setLazyText(t){return this.lazyText=t,window.addEventListener("scroll",(()=>{let t=smartRange(window.scrollY,{min:this.lazyText.start,max:this.lazyText.end},{min:0,max:200}),e=smartRange(window.scrollY,{min:this.lazyText.start,max:this.lazyText.end},{min:0,max:1});for(var i=0;i<this.h2a.children[0].children.length;i++)console.log("P"),this.h2a.children[0].children[i].style.transform=`matrix(1, 0, 0, 1, 0, -${t})`,this.h2a.children[0].children[i].style.opacity=""+(e-.2*i)})),this}setProps(t){return t.targetHeight&&(this.data.targetHeight=t.targetHeight),t.flagValue&&(this.flagValue=t.flagValue),this}fixedToRelative(t){this.data.uncomment=t}toSticky(){return this.res.style.position="sticky",this.res.style.top="0",this}setOpacityRange(t){return this.data.opacityRange=t.opacityRange,this.data.scaleRange=t.scaleRange,window.addEventListener("scroll",(()=>{let t=smartRange(window.scrollY,{min:this.data.opacityRange.start,max:this.data.opacityRange.end},{min:0,max:1});this.h2a.style.opacity=t;let e=smartRange(window.scrollY,{min:this.data.scaleRange.start,max:this.data.scaleRange.end},{min:3,max:1});window.matchMedia("(max-device-width: 415px)").matches||(this.h2a.children[0].style.transform=`scale(${e})`)})),this}stick(t){return t?(t.offset&&(null!=this.data.stickyData?this.data.stickyData.top=t.offset:this.data.stickyData={top:t.offset}),t.value?this.makeSticky():this.noSticky(),this):(this.makeSticky(),this)}to100vh(){this.res.style.height="100vh"}makeSticky(){return this.res.style.position="sticky",this.res.style.top=0,this}noSticky(){return this.res.style.position="",this}toOpacity(t){this.res.style.opacity=`${t}`}render(t){if(!t)return this.res;document.querySelector(t).appendChild(this.res)}}var s=e._;export{s as KeyframeAnim};
|