-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
1 lines (1 loc) · 24.1 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"><title>ztext.js | 3D Typography for the Web</title><meta content="Easy to implement, 3D typography for any website and every font." name="description"><link href="img/icon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="img/icon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="img/icon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"><link color="#09101d" href="img/icon/safari-pinned-tab.svg" rel="mask-icon"><link href="css/style.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cousine&family=Nunito:wght@400;600;800&display=swap" rel="stylesheet"></head><body><header class="header" id="header"><div class="wrapper"><div class="container"><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">z</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">t</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">e</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">x</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">t</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">.</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">j</span></h1><h1><span data-z="true" data-z-depth=".15em" data-z-event="pointer" data-z-eventrotation="40deg">s</span></h1><h2>Easy to implement, 3D typography for the web. Works with every font.</h2><div class="share twitter-shade"><a class="twitter-share-button" data-related="bennettfeely" data-show-count="false" data-size="large" data-text="ztext.js - Easy to implement, 3D typography for the web. Works with every font." data-url="https://bennettfeely.com/ztext" href="https://twitter.com/share?ref_src=twsrc%5Etfw">Tweet</a><script async="true" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script></div><div class="share facebook-share"><div class="fb-like" data-action="like" data-href="https://bennettfeely.com/ztext" data-layout="button_count" data-share="true" data-size="large" data-width=""></div></div></div></div></header><main class="main"><div class="wrapper"><div class="split"><div class="split-item"><section class="download" id="download"><div class="container"><h2>Download</h2><a class="button split-item" href="js/ztext.min.js"><strong>ztext.min.js </strong>— Minified 3.8 kb</a><div class="repo" data-repo="bennettfeely/ztext"><div class="repo-box"><div class="repo-title"><a class="repo-author" href="https://github.com/bennettfeely">bennettfeely</a> / <a class="repo-name" href="https://github.com/bennettfeely/ztext">ztext</a></div><a class="repo-meta" href="https://github.com/bennettfeely/ztext"><span class="repo-stars">1 star</span><span class="repo-license">MIT</span><span class="repo-updated">1 week ago</span></a></div></div></div></section></div><div class="split-item"><section class="tips" id="tips"><div class="container"><h2>Pay what you want</h2><div class="tip-jar-wrapper"><label class="tip-jar">$<input class="tip" inputmode="numeric" placeholder="10" type="text"></label><a class="tip-button button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=9YZX9KJVUDWXW&currency_code=USD&amount=10&item_name=ztext.js&source=url"><img alt="PayPal" height="33" src="img/paypal.svg" width="124"><strong>Tip</strong></a></div><p>Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others.</p></div></section></div></div></div><section class="initialization" id="initialization"><div class="wrapper"><div class="container"><div class="split"><div class="split-item shrink"><h2>Initialization</h2><p>There are three ways to use ztext. Pick whichever method is easiest for you.</p><ol><li><a href="#html-init">HTML attributes</a></li><li><a href="#js-init">Vanilla JavaScript</a></li><li><a href="#react-init">React JS</a> <span class="new">New</span></li><li><a href="#vue-init">Vue JS</a> <span class="new">New</span></li></ol></div><div class="split-item"><h3>How it works</h3><p>Ztext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <code class="light"><span class="red-code"><canvas></span></code> or forcing users to download multi-megabyte WebGL libraries. With ztext, content remains fully selectable and accessible.</p><p><a class="external" href="https://caniuse.com/#feat=transforms3d">Over 98% of users</a> use a web browser that supports the CSS <code class="light"><span class="yellow-code">transform-style</span></code> property, which ztext needs to work. In unsupported browsers, ztext gracefully turns off.</p></div></div></div></div></section><section class="html-init" id="html-init"><div class="wrapper"><div class="container"><h3>Initialize with HTML attributes</h3><p>Include <code class="light"><span class="green-code">ztext.min.js</span></code> on your site before the closing <code class="light"><span class="red-code"></body></span></code> tag on your HTML file. For example:</p><pre class="dark"><h3>HTML</h3><code><span class="red-code"><script src</span>=<span class="green-code">"/path/to/ztext.min.js"</span><span class="red-code">></script></span></code></pre><p>With this method, ztext will look for any HTML element with the <code class="light"><span class="yellow-code">data-z</span></code> or <code class="light"><span class="yellow-code">data-z</span>=<span class="green-code">"true"</span></code> attribute and will apply a 3D effect to it.</p><p>See <a href="#options">Options</a> the below for a full list of possible <code class="light"><span class="yellow-code">data-z-XXXXX</span></code> attributes.</p><div class="split"><div class="split-item"><pre class="dark"><h3>HTML</h3><code id="copy-0"><span class="red-code"><h1></span><br> <span class="red-code"><span</span> <span class="yellow-code">data-z</span> <span class="yellow-code">data-z-layers</span>=<span class="green-code">"3"</span> <span class="yellow-code">data-z-depth</span>=<span class="green-code">"0.5em"</span><span class="red-code">></span>A<span class="red-code"></span></span><br><span class="red-code"></h1></span></code><div class="menu menu-0 right-align"></div></pre><p>Structurally, ztext turns that code into this:</p><pre class="light"><code><span><h1 data-z data-z-layers="3" data-z-depth="0.5em"><br> <span class="z-text"><br> <span class="z-layers"><br> <span class="z-layer">A</span><br> <span class="z-layer">A</span><br> <span class="z-layer">A</span><br> </span><br> </span><br></h1></span></code></pre></div><div class="split-item"><div class="preview"><h3>Preview</h3><h1 class="x-large" data-z="true" data-z-depth=".5em" data-z-layers="3">A</h1></div><p>The duplicate layers are visible to users but ztext makes them hidden from screen readers and other forms of user interaction.</p></div></div></div></div></section><section class="js-init" id="js-init"><div class="wrapper"><div class="container"><h3>Initialize with JavaScript</h3><p>Use ztext with vanilla JS with <code class="light"><span class="purple-code">new</span> <span class="red-code">Ztextify</span><span class="blue-code">(</span><span class="green-code">selector</span>, <span class="blue-code">{})</span></code>. This constructor accepts two arguments: the HTML element selector and an options object.</p><pre class="dark"><h3>JS</h3><code id="copy-1"><span class="purple-code">var</span> <span class="red-code">ztxt</span> <span class="blue-code">=</span> <span class="purple-code">new</span> <span class="red-code">Ztextify</span><span class="blue-code">(</span><span class="green-code">".hero-text"</span><span class="blue-code">,</span> <span class="blue-code">{</span><br> <span class="blue-code">depth</span>: <span class="green-code">"30px"</span>,<br> <span class="blue-code">layers</span>: <span class="orange-code">8</span>,<br> <span class="blue-code">fade</span>: <span class="orange-code">true</span>,<br> <span class="blue-code">direction</span>: <span class="green-code">"forwards"</span>,<br> <span class="blue-code">event</span>: <span class="green-code">"pointer"</span>,<br> <span class="blue-code">eventRotation</span>: <span class="green-code">"35deg"</span><br><span class="blue-code">})</span>;<div class="menu menu-1 right-align"></div></code></pre></div></div></section><section class="react-init" id="react-init"><div class="wrapper"><div class="container"><h3>Use with React</h3><div class="split"><div class="split-item"><p>Check out <a href="https://github.com/snettah/react-ztext">react-ztext</a> by Safi Nettah (<a href="https://github.com/snettah">snettah</a>).</p><div class="repo" data-repo="snettah/react-ztext"><div class="repo-box"><div class="repo-title"><a class="repo-author" href="https://github.com/snettah">snettah</a> / <a class="repo-name" href="https://github.com/snettah/react-ztext">react-ztext</a></div><a class="repo-meta" href="https://github.com/snettah/react-ztext"><span class="repo-stars">5 stars</span><span class="repo-license">MIT</span><span class="repo-updated">3 months ago</span></a></div></div></div><div class="split-item"><a class="code-preview" href="https://github.com/snettah/react-ztext"><pre class="dark"><h3>React</h3><code><span class="yellow-code">import</span> <span class="blue-code">React</span> <span class="yellow-code">from</span> <span class="green-code">'react'</span><br><span class="yellow-code">import</span> <span class="blue-code">Ztext</span> <span class="yellow-code">from</span> <span class="green-code">'react-ztext'</span><br><br><span class="yellow-code">const</span> <span class="blue-code">Example</span> = () => (<br> <span class="red-code"><Ztext</span><br> <span class="yellow-code">depth</span>=<span class="green-code">'1rem'</span><br> <span class="yellow-code">direction</span>=<span class="green-code">'both'</span><br> <span class="yellow-code">event</span>=<span class="green-code">'pointer'</span><br> <span class="yellow-code">eventRotation</span>=<span class="green-code">'30deg'</span><br> <span class="yellow-code">eventDirection</span>=<span class="green-code">'default'</span><br> <span class="yellow-code">fade</span>={<span class="orange-code">false</span>}<br> <span class="yellow-code">layers</span>={<span class="orange-code">10</span>}<br> <span class="yellow-code">perspective</span>=<span class="green-code">'500px'</span><br> <span class="red-code">></span><br> <span class="red-code"><span</span> <span class="yellow-code">role</span>=<span class="green-code">'img'</span> <span class="yellow-code">aria-label</span>=<span class="green-code">'emoji'</span><span class="red-code">></span><br> 😂🔥🍔<br> <span class="red-code"></span></span><br> <span class="red-code"></Ztext></span><br>)</code></pre></a></div></div></div></div></section><section class="vue-init" id="vue-init"><div class="wrapper"><div class="container"><h3>Use with Vue</h3><div class="split"><div class="split-item"><p>Check out <a href="https://github.com/snettah/vue-ztext">vue-ztext</a> by <a href="https://github.com/Namchee">Namchee</a>.</p><div class="repo" data-repo="Namchee/vue-ztext"><div class="repo-box"><div class="repo-title"><a class="repo-author" href="https://github.com/Namchee">Namchee</a> / <a class="repo-name" href="https://github.com/Namchee/vue-ztext">vue-ztext</a></div><a class="repo-meta" href="https://github.com/Namchee/vue-ztext"><span class="repo-stars">1 star</span><span class="repo-license">MIT</span><span class="repo-updated">4 weeks ago</span></a></div></div></div><div class="split-item"><a class="code-preview" href="https://github.com/Namchee/vue-ztext"><pre class="dark"><h3>Vue</h3><code><span class="yellow-code">import</span> <span class="blue-code">ZText</span> <span class="yellow-code">from</span> <span class="green-code">'@namchee/vue-ztext';</span><br><br>app.<span class="purple-code">use</span>(<span class="blue-code">ZText</span>);<hr><span class="red-code"><template></span><br> <span class="red-code"><z-text></span><br> Hello World!<br> <span class="red-code"></z-text></span><br><span class="red-code"></template></span></code></pre></a></div></div></div></div></section><section class="styling" id="styling"><div class="wrapper"><div class="container"><h2>Styling</h2><p>Start with this CSS snippet and style ztext any way you want. Ztext works with absolutely any font that works on the web. Plus, it's easy to integrate with CSS animations and transitions.</p><div class="split"><div class="split-item"><pre class="dark"><h3>CSS</h3><code id="copy-2"><span class="red-code">h1</span> {<br> <span class="yellow-code">font</span>: <span class="orange-code">bold</span> <span class="orange-code">5em</span> <span class="green-code">"Georgia"</span>, <span class="orange-code">serif</span>;<br> <span class="yellow-code">color</span>: <span class="aqua-code">#90a4ae</span>;<span class="dot" style="background:#90a4ae"></span><br>}<br><br><span class="red-code">.z-text</span> {<br> <span class="gray-code">/* Tip: Apply CSS transforms here */</span><br> <span class="gray-code">/* rotateX() == up/down */</span><br> <span class="gray-code">/* rotateY() == left/right */</span><br> <span class="yellow-code">transform</span>: <span class="blue-code">rotateX</span>(<span class="orange-code">15deg</span>) <span class="blue-code">rotateY</span>(<span class="orange-code">-30deg</span>);<br>}<br><br><span class="red-code">.z-layer:not(:first-child)</span> {<br> <span class="yellow-code">color</span>: <span class="aqua-code">#455a64</span>;<span class="dot" style="background:#455a64"></span><br>}<div class="menu menu-2 right-align"></div></code></pre></div><div class="split-item preview styling-example-primary"><h1 class="large" data-z="true">CSS</h1></div></div></div></div></section><section class="more" id="more"><div class="wrapper"><div class="container"><h2>But wait, there's more!</h2><p>Ztext isn't just for text. Add a third dimension to SVG, emojis, and images.</p><div class="split"><div class="split-item"><div class="toggle-menu"><button class="toggle" data-show="svg">SVG</button><button class="toggle" data-show="img">Image</button><button class="toggle is-on" data-show="emoji">Emoji</button></div><pre class="dark"><h3>HTML</h3><div class="tab svg-code-tab"><code id="copy-3"><span class="red-code"><span <span class="yellow-code">data-z</span></span> <span class="yellow-code">data-z-layers</span>=<span class="green-code">"15"</span> <span class="yellow-code">data-z-depth</span>=<span class="green-code">"50px"</span><span class="red-code">></span><br> <span class="red-code"><svg</span> <span class="yellow-code">xmlns</span>=<span class="green-code">"http://www.w3.org/2000/svg"</span> <span class="yellow-code">viewBox</span>=<span class="green-code">"0 0 400 400"</span> <span class="yellow-code">width</span>=<span class="green-code">"200"</span> <span class="yellow-code">height</span>=<span class="green-code">"200"</span><span class="red-code">></span><br> <span class="red-code"><path</span> <span class="yellow-code">d</span>=<span class="green-code">"..."</span><span><span class="red-code"> /></span><br> <span class="red-code"></svg></span><br><span class="red-code"></span></span><div class="menu menu-3 right-align"></div></span></code></div><div class="tab img-code-tab"><code id="copy-4"><span class="red-code"><span <span class="yellow-code">data-z</span> <span class="yellow-code">data-z-depth</span>=<span class="green-code">"40px"</span>></span><br> <span class="red-code"><img</span> <span class="yellow-code">width</span>=<span class="green-code">"150"</span> <span class="yellow-code">height</span>=<span class="green-code">"120"</span> <span class="yellow-code">src</span>=<span class="green-code">"images/grace.jpg"</span> <span class="yellow-code">alt</span>=<span class="green-code">"Photo of Grace"</span><span class="red-code">></span><br><span class="red-code"><span></span><div class="menu menu-4 right-align"></div></code></div><div class="tab emoji-code-tab is-on"><code id="copy-5"><span class="red-code"><span</span> <span class="yellow-code">data-z</span> <span class="yellow-code">data-z-layers</span>=<span class="green-code">"20"</span> <span class="yellow-code">data-z-depth</span>=<span class="green-code">"50px"</span><span class="red-code">></span>😂🔥🍔<span class="red-code"></span></span><div class="menu menu-5 right-align"></div></code></div></pre><pre class="dark"><h3>CSS</h3><code><span class="red-code">.z-layer:not(:first-child)</span> {<br> <span class="yellow-code">filter</span>: <span class="blue-code">brightness</span>(<span class="orange-code">0.7</span>);<br>}</code></pre></div><div class="split-item preview"><button class="button pause">Pause</button><span class="svg-code-example" data-z="true" data-z-depth="50px" data-z-layers="15"><svg height="200" viewBox="0 0 400 400" width="200" xmlns="http://www.w3.org/2000/svg"><path d="M153.62 301.59c94.34 0 145.94-78.16 145.94-145.94 0-2.22 0-4.43-.15-6.63A104.36 104.36 0 00325 122.47a102.38 102.38 0 01-29.46 8.07 51.47 51.47 0 0022.55-28.37 102.79 102.79 0 01-32.57 12.45 51.34 51.34 0 00-87.41 46.78A145.62 145.62 0 0192.4 107.81a51.33 51.33 0 0015.88 68.47A50.91 50.91 0 0185 169.86v.65a51.31 51.31 0 0041.15 50.28 51.21 51.21 0 01-23.16.88 51.35 51.35 0 0047.92 35.62 102.92 102.92 0 01-63.7 22 104.41 104.41 0 01-12.21-.74 145.21 145.21 0 0078.62 23" fill="none" stroke="#1da1f2" stroke-width="10px"></path></svg></span><span class="img-code-example" data-z="true" data-z-depth="40px"><img alt="Photo of Grace" height="400" src="img/grace.jpg" width="500"></span><span class="emoji-code-example" data-z="true" data-z-depth="50px" data-z-layers="20">😂🔥🍔</span></div></div></div></div></section><section class="options" id="options"><div class="wrapper"><div class="container option depth-option" id="depth"><h2>Options</h2><div class="split"><div class="split-item preview"><h1 class="medium" data-z="true">1rem</h1><h1 class="medium" data-z="true" data-z-depth="60px" data-z-layers="30">60px</h1></div><div class="split-item"><h3><a href="#depth">depth</a><small class="param">CSS length value</small></h3><p>The depth of the effect on the z-axis. Accepts any valid CSS length value except for %. Default: <code class="light">"1rem"</code></p><div class="menu menu-6"></div></div></div></div><div class="container option layers-option" id="layers"><div class="split"><div class="split-item preview"><h1 class="large" data-z="true" data-z-depth=".25em" data-z-layers="10">10</h1><h1 class="large" data-z="true" data-z-depth=".5em" data-z-layers="2">2</h1></div><div class="split-item"><h3><a href="#layers">layers</a><small class="param">integer</small></h3><p>Number of layers that make up the effect. Default: <code class="light">10</code></p><div class="menu menu-7"></div></div></div></div><div class="container option perspective-option" id="perspective"><div class="split"><div class="split-item preview vertical"><h1 class="small" data-z="true" data-z-perspective="none">none</h1><h1 class="small" data-z="true" data-z-perspective="100px">80px</h1><h1 class="small" data-z="true" data-z-perspective="500px">500px</h1></div><div class="split-item"><h3><a href="#perspective">perspective</a><small class="param">CSS length value, "none", or "inherit"</small></h3><p>Set distance from the viewer. Default: <code class="light">500px</code></p><div class="menu menu-8"></div></div></div></div><div class="container option fade-option" id="fade"><div class="split"><div class="split-item preview"><h1 class="large" data-z="true" data-z-depth=".25em" data-z-fade="true" data-z-layers="10">true</h1></div><div class="split-item"><h3><a href="#fade">fade</a><small class="param">boolean</small></h3><p>Make the text fade away. Default: <code class="light">false</code></p><div class="menu menu-9"></div></div></div></div><div class="container option direction-option" id="direction"><div class="split"><div class="split-item preview vertical"><h1 class="small" data-z="true" data-z-depth=".5em">both</h1><h1 class="small" data-z="true" data-z-depth=".5em" data-z-direction="backwards">backwards</h1><h1 class="small" data-z="true" data-z-depth=".5em" data-z-direction="forwards">forwards</h1></div><div class="split-item"><h3><a href="#direction">direction</a><small class="param">"both" | "backwards" | "forwards"</small></h3><p>The direction the effect is to be applied. Default: <code class="light">"both"</code></p><div class="menu menu-10"></div></div></div></div><div class="container option event-option" id="event"><div class="split"><div class="split-item preview vertical static"><h1 class="medium" data-z="true" data-z-event="none">none</h1><h1 class="medium" data-z="true" data-z-event="pointer">pointer</h1><h1 class="medium" data-z="true" data-z-event="scroll">scroll</h1></div><div class="split-item"><h3><a href="#event">event</a><small class="param">"none" | "pointer" | "scroll" | "scrollX" | "scrollY"</small></h3><p>Control text rotation with JavaScript. Default: <code class="light">"none"</code></p><p>This does not override rotations applied with CSS to <code class="light">.z-text</code>. It will add to those rotations. This allows you to set a start rotation with CSS.</p><p><code class="light">"pointer"</code> rotates text in response to the <code>mousemove</code> and <code>touchmove</code> events.</p><p><code class="light">"scroll"</code> rotates text toward the center of the viewport.</p><p><code class="light">"scrollX"</code> rotates text toward the horizontal center of the viewport.</p><p><code class="light">"scrollY"</code> rotates text toward the vertical center of the viewport.</p><div class="menu menu-11"></div></div></div></div><div class="container option event-rotation-option" id="eventRotation"><div class="split"><div class="split-item preview static"><h1 class="small" data-z="true" data-z-event="pointer" data-z-eventrotation="20deg">10deg</h1><h1 class="small" data-z="true" data-z-event="pointer" data-z-eventrotation="60deg">60deg</h1></div><div class="split-item"><h3><a href="#eventRotation">eventRotation</a><small class="param">CSS rotation value</small></h3><p>With the <code class="light">event</code> option enabled, set the maximum rotation to be applied. Default: <code class="light">"30deg"</code></p><div class="menu menu-12"></div></div></div></div><div class="container option event-direction-option" id="eventDirection"><div class="split"><div class="split-item preview static vertical"><h1 class="medium" data-z="true" data-z-event="pointer">default</h1><h1 class="medium" data-z="true" data-z-event="pointer" data-z-eventdirection="reverse">reverse</h1></div><div class="split-item"><h3><a href="#eventRotationDirection">eventDirection</a><small class="param">"default" | "reverse"</small></h3><p>With the <code class="light">event</code> option enabled, choose whether the rotation faces toward the target point (default) or away from it (reverse). Default: <code class="light">"default"</code></p><div class="menu menu-13"></div></div></div></div></div></section></main><footer class="footer"><div class="wrapper"><div class="container">© 2020 Bennett Feely (<a href="https://twitter.com/bennettfeely">@bennettfeely</a>)</div></div></footer><div id="fb-root"></div><script async="true" crossorigin="anonymous" defer="true" nonce="PHc3kpRj" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0&appId=261257780581807"></script><script src="js/ztext.min.js"></script><script src="js/clipboard.min.js"></script><script src="js/github.min.js"></script><script src="js/demo.min.js"></script><script src="src/js/examples.js"></script></body></html>