推荐一个前端工程师做的超酷交互式网站

   2015-08-09 0
核心提示:昨天程序员的那些事主页君在 Reddit 看到的好作品。不敢独享,昨天已在微博推荐了,今天再次到微信公号推荐给大家

网站链接:http://strml.net/

作者:Samuel Reed

小提示:经过昨天在朋友圈测试,发现直接在微信自带浏览器中访问该站点会闪屏,并且有些安卓手机无法横屏。所以【建议】:如果你用移动设备,请 Chrome、Safari、FF 等浏览器中打开。如果是 PC 端,大部分浏览器应该都可以完美展现出效果。

开始一开始,就是一个白底黑字的单调网页,可能大家并不觉得酷,耐心点,慢慢看,既然主页君推荐,就不会坑你。(偷笑表情)

推荐一个前端工程师做的超酷交互式网站

修改背景色作者自己也说了,白底黑字太无趣了,所以就开始加背景色了。更多惊艳之处,慢慢呈现给大家了。

推荐一个前端工程师做的超酷交互式网站

CSS 代码区域挪到右侧

推荐一个前端工程师做的超酷交互式网站

左侧展示作者的简历

推荐一个前端工程师做的超酷交互式网站

想联系作者?请使用左下侧的 PGP key

推荐一个前端工程师做的超酷交互式网站

点击右侧区域中的 CSS 代码,可放大。如果你在 PC 端,可编辑修改 CSS 代码。(平板电脑我没有测试,不确定是否能编辑)

推荐一个前端工程师做的超酷交互式网站

作者在最后致谢部分提到:

“感谢 Jake Albaugh,据我所知,他是第一位做出类似站点的人。”

推荐一个前端工程师做的超酷交互式网站

网址: http://strml.net/

推荐大家复制网址在手机浏览器中查看。

如果大家看后觉得也不错,不妨为作者点个 zan。

推荐一个前端工程师做的超酷交互式网站

【微信公众号:爆料福州】新关注的用户送出5元话费 !每日发送:福州本地的头条新闻、小道消息、江湖传闻、自己身边的大事小情,猛点关注,快乐随行!

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React前端框架路由跳转,前端回车事件、禁止空
    react router - historyhistory.push() 方法用于在JS中实现页面跳转history.go(-1) 用来实现页面的前进(1)和后退(-1)访问js连接后+?v1清缓存标签中的Class=“a b c”a b c分别代表3个样式名称!分别用空格隔开!Struts2》ajax请求后台,后台转换json返回aja
    03-08
  • 基于ZR.VUE 前端的改造,页面刷新报错
     问题描述:前后端分离开发,分开部署. 页面刷新 直接报404 错误的解决办法提示:  先在 .env.development 中 配置 VUE_APP_BASE_API , 将 '/' 替换为 后端地址 'http://localhost:8888/'如果是对应的发布的正式环境,也要修改  .env.production 的VUE_APP_
    03-08
  • Vue.js 前端项目在常见 Web 服务器上的部署配置
    Vue.js 前端项目在常见 Web 服务器上的部署配置
    Vue.js 前端项目在 Web 服务器上的部署配置Web 服务器是一种用于存储,处理和传输Web内容的软件。它是一种特殊类型的服务器,具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言,如 PHP,JavaScript,Ruby,Python 等,
    03-08
  • 基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程
    基于Vue3实现前端埋点上报插件并打包发布到npm
    目录项目环境搭建插件开发点击事件上报vue自定义指令手动上报方法页面访问次数上报(pv,uv)页面停留时间(TP)获取公共参数引入axios打包发布使用说明OptionOptions 示例点击指令上报手动上报写在最后前端埋点对于那些营销活动的项目是必须的,它可以反应出
    03-08
  • javascript前端如何使用google-protobuf
    1.首先下载google的protobuf的compiler,通过编译器可以将.proto文件转换为想要的语言文件。下载地址:https://repo1.maven.org/maven2/com/google/protobuf/protoc/2.写一个proto文件syntax = "proto3";message messagebody{//工厂 3Gstring factory = 1;//
    03-08
  • 前端笔记之JavaScript(六)让人头疼的正则表达式
    前端笔记之JavaScript(六)让人头疼的正则表达
    1.1正则概述和体验正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证。在JavaScript中,正则表达式也是对象,是一种引用类型。案例:正确输入一个电话号码,010-12345678,用户输入正确返回“对”,错误返回“错” var tel = prompt("请输
    03-08
  • 前端笔记之JavaScript(八)关于元素&计算后的样式
    前端笔记之JavaScript(八)关于元素&计算后的
    1.1概述得到id元素的方法 document.getElementById()得到一个元素。事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: document.getElementsByTagName(); 全线浏览器兼容的,得到元素的方法,就这两个:document.getElementById()      
    03-08
  • 前端优化分析 之 javascript引用位置优化
    在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1、整个页面文档家在结束才开始加载css和js以及其他的数据 2、当顶部的所有js都家在结束之
    03-08
  • 500行JavaScript代码在前端根据数据生成CAD工程
    前言 用数据生成CAD图,一般采用的ObjectArx对CAD二次开发完成。ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包,它提供了以C++为基础的面向对象的开发环境及应用程序接口,能访问和创建AutoCAD图形数据库。而由于现在懂C++的人
    03-08
  • 学习前端页面css定位 网页前端设计css
    一、相对定位:absolute  相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。position:relative;同时可以设置上下左右位置偏移;rela
    03-08
点击排行