{"id":13394474,"url":"https://github.com/chemzqm/dribbble-effects","last_synced_at":"2025-10-10T12:16:07.414Z","repository":{"id":148039846,"uuid":"46978537","full_name":"chemzqm/dribbble-effects","owner":"chemzqm","description":"Some effects implementation with design form dribbble","archived":false,"fork":false,"pushed_at":"2016-03-12T18:51:28.000Z","size":2753,"stargazers_count":30,"open_issues_count":16,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-10T20:43:34.067Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chemzqm.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-27T12:12:39.000Z","updated_at":"2025-02-06T16:03:06.000Z","dependencies_parsed_at":"2023-05-28T07:00:20.560Z","dependency_job_id":null,"html_url":"https://github.com/chemzqm/dribbble-effects","commit_stats":{"total_commits":28,"total_committers":1,"mean_commits":28.0,"dds":0.0,"last_synced_commit":"a95af2c975110865b771555fe02997dd37f1f13f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chemzqm/dribbble-effects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chemzqm%2Fdribbble-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chemzqm%2Fdribbble-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chemzqm%2Fdribbble-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chemzqm%2Fdribbble-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chemzqm","download_url":"https://codeload.github.com/chemzqm/dribbble-effects/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chemzqm%2Fdribbble-effects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278822016,"owners_count":26052026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:20.896Z","updated_at":"2025-10-10T12:16:07.396Z","avatar_url":"https://github.com/chemzqm.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Project List"],"sub_categories":["Epic-Black-Friday-Deals"],"readme":"# Dribbble-effects\n\n[dribbble](https://dribbble.com/) 上动画效果的 Javascript 实现。\n\n项目只在最新版 Chrome 和 Safari 上进行了测试，其它浏览器估计不会去支持，不过欢迎反馈意见。\n\n推荐使用 iphone safari 保存到桌面再打开。\n\n## 第二个 Pull to Refresh in Marvel 5.0\n\n原效果图：\n\n\u003cimg width=\"400px\" height=\"300px\" src=\"https://d13yacurqjgara.cloudfront.net/users/8256/screenshots/2369618/pulltorefresh.gif\" alt=\"Ink2\"\u003e\n\n原链接： [Pull to Refresh in Marvel 5.0](https://dribbble.com/shots/2369618-Pull-to-Refresh-in-Marvel-5-0)\n\nDeom 链接： https://chemzqm.github.io/dribbble-effects/refresh.html\n\n![qr-code](https://cloud.githubusercontent.com/assets/251450/11611081/85ec8cd2-9bf6-11e5-81cd-1517adb557c4.png)\n\n主要使用了[chemzqm/iscroll](https://github.com/chemzqm/iscroll) 和[chemzqm/swipe-it](https://github.com/chemzqm/swipe-it)两个组件。\n\n* 仅限移动设备体验\n* 右上的图标是 unicode， 部分旧浏览器不支持带颜色\n* 删除图标背景是 svg，部分浏览器不支持 svg 做为图片背景\n* 下拉刷新的效果是 canvas 加 requestAnimationFrame 实现的，因为控制最灵活\n* 删除图标动画是 css animation，因为实现简单\n* 代码没有注释，抽象也或许不太合理，仅供参考\n* 图片是从美食应用截取的，组您开胃😋\n\n\n## 第一个 Epic-Black-Friday-Deals\n\n原效果图：\n\n\u003cimg width=\"400px\" height=\"300px\" src=\"https://d13yacurqjgara.cloudfront.net/users/107759/screenshots/2372734/ink2.gif\" alt=\"Ink2\"\u003e\n\n原链接： [Epic-Black-Friday-Deals](https://dribbble.com/shots/2372734-Epic-Black-Friday-Deals)\n\nDeom 链接： https://chemzqm.github.io/dribbble-effects/friday.html\n\n![qr-code](https://cloud.githubusercontent.com/assets/251450/11446265/4a7bb3fe-956f-11e5-8de5-918b6bca4628.png)\n\n\n已知问题：\n\n* ios9 safari 不支持状态栏透明，所以现在只能是白色, 详情访问[此链接](https://forums.developer.apple.com/thread/9819)\n\n* 不支持横屏(确切说这个效果不知道如何支持)，但是现在大部分浏览器并不支持[锁屏的 API](https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation), 所以就将就下吧，毕竟只是为了实现效果\n\n## 本地运行\n\n    npm install\n    gulp\n    open http://localhost:3000/example/friday.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchemzqm%2Fdribbble-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchemzqm%2Fdribbble-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchemzqm%2Fdribbble-effects/lists"}