水下机器人使用_如何使用PixiJS构建水下样式的导航

水下机器人使用

View demo 查看演示 Download Source 下载源

This demo shows one way to make a navigation that is visually distinct, usable and accessible. Using the provided code, you can create all sorts of variations on this theme. I encourage you to try your hand at modifying it in interesting ways.

该演示演示了一种制作视觉上独特，可用和可访问的导航的方法。 使用提供的代码，您可以为此主题创建各种变体。 我鼓励您尝试以有趣的方式进行修改。

The inspiration for this demo comes from the Dribbble shot Holidays Menu by BestServedBold.

该演示的灵感来自BestServedBold的Dribbble Shots Holidays Menu 。

Attention: This tutorial assumes that you are proficient with JavaScript. A familiarity with WebGL and PixiJS is useful, but not required to step through this. If you would like to become more familiar with either fragment shaders or PixiJS, visit: 注意：本教程假定您精通JavaScript。 熟悉WebGL和PixiJS很有用，但并非必须逐步完成。 如果您想对片段着色器或PixiJS更加熟悉，请访问：

• Pixi JS documentation

  Pixi JS文档

• The Book of Shaders

  着色书

工作原理：一般方法(How it works: General Approach)

In this demo we start with a simple HTML navigation:

在此演示中，我们从简单HTML导航开始：

<label class="main-nav-open nav-toggle" for="main-nav-toggle" tabindex="0">
  Menu
</label>
<input type="checkbox" id="main-nav-toggle" />
<nav class="main-nav">
  <ul class="main-nav__fallback">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
    <li>
      <a href="/work">Our Work</a>
    </li>
    <li>
      <a href="/team">The Team</a>
    </li>
    <li>
      <a href="/contact">Contact Us</a>
    </li>
  </ul>
  <label class="main-nav__close nav-toggle" for="main-nav-toggle" tabindex="0" />
</nav>

With this basic setup we end up with a navigation that looks like this:

通过此基本设置，我们最终得到如下导航：

You can view the demo for this step here: Demo of step 1

您可以在此处查看此步骤的演示：步骤1的演示

Given this, we will write some JavaScript that builds out the navigation elements, and builds out a PixiJS application. At that point it looks something like this:

鉴于此，我们将编写一些JavaScript来构建导航元素，并构建一个PixiJS应用程序。 那时看起来像这样：

Once we have this fundamental functionality in place, we can add the really fun stuff: shaders.

一旦有了基本功能，就可以添加真正有趣的东西：着色器。

We’ll be building out two different shaders (or, in PixiJS’s nomenclature: filters). One for the screen as a whole that distorts and blurs the navigation. The second is the shader that renders the buttons on hover or focus.

我们将构建两个不同的着色器(或以PixiJS的名称命名：滤镜)。 整个屏幕的扭曲和模糊导航。 第二个是着色器，用于在悬停或焦点上渲染按钮。

So, with our general approach in place, let’s dive in.

因此，有了我们的一般方法，让我们开始吧。

建立导航类 (Building the navigation class)

For this tutorial, I’m going to focus on the JavaScript. In the source you’ll find the fully commented JavaScript and shader code. I will not be covering the fundamentals of GLSL or fragment shader programming here, for that please see The Book of Shaders.

在本教程中，我将重点介绍JavaScript。 在源代码中，您将找到带有完整注释JavaScript和着色器代码。 我不会在这里介绍GLSL或片段着色器编程的基础知识，为此，请参阅