p__effect__smoothScroll__index.async.js

"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[9239],{38400:function(B,v,e){e.d(v,{Ee:function(){return b},CA:function(){return L},xv:function(){return m},G7:function(){return R}});var M=e(97857),u=e.n(M),W=e(13769),c=e.n(W),C=e(12444),f=e.n(C),I=e(72004),U=e.n(I),E=e(31996),i=e.n(E),P=e(26037),d=e.n(P),j=e(93967),h=e.n(j),D=e(67294),x=e(31780),k=e(85893),T=["className","children"],L=function(l){i()(n,l);var t=d()(n);function n(){return f()(this,n),t.apply(this,arguments)}return U()(n,[{key:"render",value:function(){var a=this.props,p=a.className,S=a.children,G=c()(a,T);return(0,k.jsxs)("span",u()(u()({className:h()(x.Z.button,p)},G),{},{children:[S,(0,k.jsx)("span",{className:x.Z.bord}),(0,k.jsx)("span",{className:x.Z.bord1})]}))}}]),n}(D.Component),_=e(92497),A=["className"],R=D.forwardRef(function(l,t){var n=l.className,o=c()(l,A);return(0,k.jsx)("div",u()({className:h()(_.Z.view,n),ref:t},o))});R.defaultProps={};var K=e(9783),y=e.n(K),s=["className","type"],m=function(t){var n=t.className,o=t.type,a=c()(t,s);return(0,k.jsx)("span",u()({className:h()(_.Z.text,y()({},_.Z[o||""],!!o),n)},a))};m.defaultProps={};var r=["className","src","size"],O=function(t){var n=t.className,o=t.src,a=t.size,p=c()(t,r);return o?(0,k.jsx)("img",u()({className:h()({},n),src:o,width:a},p)):null};O.defaultProps={};var g=["className","src"],b=D.forwardRef(function(l,t){var n=l.className,o=l.src,a=c()(l,g);return(0,k.jsx)("img",u()({className:h()({},n),src:o},a))});b.defaultProps={}},83006:function(B,v,e){e.d(v,{Z:function(){return R}});var M=e(97857),u=e.n(M),W=e(13769),c=e.n(W),C=e(12444),f=e.n(C),I=e(72004),U=e.n(I),E=e(25098),i=e.n(E),P=e(31996),d=e.n(P),j=e(26037),h=e.n(j),D=e(9783),x=e.n(D),k=e(67294),T=e(39318),L=e(86267),_=e(85893),A=["className","children","initCallback","onScroll"],R=function(K){d()(s,K);var y=h()(s);function s(){var m;f()(this,s);for(var r=arguments.length,O=new Array(r),g=0;g<r;g++)O[g]=arguments[g];return m=y.call.apply(y,[this].concat(O)),x()(i()(m),"scroll",void 0),x()(i()(m),"subscribeScroll",function(){var b=m.props.onScroll;b&&m.scroll.on("scroll",function(l){b(l)})}),m}return U()(s,[{key:"didMount",value:function(){var r=this;this.scroll=new L.ZP({el:document.querySelector("[data-scroll-container]"),smooth:!0,lerp:.05,multiplier:.4}),this.scroll.stop(),setTimeout(function(){r.scroll.update(),r.subscribeScroll(),console.log("this.props.initCallback?",r.props.initCallback),r.props.initCallback&&r.props.initCallback(r.scroll)},200)}},{key:"didHide",value:function(){}},{key:"willUnmount",value:function(){this.scroll.destroy()}},{key:"render",value:function(){var r=this.props,O=r.className,g=r.children,b=r.initCallback,l=r.onScroll,t=c()(r,A);return(0,_.jsx)("div",u()(u()({"data-scroll-container":!0,className:O},t),{},{children:g}))}}]),s}(T.Z)},22803:function(B,v,e){e.r(v),e.d(v,{default:function(){return m}});var M=e(97857),u=e.n(M),W=e(15009),c=e.n(W),C=e(99289),f=e.n(C),I=e(12444),U=e.n(I),E=e(72004),i=e.n(E),P=e(25098),d=e.n(P),j=e(31996),h=e.n(j),D=e(26037),x=e.n(D),k=e(9783),T=e.n(k),L=e(39318),_=e(38400),A=e(22237),R=e(83006),K=e(6767),y=e.n(K),s=e(85893),m=function(O){h()(b,O);var g=x()(b);function b(){var l;U()(this,b);for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return l=g.call.apply(g,[this].concat(n)),T()(d()(l),"state",{}),T()(d()(l),"scrollRef",void 0),T()(d()(l),"randomColor",function(a){return"hsl(106deg "+(a*200+30)+"% "+(a*150+40)+"%)"}),l}return i()(b,[{key:"didShow",value:function(){var l=f()(c()().mark(function n(){return c()().wrap(function(a){for(;;)switch(a.prev=a.next){case 0:case"end":return a.stop()}},n)}));function t(){return l.apply(this,arguments)}return t}()},{key:"didMount",value:function(){var l=f()(c()().mark(function n(){var o=this;return c()().wrap(function(p){for(;;)switch(p.prev=p.next){case 0:setTimeout(function(){o.scrollRef&&o.scrollRef.start()},300);case 1:case"end":return p.stop()}},n)}));function t(){return l.apply(this,arguments)}return t}()},{key:"render",value:function(){var t=this,n=this.state.scrollY,o=[.02,.05,.07,.1,.4];return(0,s.jsxs)(R.Z,{initCallback:function(p){return t.scrollRef=p},style:{background:"#f2f3f4"},onScroll:function(p){t.setState({scrollY:p.scroll.y})},children:[(0,s.jsx)(_.G7,{"data-scroll-section":!0,children:(0,s.jsx)(_.xv,{type:"h2",children:"Smooth Scroll"})}),(0,s.jsx)(_.G7,{"data-scroll-section":!0,style:{position:"relative",zIndex:1},children:(0,s.jsx)(_.G7,{"data-scroll":!0,"data-scroll-speed":"-8",style:{alignItems:"flex-end"},children:(0,s.jsxs)(_.xv,{style:{backgroundColor:y().rgb(155,55,255).lighten(.5)},children:[n," -- scrollY"]})})}),(0,s.jsxs)(_.G7,{"data-scroll-section":!0,children:[(0,s.jsx)(_.xv,{className:this.cx(A.Z.test,A.Z.b),children:"cx\u6D4B\u8BD5"}),(0,s.jsx)(_.xv,{style:{color:y().rgb(155,55,255)},type:"h1",children:"h1"}),(0,s.jsx)(_.xv,{style:{color:y().rgb(155,55,255).lighten(.5)},type:"h2",children:"h2"}),(0,s.jsx)(_.xv,{style:{color:y().rgb(155,55,255).lighten(.2)},type:"h3",children:"h3"}),(0,s.jsx)(_.xv,{style:{color:y().rgb(155,55,255).darken(.5)},type:"h4",children:"h4"}),(0,s.jsx)(_.xv,{style:{color:y().rgb(155,55,255).saturate(.5)},type:"h5",children:"h5"}),(0,s.jsx)(_.xv,{style:{color:y().rgb(155,55,255).desaturate(.5)},type:"h6","data-scroll":!0,children:"h6"}),(0,s.jsx)(_.xv,{children:"p"})]}),(0,s.jsxs)(_.G7,{"data-scroll-section":!0,children:[(0,s.jsx)(_.G7,{style:{height:180,background:"#cde"}}),(0,s.jsx)(_.G7,{style:{height:180,background:"#cad"}}),(0,s.jsx)(_.G7,{style:{height:180,background:"#ca3"}}),(0,s.jsx)(_.G7,{style:{height:180,background:"#cde"},"data-scroll":!0,"data-scroll-speed":"3",children:(0,s.jsx)(_.xv,{children:'\u901F\u5EA63\uFF1A data-scroll-speed="3"'})}),(0,s.jsx)(_.G7,{style:{height:180,background:"#ce9"}}),(0,s.jsx)(_.G7,{style:{height:180,background:"#cad"},"data-scroll":!0,"data-scroll-speed":"2",children:(0,s.jsx)(_.xv,{children:'\u901F\u5EA62\uFF1A data-scroll-speed="2"'})})]}),(0,s.jsxs)(_.G7,{style:{flexDirection:"row"},children:[(0,s.jsxs)(_.G7,{"data-scroll-section":!0,children:[(0,s.jsx)(_.G7,{style:{height:180,background:"#ea9"}}),(0,s.jsx)(_.G7,{style:{flexDirection:"row"},children:o.map(function(a){return(0,s.jsx)(_.G7,{style:{flex:1},"data-scroll":!0,"data-scroll-speed":"2","data-scroll-delay":a,children:(0,s.jsx)(_.G7,{style:u()(u()({},r.rowItem),{},{background:t.randomColor(a)}),children:(0,s.jsxs)(_.xv,{children:["\u5EF6\u8FDF",a,'\uFF1A data-scroll-delay="',a,'"']})})})})})]}),(0,s.jsx)(_.G7,{id:"about-cols",children:(0,s.jsx)(_.G7,{"data-scroll-section":!0,style:{},children:(0,s.jsx)(_.G7,{"data-scroll":!0,"data-scroll-sticky":!0,"data-scroll-target":"#about-cols",children:(0,s.jsx)(_.G7,{style:u()(u()({},r.rowItem),{},{background:"#ecc"}),children:(0,s.jsx)(_.xv,{children:"sticky\uFF1A data-scroll-sticky\uFF08id\u8981\u653E\u5230\u4E00\u4E2A\u6CA1\u6709data-scroll\u7684View\u4E0A\uFF09"})})})})})]}),(0,s.jsx)(_.G7,{"data-scroll-section":!0,style:{position:"relative"},children:(0,s.jsxs)(_.G7,{id:"direction",children:[(0,s.jsx)(_.G7,{style:{position:"relative",transform:"translateX(-40vw) rotate(26deg)"},children:(0,s.jsx)(_.xv,{style:r.bigTxt,"data-scroll":!0,"data-scroll-direction":"horizontal","data-scroll-speed":"6","data-scroll-target":"#direction","data-scroll-delay":"0.08",children:"I'm moving in this direction1"})}),(0,s.jsx)(_.G7,{style:{position:"relative",transform:"rotate(9deg)"},children:(0,s.jsx)(_.xv,{style:r.bigTxt,"data-scroll":!0,"data-scroll-direction":"horizontal","data-scroll-speed":"9","data-scroll-target":"#direction","data-scroll-delay":"0.05",children:"I'm moving in this direction2"})}),(0,s.jsx)(_.G7,{style:{position:"relative",transform:"translateX(-20vw) rotate(-19deg)"},children:(0,s.jsx)(_.xv,{style:r.bigTxt,"data-scroll":!0,"data-scroll-direction":"horizontal","data-scroll-speed":"15","data-scroll-target":"#direction",children:"I'm moving in this direction3"})})]})}),(0,s.jsxs)(_.G7,{"data-scroll-section":!0,children:[(0,s.jsx)(_.G7,{style:{height:380,background:"#e6a"},"data-scroll-direction":"horizontal"}),(0,s.jsx)(_.G7,{style:{height:380,background:"#e79"}}),(0,s.jsx)(_.G7,{style:{height:380,background:"#ec9"}})]})]})}}]),b}(L.Z),r={rowItem:{height:180},bigTxt:{fontSize:100,background:"#000",color:"#fff"}}},75251:function(B,v,e){var M;var u=e(67294),W=Symbol.for("react.element"),c=Symbol.for("react.fragment"),C=Object.prototype.hasOwnProperty,f=u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,I={key:!0,ref:!0,__self:!0,__source:!0};function U(E,i,P){var d,j={},h=null,D=null;P!==void 0&&(h=""+P),i.key!==void 0&&(h=""+i.key),i.ref!==void 0&&(D=i.ref);for(d in i)C.call(i,d)&&!I.hasOwnProperty(d)&&(j[d]=i[d]);if(E&&E.defaultProps)for(d in i=E.defaultProps,i)j[d]===void 0&&(j[d]=i[d]);return{$$typeof:W,type:E,key:h,ref:D,props:j,_owner:f.current}}M=c,v.jsx=U,v.jsxs=U},85893:function(B,v,e){B.exports=e(75251)}}]);