3d Helix showing countries affected by Covid 19

栏目: IT技术 · 发布时间: 4年前

内容简介:A multi-threaded Helix showing countries affected by COVID 19.You can configure and sort the helix with the controls on the right side, resulting in a firework of CSS3 transitions.This is a perfect performance demo for the webworkers driven UI framework

neo.mjs covid-helix

A multi-threaded Helix showing countries affected by COVID 19.

You can configure and sort the helix with the controls on the right side, resulting in a firework of CSS3 transitions.

This is a perfect performance demo for the webworkers driven UI framework neo.mjs .

Content

Online Versions

You can find the Online Versions here on GitHub Pages (COVID-19 Helix).

Preview Image

3d Helix showing countries affected by Covid 19

Getting Started

  1. Clone this repo to your system to get the project files

    git clone https://github.com/neomjs/covid-helix.git
  2. Open the checked out top level folder inside your terminal

    cd covid-helix
  3. Install the required node modules & run all relevant build scripts at once

    npm run build-all
  4. Make sure to use a local WebServer!

    npm run server-start
    

Docs App

Since this app shell was created using:

npx neo-app

we do get documentation views for our app source code out of the box:

localhost/covid-helix/docs/index.html

3d Helix showing countries affected by Covid 19

Multithreading

In case you want to take a closer look at the workers setup, take a look into the Chrome dev tools Sources:

3d Helix showing countries affected by Covid 19

Your app code will get loaded into the App thread.

Navigation Concept

  1. Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.
  2. Hit the Space Key to rotate the currently selected item to the front.
  3. Hit the Enter Key to expand the currently selected item.
  4. Use the mouse wheel vertically to zoom.
  5. Use the mouse wheel horizontally to rotate (e.g. trackpad / magic mouse).
  6. Care for adding mobile support? Please add your feedback here .

Attribution

  1. This App is created using the neo.mjs UI framework.
  2. Data provided by NovelCOVID/API .
  3. https://cors-anywhere.herokuapp.com/ is used to access the API via Javascript.
  4. Icons made by Freepik from www.flaticon.com .

Join our Slack Channel for questions & feedback:

Slack Channel Invite Link

Build with :heart: in Germany.

Copyright (c) 2020 - today, Tobias Uhlig


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品经理必懂的技术那点事儿

产品经理必懂的技术那点事儿

唐韧 / 电子工业出版社 / 2017-1 / 59

《产品经理必懂的技术那点事儿》以非技术背景产品经理了解技术为主题,将技术知识以简单并且易于理解的方式讲述出来,帮助非技术背景产品经理了解技术、学习技术,旨在帮助产品经理高效地与技术人员进行沟通与合作。 《产品经理必懂的技术那点事儿》的主要内容围绕产品经理需要了解的互联网基础技术知识展开,涉及客户端、服务器端、数据库及一些数据处理知识。同时,还就产品经理需具备的一些软实力,例如沟通能力和解决问......一起来看看 《产品经理必懂的技术那点事儿》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具