首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

一个好玩的偏视觉交互的前端开发工具箱 / 套件 - Uix Kit 3 更新啦

  •  1
     
  •   xizon · 98 天前 · 1036 次点击
    这是一个创建于 98 天前的主题,其中的信息可能已经有所发展或是发生改变。

    很久没来社区啦,来学习活跃下 😇分享点有趣的东西(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做 UI 出生,开发只是业余爱好,仅仅作为平时工作的需要。杂七杂八会一些前后端开发。并非职业码农!

    一个 BBoy 的小产品,也是一个爱到处旅行拍极限视频的冒险家!喜欢大自然,不喜欢繁华都市。

    Uix Kit —— 它是一个偏视觉交互的工具集合,它基于常用的脚本库,帮助开发者快速完成一套完整的交互型网站。

    Demo

    https://xizon.github.io/uix-kit/examples/

    由于 Github Page 不支持 PHP 和异步请求,可以通过下面的网址查看完整 Demo

    https://uiux.cc/uix-kit

    20190531-151518@2x.jpg

    20190531-151524@2x.jpg

    随着时代的进步,很多零代码拖拽建站工具,智能建站工具,这些工具能快速满足常用网站布局与交互(视差、轮播等)需求。但是往往一些定制化的交互( 3D,VR,SVG 等),还是需要运用常用的引擎和库来完成整个交互构架。面对一些特殊的视觉交互需求,就需要一套工具箱,来帮助开发者快速完成网站的结构,标准参考,基础视觉样式、网格布局等,Uix Kit 由此而诞生!

    它不是一个框架,不是一个脚本库,它是一个兼容 Bootstrap 的快速建站 HTML5 套件,遵循 W3C 标准,包括手风琴、Tab 切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX 交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格 Footer、文字效果、徽章、表单等等常用的网站模块,并支持官方无限更新和扩展、优化,满足各类常用的、交互和动效级的 Web 前端开发需求。

    甚至,你可以把里面的所有模块删除,只是使用套件的脚手架,通过套件提供的自动化流程,优化你的工作效率和方式方法。

    需求:

    现在很多普通网站,已经可以通过在线的拖拽建站工具,智能建站系统快速完成,因此普通网站已经无需专门花很多金钱和时间去找一个开发者完成。Uix Kit 工具箱是针对一些特殊效果的交互的网站,也可以用于比较个性化的定制网站的开发设计。

    使用方法和资源下载:

    具体的使用方法请参考 github 文档或者演示视频_

    1.从 github 或者 npm 上直接下载 https://github.com/xizon/uix-kit

    2.配置你电脑的 Node.js 环境

    3.下载完资源后,进入到 uix-kit 目录下,运行 npm run build, 进入开发模式

    4.直接通过修改 src/ 文件夹内的模块组件的 HTML,JS,SCSS 文件,来实现前端开发,所有文件将会自动打包生成到 examples/ 文件夹中。

    5.当你需要配置脚手架和网站基础信息和结构的时候,请直接编辑 package.json 文件。

    不建议跳过开发模式直接修改 examples/ 文件夹里的文件,因为代码量非常大,很难去维护和定制各种动画、交互、结构。

    套件结构:

    uix-kit/
    ├── README.md
    ├── CHANGELOG.md
    ├── CONTRIBUTING.md
    ├── LICENSE
    ├── webpack.config.js
    ├── package-lock.json
    ├── package.json
    ├── dist/
    │   ├── css/
    │   │   ├── uix-kit.css
    │   │   ├── uix-kit.css.map
    │   │   ├── uix-kit.min.css
    │   │   ├── uix-kit.min.css.map
    │   │   ├── uix-kit-rtl.css
    │   │   ├── uix-kit-rtl.css.map
    │   │   ├── uix-kit-rtl.min.css
    │   │   └── uix-kit-rtl.min.css.map
    │   └── js/
    │   │   ├── uix-kit.js
    │   │   ├── uix-kit.js.map
    │   │   ├── uix-kit.min.js
    │   │   ├── uix-kit.min.js.map
    │   │   ├── uix-kit-rtl.js
    │   │   ├── uix-kit-rtl.js.map
    │   │   ├── uix-kit-rtl.min.js
    │   │   └── uix-kit-rtl.min.js.map
    ├── misc/
    │   ├── screenshots/
    │   └── grid/
    ├── src/
    │   ├── index.js
    │   ├── index-rtl.js
    │   ├── components/
    │   │   ├── ES5/  => Third-party plugins adopt pure file merger and do not import and export
    │   │   └── ES6/  => Core modules
    ├── examples/
    │   ├── *.html
    │   ├── assets/
    │   │       ├── css/
    │   │       ├── fonts/
    │   │       ├── images/
    │   │       ├── videos/
    │   │       ├── models/
    │   │       ├── json/
    │   │       └── js/
    └──
    

    小提示:

    一个小小的工具箱,为非数据交互类网站做一个结构铺垫,提高效率 :)业余码手,多多支持~

    7 回复  |  直到 2019-06-18 09:35:55 +08:00
        1
    viperasi   97 天前
    已星
        2
    xizon   97 天前
    @viperasi 哈哈,大佬那么干脆
        3
    whoami9894   97 天前 via Android
    支持
        4
    lqzhgood   97 天前
    首页那个 canvas 好酷~
    有库么
        5
    xizon   97 天前
    @whoami9894 哈哈,踩踩
        6
    xizon   97 天前
    @lqzhgood 那个就是基于 threejs 引擎的运用,没用其他的插件库呢
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3692 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 09:56 · PVG 17:56 · LAX 02:56 · JFK 05:56
    ♥ Do have faith in what you're doing.