pixi实现文字拆散飞行朗读困难效果代码
代码语言:html
所属分类:动画
代码描述:pixi实现文字拆散飞行朗读困难效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> nav { width: 100vw; position: fixed; z-index: 1; } nav ul { display: flex; flex-flow: row nowrap; gap: 1px; } nav ul li { padding: 1rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background: #fffd; } nav ul li:first-of-type { flex: 0 0 auto; } main { width: 100vw; height: 100vh; grid-template-rows: 1rem [sk] 1fr 1rem; grid-template-columns: 1rem [sk] 1fr 1rem; overflow: hidden; display: grid; transition: all 1s; } main #sketch { grid-area: sk; display: grid; place-content: center; overflow: hidden; } main #sketch.stretchByCss canvas { margin: auto; max-height: 100%; max-width: 100%; } body { overflow: hidden; } </style> </head> <body> <nav> </nav> <main> <section class="stretchByCss" id="sketch"></section> </main> <script type="module"> // import * as $ from '//cdn.skypack.dev/pixi.js@6.0.1?min'; import * as $ from '//cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.1/browser/pixi.min.mjs'; const WIDTH = 720; const HEIGHT = WIDTH * 16 / 10; const TEXT = 'dyslexia'; const N_COL = 20; const N_ROW = 20; const STYLE = new $.TextStyle({ fontFamily: 'monospace', fontSize: 64, letterSpacing: 5, fill: 'white', strokeThickness: 5, stroke: 'black' }); // ---- // create app // ---- const app = new $.Application({ width: WIDTH, height: HEIGHT, clearBeforeRender: false, preserveDrawingBuffer: true, }); document.querySelector('#sketch').append(app.view); // ---- // collect texture data // ---- const { frames, baseTextur.........完整代码请登录后点击上方下载按钮下载查看
网友评论0