Javascript

【Javascript】マウスの位置に基づいて3D空間内の要素を回転させるParabox

August 4, 2018

Parabox.jsはマウスの位置に基づいて3D空間内の要素を回転させる視差ライブラリー。

Usage

Including files

  // Using a CDN
  // NOTE: for selecting specific versions (which you should ALWAYS do in production), see the docs on https://www.jsdelivr.com/ 
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.css">
  <script src="https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.js"></script>
  
  // Optionally, if your environment supports ES modules, you can include Parabox.js as a module
  <script type="module">
    import * as parabox from 'https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.es.js';
  </script>

  // Using the built files
  <link rel="stylesheet" type="text/css" href="./parabox/parabox.css">
  
  <script src="./parabox/parabox.js"></script>

HTML Structure

<div class="parabox-container">
    <div class="parabox">
      <h1 class="parabox-shift">Hey there! I seem to stand out.</h1>
      <p>This content appears flat against the card</p>
    </div>
  </div>

Initialization

  <script>
    parabox.init();
  </script>

Options

  1. Magnitude
  2. Height