Code Monkey home page Code Monkey logo

gift-to-lover's Introduction

gift-to-lover

程序猿(媛)/极客/理工男(女)们,献给爱人的DIY礼物。

功能

全屏以幻灯片模式显示一系列图片,并循环播放背景音乐。

图片来自网络上网友收集的电影中出现“我爱你”字幕的截图。虽然这些图片不是鄙人一一截图的,但在几千张图片中排除重复的,排除有水印的,排除分辨率低的,再排除镜头画面不美的,最后剩下520张,也确实花费了不少时间和心思。

背景音乐目前只有一首,循环播放卢冠廷的《一生所爱》。这是鄙人最喜欢的歌曲之一,词曲皆佳,最重要的是旋律风格和整体幻灯片播放的风格很搭配。当然,也可以用多首背景音乐循环播放,但暂时尚未找到合适的音乐。

此项目不仅仅可以用于表白,还可以用作生日礼物、圣诞礼物等等。只需要更换合适的图片和背景音乐,定制合适的字幕即可。

各位同学若对此项目有任何意见或建议,请在 issue 中和我讨论。

另,征集电影截图,以及背景音乐。有推荐的电影或音乐也请提在 issue 中,谢谢!

演示

参见演示页面

使用方法

  • check out 这个代码库;如果不会用git,也可以直接下载整个代码库的压缩包然后解压;
  • 按需要,修改 src/config.js 文件中的配置;文件中有中文注释,很容易看懂;
  • 打开 src/index.html 网页可以看到效果;
  • src/images中保存的图片是幻灯片轮流播放的图片,其中"start.jpg"是第一张图片;"end.jpg"是最后一张;其他中间的图片,文件名从1.jpg开始依次编号;注意文件后缀必须为.jpg, 也就是说只支持 JPEG 格式的图片;添加或减少图片数目后,必须修改src/config.js中的IMAGE_COUNT变量值;
  • src/musics中保存的音乐是幻灯片播放时的背景音乐,文件名从1.mp3开始依次编号;注意文件后缀必须为.mp3, 也就是说只支持 MP3 格式的音乐;添加或减少音乐数目后,必须修改src/config.js中的MUSIC_COUNT变量值;
  • src/rename_files.sh脚本可以批量重命名当前目录中的文件,文件名以数字编号,从1开始,文件后缀依然为原文件后缀。此工具可用于重命名大批量的图片文件。

支持的浏览器

  • Chrome: 45.0.2454.99 测试通过,所有功能正常;
  • Firefox: 40.0.3 测试通过,所有功能正常;
  • Safari: 9.0.1 测试通过,所有功能正常;
  • IE: 尚未测试,不过至少已知全屏功能是不支持的;

强烈建议使用最新版的Chrome以获得最佳的浏览效果。

已知问题

  • 预载入速度太慢且无进度条指示载入百分比;已增加预载入图片和音乐的功能和进度指示;
  • 在网络较慢的环境下,效果比较卡;设置预载入图片和音乐即可;

计划

  • 加入背景音乐播放功能;
  • 加入全屏显示功能(是指将整个浏览器页面全屏,隐藏浏览器窗口);
  • 增加图片计数器;
  • 连续播放多首背景音乐;
  • 随机乱序播放背景音乐;
  • 增加预载入进度条指示载入百分比;
  • 电影截图不够清晰,需要重新选择高清的、无水印的电影截图;
  • 需要调整电影截图的顺序播放顺序;
  • 开头增加一些字幕,描述一下礼物献给的对象以及其他一些要对她/他说的话;
  • 定制第一张幻灯片和最后一张幻灯片中的字幕,打算最后一张显示大话西游的那段经典台词,并且播放那首《一生所爱》;
  • 最后增加一个可选的致谢字幕,向项目的资源提供者表示感谢;
  • 制作脚本一键发布项目到某些常见的个人网站(比如发布到自己的github page上);
  • 制作脚本将项目打包为成苹果、安卓的手机应用;

致谢

此项目,使用了下述资源、代码和工具,在此一并表示感谢!

请我喝杯咖啡

如果你觉得我的项目对你有帮助,想要感谢我的话,那就拿出微信扫描下面二维码,请我喝杯拿铁吧 :-)

请我喝杯咖啡

协议

本项目的代码遵循 GNU General Public License v3.0

本项目用到的各类图片,音乐资源收集自网络,仅供个人使用。若无意中侵犯了您的版权,请与本人联系,我会立即将其删除。

gift-to-lover's People

Contributors

haixing-hu avatar

Stargazers

 avatar 鲸落 avatar Harry Yang avatar Yang avatar zilong.dai avatar JFanL avatar  avatar  avatar Chen LaoCong avatar Knock avatar luomiao avatar juesai2015 avatar  avatar charlescoder avatar fatesinger avatar  avatar  avatar  avatar yueshuiniao avatar EnumaElish avatar  avatar 小一宝宝 avatar 白菜 avatar 北边一小民 avatar  avatar LTOM avatar Andrman avatar  avatar  avatar New avatar walterzhang avatar Izul avatar

Watchers

 avatar James Cloos avatar Izul avatar  avatar

gift-to-lover's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.