Markup Guide¶
Script sources¶
Include script sources in the main html <head> element.
Development (test folder)
1 2 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<script src="js/require.js" data-main="js/entry.js"></script>
|
Production (examples folder)
1 2 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<script src="js/pc3d.min.js"></script>
|
Stylesheet sources¶
Include stylesheet sources in the main html <head> element.
Development (test folder)
1 | <link rel="stylesheet" href="css/pc3d.css">
|
Production (examples folder)
1 | <link rel="stylesheet" href="css/pc3d.min.css">
|
Define app data¶
Create the container element
1 2 3 4 | <div class="rs-container">
<div class="rs-pc3d">
</div>
</div>
|
Inside rs-pc3d, create category element with data-name as the category title:
1 2 3 | <!--New category-->
<ul data-name="My category">
</ul>
|
For each item, add a <li> element with nested <a> element containing the item path
1 2 | <li>
<a href="path/to/item1.jpg">Item 1 title</a>
|
Add item description with <p> element
1 2 | <p>Item 1 description</p>
</li>
|
Full markup example¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!--Container element-->
<div class="rs-container">
<div class="rs-pc3d">
<!--Category 1-->
<ul data-name="Category 1">
<!--First item-->
<li>
<a href="assets/category1/1.jpg" title="Item 1">Item 1</a>
<p>Item 1 description</p>
</li>
<!--Second item-->
<li>
<a href="assets/category1/2.jpg" title="Item 2">Item 2</a>
<p>Item 2 description</p>
</li>
<!-- More items... -->
</ul>
<!--end 1st category-->
<!--Category 2-->
<ul data-name="Category 2">
<li>
<a href="assets/category1/1.jpg" title="Item 1">Item 1</a>
<p>Item 1 description</p>
</li>
<li>
<a href="assets/category1/2.jpg" title="Item 2">Item 2</a>
<p>Item 2 description</p>
</li>
<!-- More items... -->
</ul>
<!--end 2nd category-->
<!-- More categories... -->
</div>
</div>
|