前端工程师用代码制作特效,七夕情人节成功表白女神,终于摆脱单身
需求提出
去年七夕的时候,学长突然向我求助:女朋友一直说程序员不懂浪漫,到底该送什么礼物?拿到一个问题首先要分析用户需求:你女朋友有没有透露过她想要什么?
市场调研
学长尴尬一阵,说他女友觉得鲜花虽然美但保存不长久,钻石虽然长久但少了点知识内涵,书籍虽然有内涵却不够浪漫。要综合长久,有知识感和浪漫,看来只有一种方法了:做一个网页版的情书!
网页可以分布式存储,信息几乎永远不会遗失;用程序写情书,技术功底和知识素养可见一斑;再加上人机交互,还能呈现恋爱中的点点滴滴,不要太浪漫。
学长觉得言之有理,但是他没时间再去搭服务器建数据库,而且这个月的工资都花在了 Dota2 里,已经没钱再租云服务器。出于快捷和廉价的考虑,免费的 GitHub Pages 是不二之选。
使用 GitHub Pages
GitHub Pages 是一个把 GitHub 仓库转换成网站的服务。简便,快捷,且访问量不大的情况下,国内可以畅通无阻的访问。只需要在 GitHub 创建一个名为 {{你的用户名}}.github.io
的仓库,比如你的用户名是 allen_zhang
,那么仓库名就是 allen_zhang.github.io
。
以仓库的主目录为根目录,主目录下的 index.html
文件会被自动识别为网站首页。当然你不需直接把首页作为情书,创建相应的子目录并调正访问链接即可。
竞品分析
在 GitHub 搜索关键词 valentine
,有 1k 个仓库,语言是 JavaScript,HTML,CSS 的共有 600 个。常用的秀恩爱方式包括打字机特效,时间轴,和一些应用 WebGL 的 2D 或 3D 显示效果。虽然技术水平不错,但是整体而言缺乏设计感,不一定满足文艺的学长女友的期待。为了不让学长跪在键盘上摩擦,我给他推荐了两个世界顶级的设计参考。
设计参考
http://Behance.net 和 http://Dribbble.com 是两个全球公认的顶级设计师作品分享网站,检索对应的关键词和艺术领域就能找到非常好的参考。以时间轴情书为例,搜索 timeline
并选择网页设计领域,寻找合适的元素,配色,和排版即可。
作为情书,元素应该柔和,以圆角为主;配色情感上避免冷酷,但也不要用饱和度过高的颜色,根据设计领域的流行趋势,渐变色是一个很好的选择;排版上要保证关键信息(比如纪念日等等)突出,鲜明。
学长获益匪浅的点点头,然后问我:「有没有什么现成的代码可以 Copy?」
技术选型
Typed.js 打字机效果:
Typed.js 的使用非常简单,可以通过 NPM,Yarn 等等资源管理器安装
# With NPM
npm install typed.js# With Yarn
yarn add typed.js# With Bower
bower install typed.js
使用范例如下
var options = {strings: ["<i>First</i> sentence.", "& a second sentence."],typeSpeed: 40, //打字速度backSpeed: 50 //回退速度
}var typed = new Typed(".element", options);
HTML Canvas:
使用 HTML5 的 Canvas API 进行绘图,2D 图形可以使用 Paper.js,3D 图形渲染(WebGL)则可以使用著名的 Three.js。
时间轴:
除了 Timeline.js 之类的 JS 库以外,CodePen 上面有诸多通过 HTML 和 CSS 实现的时间轴效果。作为情书的参考已经非常够用。
交付:
经过一段时间的努力,学长的情书完成了。可是一个网页版的情书真的适合作为七夕礼物吗?如果把情书夹在女朋友心仪已久的 LV 包里会产生什么效果?为了 Testing,学长用二维码生成器把网页 URL 转换成了二维码,打印出来放在包里。
结局
学长的女友收到礼物后非常满意,学长也焕发出青春的光彩,夸奖我出了个好主意。我却陷入了沉思:学长的女友究竟是因为 LV 满意还是因为电子情书满意?无论如何,这个问题已经不可考,最保险的方法还是两个都送。
前端工程师用代码制作特效,七夕情人节成功表白女神,终于摆脱单身相关推荐
- 一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
- php表白树洞怎么写,最新微信树洞炫彩版表白墙源码源码分享,七夕情人节互动表白留言墙PHP源码,兼容SAE...
8月份最新微信树洞炫彩版表白墙源码源码分享,七夕情人节互动表白留言墙PHP源码,完美兼容SAE! 程序特点: 1.php代码,完美兼容Sae,PHP空间 2.漂亮的扁平化界面,当前最流行. 3.发布选 ...
- HTML+CSS+JavaScript制作520七夕情人节代码(烟花表白)
❉ 助力程序员撩妹手到擒来 html+css+js烟花表白(含音乐)可自定义编辑文字 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给女朋友或者正在 ...
- 情人节程序员用HTML网页表白【烟花代码】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 七夕编程代码linux,2020七夕情人节:7个程序员必备表白源码
亚当表白夏娃,打开了上帝都不知道的魅力后花园.罗密欧表白朱丽叶,懂得了爱情比任何事情都值得.你曾经表白过吗? 课桌间,将萌动的心跳化作一张表白小纸条,大学时,不经意间牵起的双手就是美好的承诺,工作后, ...
- 七夕情人节生日表白爱心
话不多说,直接给老铁们上一上干货,直接拿来就能用,快发给你心仪的女生!!行动起来! 目录 一.效果 二.代码 一.效果(带动画,这里就不再演示~) 二.代码(视个人情况改动的地方本人已注释) 百度网盘 ...
- 炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
- ❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
- ❤七夕情人节将至,用HTML+CSS给女朋友绘制一张彩色代码相册吧!
❤七夕情人节将至,用HTML+CSS给女朋友绘制一张彩色代码相册吧(可帮定制噢~ )! 七夕情人节将至,中国传统的情人节.可预期到的是,估计有很多年轻的情侣们,已经为这个节日提前准备好久了吧?烂大街的 ...
最新文章
- 人脸识别技术在法国:质疑声中的先行者
- 手机APP测试几个要点
- C++ Vector学习笔记
- 编译原理lr(0)c语言,关于编译原理:LR(1)LR(0)文法判断?
- 随便贴两个漏洞,如 Apache JServ协议服务
- 底层系统如何实现数据一致性/系统底层如何保证有序性
- 转载 Spark性能优化指南——基础篇
- php实现直播答题系统,直播答题解决方案
- 结构设计模式 - Bridge设计模式
- 6-7 jmu-Java-07多线程-Thread (3分)
- 遇见 | 大咖:对话Oracle北美数据库研发领袖,你来不来?
- nginx 如何处理请求系列3-server_name指令
- Linux 中ifconfig和ip addr命令看不到ip
- java数组元素的默认值_数组元素默认的初始值都是什么?
- python编写直角三角形边长公式_python 打印直角三角形,等边三角形,菱形,正方形的代码...
- 什么蓝牙耳机音质好?盘点四款HIFI音质蓝牙耳机排行榜
- java毕业设计选题基于JavaWeb实现疫情环境下校园宿舍|寝室管理系统
- AltiumDesigner PCB案牍(2)——自定义原理图模板
- RANSAC算法实现图像全景拼接
- html条形图显示统计数据,条形统计图和柱形统计图区别