https://millenniumparade.com/js/pages/text_scroll/page.js

1var TextScrollPage=function(){let e="pagex",i=0,n=0,t=0;const a="\n    varying vec2 vUv;\n    void main() {\n        vUv = uv;\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }",o="\n    highp float;\n    uniform sampler2D tex;\n\n    uniform vec2 resolution;\n    uniform vec2 mouse;\n    uniform float time;\n    uniform float radius;\n    uniform int text_type;\n\n    varying vec2 vUv;\n\n    void main() {\n        vec4 color = texture2D(tex, vUv);\n        vec2 za = vec2(mouse.x, resolution.y - mouse.y);\n        float dist = distance( za.xy ,gl_FragCoord.xy); \n        if (dist < radius) {\n            if (text_type == 1){ // jp\n                gl_FragColor = color;\n            } else { //en\n                discard;\n            }\n        }else{\n            if (text_type == 1){ // jp\n                discard;\n            }else{ //en\n                gl_FragColor = color;\n            }\n        }\n    }\n    ";let l=null,s=null,d=null,v=null,c=null,r=null;function u(){i=document.getElementById(e).offsetHeight,console.log("page_height:",i),n=document.getElementById(e).offsetTop,console.log("page_offset_y:",n)}let f=!1,w=[],m=[];var g=["ARE","YOU","READY","INTO","DREAM"],h=["夢に","入る","準備は","できてる","？"],p=0,x=0,b=0,y=0,_=0,E=0;function T(e,i,n="48px nobel;",t="black"){const l=document.createElement("canvas"),s=l.getContext("2d");if(s){s.font="800 400px nobel";const n=s.measureText(e).width;l.width=n,l.height=400,s.font="800 400px nobel",s.fillStyle="#ffffff",s.textAlign="center",s.textBaseline="middle",s.fillText(e,l.width/2,l.height/2);const t=new c.Texture(l);t.needsUpdate=!0;const d=l.width/l.height,v=new c.PlaneGeometry(d,1),r=window.devicePixelRatio,u=new c.ShaderMaterial({uniforms:{tex:{value:t},resolution:{value:new c.Vector2(window.innerWidth*r,window.innerHeight*r)}

1,mouse:{value:new c.Vector2(0,0)},time:{value:0},radius:{value:400},text_type:{type:"i",value:i}},transparent:!0,vertexShader:a,fragmentShader:o});return{mesh:new c.Mesh(v,u),width:d,height:1}}return{}}return{init:function(i,n,t,a){c=a,r=new c.Group,l=t.global_camera,s=t.global_scene,d=t.global_posteffect_shader,v=t.global_mouse_pos,console.log("text_scroll init"),e=n;var o=document.createElement("div");o.classList.add("page"),o.setAttribute("id",e),o.innerHTML='\n    <div class="view"><span class="nobel_black">aaa ARE</span>下にスクロール</div>\n    <div class="view">bbb</div>\n    <div class="view">ccc</div>\n    <div class="view">ddd</div>\n    <div class="view">aaa</div>\n    <div class="view">bbb</div>\n    <div class="view">ccc</div>\n    <div class="view">ddd</div>\n    <div class="view">aaa</div>\n    <div class="view">bbb</div>\n    <div class="view">ccc</div>\n    <div class="view">ddd</div>\n    <div class="view">aaa</div>\n    <div class="view">bbb</div>\n    <div class="view">ccc</div>\n    <div class="view">ddd</div>\n    <div class="view">aaa</div>\n    <div class="view">bbb</div>\n    <div class="view">ccc</div>\n    <div class="view">ddd</div>\n    <div class="view">aaa</div>\n    <div class="view">bbb</div>\n    <div class="view">ccc</div>\n    <div class="view">ddd</div>',i.appendChild(o),u()},resizePage:u,scrollPage:function(){let e=window.scrollY;t=(e-n)/i,window.scrollY,window.innerHeight;var a=t;a=a>1?1:a;var o=parseInt(_*a);if(o>=0){for(var l=0;l<w.length;l++){if(l<o)(s=w[l]).material.opacity=1;else s&&(s.material.opacity=0)}for(l=0;l<m.length;l++){var s;if(l<o)(s=m[l]).material.opacity=1;else s&&(s.material.opacity=0)}}r.position.y=7.5*t,d.material.uniforms.amount.value=.014*Math.abs(r.position.y)},loadWebGL:function(){if(!f){f=!0,console.log("loadWebGL");for(var e=0;e<g.length;e++){for(var i=g[e],n=0;n<i.length;n++){var t=i[n];const{mesh:e,width:a,height:o}=T(t,0);e&&(e.position.x=p,e.position.y=x,e.text_id=_,e.material.opacity=0,r.add(e),p+=a,w.push(e)),_++}x-=1.5,p=0}for(e=0;e<h.length;e++){for(i=h[e],n=0;n<i.length;n++){t=i[n];const{mesh:e,width:a,height:o}=T(t,1);e&&(e.position.x=b,e.position.y=y,e.text_id_jp=E,e.material.opacity=0,r.add(e),b+=a,m.push(e)),E++}y-=1.5,b=0}s.add(r)}},animate:function(){for(var e=0;e<w.length;e++){var i=w[e];v&&v.x&&v.y&&(i.material.uniforms.mouse.value=new c.Vector2(v.x,v.y))}for(e=0;e<m.length;e++){i=m[e];v&&v.x&&v.y&&(i.material.uniforms.mouse.value=new c.Vector2(v.x,v.y))}}}}();export{TextScrollPage};