├── 404page
├── 404文字掉落动画
│ ├── README.md
│ ├── index.html
│ ├── script.js
│ └── style.css
└── 404黑白点抖动动画
│ ├── README.md
│ ├── css
│ └── style.css
│ ├── index.html
│ └── js
│ └── script.js
├── LICENSE
├── README.md
├── canvas+jq炫彩粒子宇宙星云特效
├── README.md
├── css
│ ├── normalize.min.css
│ └── style.css
├── index.html
└── js
│ ├── jquery.min.js
│ └── script.js
├── canvas全屏七夕爱心表白特效
├── README.md
├── img
│ └── heart.svg
└── index.html
├── canvas新年3D烟花动画
└── index.html
├── canvas烟花动画
├── README.md
└── index.html
├── canvas碰碰球动画
├── README.md
└── index.html
├── canvas粒子文字动画
├── README.md
├── assets
│ ├── css
│ │ ├── base.css
│ │ └── demo.css
│ ├── img
│ │ └── bcg.jpg
│ ├── js
│ │ └── demo.js
│ └── scss
│ │ └── demo.scss
└── index.html
├── canvas粒子组合三角形3D旋转动画
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ ├── script.js
│ └── tsparticles.min.js
├── canvas鼠标跟随几何动画
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── canvas鼠标跟随爱心背景特效
├── README.md
└── index.html
├── css+js3D立体杯子旋转动画
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── css+js人物关节拉伸模拟动画
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── index.js
├── css+js倒计时警报灯特效
├── README.md
├── img
│ └── 9fcf8fd2-fe09-45d2-873a-744b12b00065.png
└── index.html
├── css+js卡片翻转
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── css+js卡片详情页展开效果图片
├── README.md
├── img
│ ├── deathtostock-00.jpg
│ ├── deathtostock-01.jpg
│ ├── deathtostock-02.jpg
│ └── deathtostock-03.jpg
├── index.html
└── src
│ ├── script.js
│ └── style.css
├── css+js圆盘时钟
├── README.md
├── index.html
├── index.js
└── style.css
├── css+js多个爱心层叠波浪动画
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── css+js手风琴布局卡片
├── css
│ └── style.css
├── index.html
├── js
│ └── script.js
└── 手风琴布局卡片.md
├── css+js放大镜效果
├── README.md
├── css
│ ├── header.css
│ ├── public.css
│ └── reset.css
├── images
│ ├── m30-big.jpg
│ └── m30.jpg
├── index.html
└── js
│ └── common.js
├── css+js滑块切换过渡动画
├── README.md
├── index.html
├── script.js
└── style.css
├── css+js火焰文字
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── index.js
├── css+js箭头跟随鼠标
├── README.md
├── index.html
├── script.js
└── style.css
├── css+js鼠标悬停图片剪辑路径效果
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── css3+js酷炫抽象花蕊动画特效
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── prefixfree.min.js
├── easeljs实现满屏漂浮爱心
├── README.md
└── index.html
├── h5+js大海蓝天雁飞过特效
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ ├── TweenMax.min.js
│ └── script.js
├── jquery-3D卡片交互悬停动画
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ ├── jquery-3.6.0.min.js
│ └── script.js
├── jquery层叠式手风琴滑动切换代码
├── README.md
├── css
│ ├── animate.min.css
│ ├── bootstrap.css
│ └── style.css
├── img
│ ├── t1.png
│ ├── t2.png
│ ├── t3.png
│ ├── t4.png
│ ├── t5.png
│ ├── t6.png
│ └── t7.png
├── index.html
└── js
│ ├── jquery.min.js
│ ├── main.js
│ └── wow.min.js
├── jquery弹出式相册图片放大插件
├── README.md
├── css
│ └── new_file.css
├── img
│ ├── a1.png
│ ├── a2.png
│ ├── a3.png
│ ├── a4.png
│ ├── a5.png
│ ├── ljxq2222.jpg
│ ├── next-page.png
│ ├── picture_next.jpg
│ ├── picture_prev.jpg
│ └── previous-page.png
├── index.html
└── js
│ ├── jquery-1.4.2.js
│ └── new_file.js
├── jquery彩色网状线条粒子动画
├── README.md
├── index.html
└── js
│ ├── jquery.min.js
│ └── script.js
├── jquery简单表单实时验证
├── README.md
├── index.html
└── js
│ └── jquery-1.12.2.min.js
├── jquery黑客帝国矩阵雨
├── README.md
└── index.html
├── js+css3全屏2023新年快乐动画特效
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── 原生js多形式日历控件
├── README.md
├── css
│ ├── calendar.css
│ └── fonts
│ │ ├── icomoon.eot
│ │ ├── icomoon.svg
│ │ ├── icomoon.ttf
│ │ └── icomoon.woff
├── index.html
└── js
│ └── calendar.js
├── 原生js表单验证插件
├── README.md
├── index.html
└── ocheck.js
├── 标题响应式导航栏菜单弹出效果
├── README.md
├── css
│ └── style.css
├── index.html
└── js
│ ├── jquery-2.1.3.min.js
│ └── script.js
└── 鼠标悬停层叠拆分文字动态效果
├── README.md
├── css
└── style.css
├── index.html
└── js
└── script.js
/404page/404文字掉落动画/README.md:
--------------------------------------------------------------------------------
1 | # 精简404错误页面设计
2 |
3 | #### 介绍
4 | 一款错误页面设计，404文字掉落的动画效果，精简易用
5 |
6 | #### 在线预览
7 |
8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css3流星雨划过动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css3流星雨划过动画/index.html)
9 |
10 | #### 软件架构
11 | 软件架构说明
12 |
13 |
14 | #### 安装教程
15 |
16 | 1. xxxx
17 | 2. xxxx
18 | 3. xxxx
19 |
20 | #### 使用说明
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 参与贡献
27 |
28 | 1. Fork 本仓库
29 | 2. 新建 Feat_xxx 分支
30 | 3. 提交代码
31 | 4. 新建 Pull Request
32 |
33 |
34 | #### 特技
35 |
36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
40 | 5. GitHub中文社区 https://www.githubs.cn/
41 |
--------------------------------------------------------------------------------
/404page/404文字掉落动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 17sucai - Simple 404 page - Learning gsap
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | search
16 |
404
17 | Not Found
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/404page/404文字掉落动画/script.js:
--------------------------------------------------------------------------------
1 | const timeline = gsap.timeline({
2 | defaults: {
3 | duration: 1
4 | }
5 | });
6 | timeline
7 | .fromTo(
8 | ".search", {
9 | x: "-200px",
10 | y: "100px",
11 | opacity: 0
12 | }, {
13 | x: "200px",
14 | y: "-100px",
15 | rotate: 40,
16 | opacity: 1,
17 | yoyo: true
18 | }
19 | )
20 | .to("h1", {
21 | y: "0",
22 | ease: "bounce",
23 | opacity: 1
24 | })
25 | .to(".search", {
26 | x: "0",
27 | y: "0",
28 | rotate: 0,
29 | ease: "bounce"
30 | })
31 | .fromTo("h2", {
32 | opacity: 0
33 | }, {
34 | opacity: 1,
35 | delay: 0.2
36 | });
--------------------------------------------------------------------------------
/404page/404文字掉落动画/style.css:
--------------------------------------------------------------------------------
1 | /*Common*/
2 |
3 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
4 | @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
5 | @font-face {
6 | font-family: "Material Symbols Outlined";
7 | font-style: normal;
8 | src: url(https://example.com/material-symbols.woff) format("woff");
9 | }
10 |
11 | .material-symbols-outlined {
12 | font-family: "Material Symbols Outlined";
13 | font-weight: normal;
14 | font-style: normal;
15 | display: inline-block;
16 | line-height: 1;
17 | text-transform: none;
18 | letter-spacing: normal;
19 | word-wrap: normal;
20 | white-space: nowrap;
21 | direction: ltr;
22 | font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
23 | }
24 |
25 | :root {
26 | --text: #20202b;
27 | --text-light: #45424b;
28 | --dark-grey: #333;
29 | }
30 |
31 | * {
32 | box-sizing: border-box;
33 | margin: 0;
34 | padding: 0;
35 | font-family: "Montserrat";
36 | }
37 |
38 | body {
39 | background: #eee;
40 | }
41 |
42 | main {
43 | display: flex;
44 | flex-direction: column;
45 | height: 100vh;
46 | width: 100%;
47 | place-content: center;
48 | align-items: center;
49 | overflow: hidden;
50 | position: relative;
51 | padding: 64px;
52 | }
53 |
54 | .container {
55 | text-align: center;
56 | }
57 |
58 | h1 {
59 | font-size: clamp(10vw, 20vw, 300px);
60 | opacity: 0;
61 | transform: translateY(-100vh);
62 | }
63 |
64 | h2 {
65 | font-size: clamp(3vw, 7vw, 100px);
66 | color: transparent;
67 | text-shadow: 2px 2px 0 red, -2px -2px 0 green, 6px 0 0 violet, -6px 0 0 yellow, 0 -6px 0 aqua, 0 6px 0 yellowgreen;
68 | color: #eee;
69 | }
70 |
71 | h1,
72 | h2 {
73 | margin: 0;
74 | line-height: clamp(5vw, 10vw, 150px);
75 | }
76 |
77 | body .material-symbols-outlined {
78 | font-size: clamp(10vw, 20vw, 300px);
79 | text-shadow: 2px 2px 0 red, -2px -2px 0 green, 6px 0 0 violet, -6px 0 0 yellow, 0 -6px 0 cyan, 0 6px 0 yellowgreen;
80 | }
--------------------------------------------------------------------------------
/404page/404黑白点抖动动画/README.md:
--------------------------------------------------------------------------------
1 | # 404错误页面黑白点抖动动画特效
2 |
3 | #### 介绍
4 |
5 | 一款404错误页面，黑白点抖动动画特效，画面中是模拟的密集的动态黑白点噪点动效，供大家参考。
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS + DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/404page/404黑白点抖动动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/404page/404黑白点抖动动画/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/404page/404黑白点抖动动画/css/style.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Black+Ops+One);
2 | * {
3 | box-sizing: border-box;
4 | }
5 |
6 | html, body {
7 | background: #e6e6e6;
8 | width: 100%;
9 | min-height: 100%;
10 | font-weight: bold;
11 | font-size: 1em;
12 | display: flex;
13 | justify-content: center;
14 | flex-direction: column;
15 | font-family: "Black Ops One", cursive;
16 | -webkit-user-select: none;
17 | -moz-user-select: none;
18 | -ms-user-select: none;
19 | user-select: none;
20 | }
21 |
22 | canvas {
23 | left: 50%;
24 | position: absolute;
25 | top: 50%;
26 | transform: translate(-50%, -50%);
27 | }
28 |
29 | .text .wrap {
30 | fill: #FFF;
31 | }
32 |
33 | .overlay {
34 | height: 0;
35 | width: 0;
36 | overflow: hidden;
37 | position: absolute;
38 | }
39 | .overlay .txt {
40 | font-size: 14rem;
41 | text-transform: uppercase;
42 | font-weight: 900;
43 | letter-spacing: -0.5rem;
44 | text-shadow: 0 -3px 0 #0d0d0d, 0 6px 8px rgba(13, 13, 13, 0.55), 0 9px 10px rgba(13, 13, 13, 0.25);
45 | }
46 | .overlay .txt2 {
47 | font-size: 4rem;
48 | }
49 |
50 | section {
51 | align-self: center;
52 | }
53 |
54 | h1 {
55 | position: relative;
56 | font-size: 8em;
57 | font-weight: bold;
58 | line-height: 1;
59 | display: inline-block;
60 | width: 900px;
61 | height: 400px;
62 | }
63 | h1 .fill {
64 | position: relative;
65 | width: 100%;
66 | height: 100%;
67 | overflow: hidden;
68 | }
69 | h1 .inv {
70 | position: absolute;
71 | width: 900px;
72 | height: 400px;
73 | top: 0;
74 | left: 0;
75 | }
76 | h1 .rect {
77 | fill: #e6e6e6;
78 | }
79 | h1 .clear {
80 | fill: transparent;
81 | }
--------------------------------------------------------------------------------
/404page/404黑白点抖动动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 404: Minimalist
6 |
7 |
8 |
9 |
10 |
11 |
12 |
23 |
24 |
25 |
26 |
28 |
29 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/404page/404黑白点抖动动画/js/script.js:
--------------------------------------------------------------------------------
1 | c = document.getElementById("canv");
2 | $ = c.getContext("2d");
3 | w = c.width;
4 | h = c.height;
5 | id = $.createImageData(w, h);
6 |
7 | function draw() {
8 | window.requestAnimationFrame(draw);
9 | var r;
10 | for (var p = 4 * (w * h - 1); p >= 0; p -= 4) {
11 | r = Math.random();
12 | id.data[p] = id.data[p+1] = id.data[p+2] = 255 * Math.pow(r, 1.6);
13 | id.data[p+3] = 255;
14 | }
15 | $.putImageData(id, 0, 0);
16 | }
17 |
18 | draw();
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 儒雅的烤地瓜
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 在线预览
2 |
3 | [Online Page](https://sunyctf.github.io/js-effects/)
4 |
5 | ## 仓库简介
6 |
7 | ❣️ 前端JS特效合集—JavaScript effects library
8 |
9 | ## 内容目录
10 | - [404page](#404page)
11 | 1. [js+css3全屏2023新年快乐动画特效](https://sunyctf.github.io/js-effects/js+css3全屏2023新年快乐动画特效/index.html)
12 | 2. [jquery层叠式手风琴滑动切换代码](https://sunyctf.github.io/js-effects/jquery层叠式手风琴滑动切换代码/index.html)
13 | 3. [鼠标悬停层叠拆分文字动态效果](https://sunyctf.github.io/js-effects/鼠标悬停层叠拆分文字动态效果/index.html)
14 | 4. [标题响应式导航栏菜单弹出效果](https://sunyctf.github.io/js-effects/标题响应式导航栏菜单弹出效果/index.html)
15 | 5. [easeljs实现满屏漂浮爱心](https://sunyctf.github.io/js-effects/easeljs实现满屏漂浮爱心/index.html)
16 | 6. [jquery黑客帝国矩阵雨](https://sunyctf.github.io/js-effects/jquery黑客帝国矩阵雨/index.html)
17 | 7. [css+js火焰文字](https://sunyctf.github.io/js-effects/css+js火焰文字/index.html)
18 | 8. [css+js鼠标悬停图片剪辑路径效果](https://sunyctf.github.io/js-effects/css+js鼠标悬停图片剪辑路径效果/index.html)
19 | 9. [css+js圆盘时钟](https://sunyctf.github.io/js-effects/css+js圆盘时钟/index.html)
20 | 10. [css+js卡片翻转](https://sunyctf.github.io/js-effects/css+js卡片翻转/index.html)
21 | 11. [canvas烟花动画](https://sunyctf.github.io/js-effects/canvas烟花动画/index.html)
22 | 12. [css+js人物关节拉伸模拟动画](https://sunyctf.github.io/js-effects/css+js人物关节拉伸模拟动画/index.html)
23 | 13. [css+js3D立体杯子旋转动画](https://sunyctf.github.io/js-effects/css+js3D立体杯子旋转动画/index.html)
24 | 14. [canvas粒子组合三角形3D旋转动画](https://sunyctf.github.io/js-effects/canvas粒子组合三角形3D旋转动画/index.html)
25 | 15. [canvas粒子文字动画特效](https://sunyctf.github.io/js-effects/canvas粒子文字动画/index.html)
26 | 16. [css+js滑块切换过渡动画](https://sunyctf.github.io/js-effects/css+js滑块切换过渡动画/index.html)
27 | 16. [canvas新年3D烟花动画](https://sunyctf.github.io/js-effects/canvas新年3D烟花动画/index.html)
28 | 16. [canvas鼠标跟随几何动画](https://sunyctf.github.io/js-effects/canvas鼠标跟随几何动画/index.html)
29 | 16. [css+js卡片详情页展开效果图片](https://sunyctf.github.io/js-effects/css+js卡片详情页展开效果图片/index.html)
30 | 16. [canvas全屏七夕爱心表白特效](https://sunyctf.github.io/js-effects/canvas全屏七夕爱心表白特效/index.html)
31 | 16. [css+js箭头跟随鼠标](https://sunyctf.github.io/js-effects/css+js箭头跟随鼠标/index.html)
32 | 16. [css+js放大镜效果](https://sunyctf.github.io/js-effects/css+js放大镜效果/index.html)
33 | 16. [canvas鼠标跟随爱心背景特效](https://sunyctf.github.io/js-effects/canvas鼠标跟随爱心背景特效/index.html)
34 | 16. [css3+js酷炫抽象花蕊动画特效](https://sunyctf.github.io/js-effects/css3+js酷炫抽象花蕊动画特效/index.html)
35 | 16. [jquery-3D卡片交互悬停动画](https://sunyctf.github.io/js-effects/jquery-3D卡片交互悬停动画/index.html)
36 | 16. [canvas+jq炫彩粒子宇宙星云特效](https://sunyctf.github.io/js-effects/canvas+jq炫彩粒子宇宙星云特效/index.html)
37 | 16. [css+js多个爱心层叠波浪动画](https://sunyctf.github.io/js-effects/css+js多个爱心层叠波浪动画/index.html)
38 | 16. [h5+js大海蓝天雁飞过特效](https://sunyctf.github.io/js-effects/h5+js大海蓝天雁飞过特效/index.html)
39 | 16. [jquery彩色网状线条粒子动画](https://sunyctf.github.io/js-effects/jquery彩色网状线条粒子动画/index.html)
40 | 16. [jquery弹出式相册图片放大插件](https://sunyctf.github.io/js-effects/jquery弹出式相册图片放大插件/index.html)
41 | 16. [原生js多形式日历控件](https://sunyctf.github.io/js-effects/原生js多形式日历控件/index.html)
42 | 16. [jquery简单表单实时验证](https://sunyctf.github.io/js-effects/jquery简单表单实时验证/index.html)
43 | 16. [css+js倒计时警报灯特效](https://sunyctf.github.io/js-effects/css+js倒计时警报灯特效/index.html)
44 | 16. [原生js表单验证插件](https://sunyctf.github.io/js-effects/原生js表单验证插件/index.html)
45 |
46 | ### 404page
47 |
48 | - [404黑白点抖动动画](https://sunyctf.github.io/js-effects/404page/404黑白点抖动动画/index.html)
49 | - [404文字掉落动画](https://sunyctf.github.io/js-effects/404page/404文字掉落动画/index.html)
50 |
51 | ## 使用说明
52 |
53 | HTMl、CSS、JavaScript、DOM、JQuery
54 |
55 | ## 安装教程
56 |
57 | 1.点击以上对应分类下的Demo预览链接
58 |
59 | 2.通过[GitHub pages](https://pages.github.com/ "去了解GitHub pages")在浏览器地址栏访问
60 |
61 | - 我的仓库主页：https://sunyctf.github.io/js-effects/
62 |
63 | - GitHub pages站点访问通用格式：https//github用户名.github.io/github仓库名/项目文件夹名(如果有)/html文件名
64 |
65 | ## 参与贡献
66 |
67 | 1.Fork 本仓库
68 |
69 | 2.新建 Feat_xxx 分支
70 |
71 | 3.提交代码
72 |
73 | 4.新建 Pull Request
74 |
--------------------------------------------------------------------------------
/canvas+jq炫彩粒子宇宙星云特效/README.md:
--------------------------------------------------------------------------------
1 | # HTML5 canvas彩色圆点粒子宇宙星云动画特效
2 |
3 | #### 介绍
4 |
5 | 基于jQuery + html5 canvas制作的全屏彩色圆点粒子旋转宇宙星云动画特效，银河系星云粒子动画效果。
6 |
7 | #### 技术栈
8 |
9 | HTML5 canvas + CSS3 + JS + JQuery
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas+jq炫彩粒子宇宙星云特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas+jq炫彩粒子宇宙星云特效/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas+jq炫彩粒子宇宙星云特效/css/normalize.min.css:
--------------------------------------------------------------------------------
1 | button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
--------------------------------------------------------------------------------
/canvas+jq炫彩粒子宇宙星云特效/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | overflow: hidden;
3 | margin: 0;
4 | padding: 0;
5 | background: hsla(242, 30%, 5%, 1);
6 | }
7 |
8 | canvas {
9 | width: 100%;
10 | }
--------------------------------------------------------------------------------
/canvas+jq炫彩粒子宇宙星云特效/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | html5 canvas彩色圆点粒子宇宙星云动画特效
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/canvas+jq炫彩粒子宇宙星云特效/js/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | (Book REF) HTML5 Canvas Ch. 5: Math, Physics, and Animation ::: Uniform Circular Motion
3 | By Steve Fulton and Jeff Fulton
4 | */
5 | window.requestAnimFrame = (function() {
6 | return window.requestAnimationFrame ||
7 | window.webkitRequestAnimationFrame ||
8 | window.mozRequestAnimationFrame ||
9 | window.oRequestAnimationFrame ||
10 | window.msRequestAnimationFrame ||
11 | function(callback) {
12 | window.setTimeout(callback, 1000 / 60);
13 | };
14 | })();
15 | window.addEventListener('load', start, false);
16 |
17 | var c,
18 | $,
19 | w,
20 | h,
21 | msX,
22 | msY,
23 | midX,
24 | midY,
25 | num = 650,
26 | parts = [],
27 | begin = 50,
28 | repeat = 20,
29 | end = Math.PI * 2,
30 | force = null,
31 | msdn = false;
32 |
33 | function start() {
34 | c = document.getElementById('canv');
35 | $ = c.getContext('2d');
36 | w = c.width = window.innerWidth;
37 | h = c.height = window.innerHeight;
38 | midX = w / 2;
39 | midY = h / 2;
40 | force = Math.max(w, h) * 0.09;
41 | flow = begin;
42 |
43 | window.requestAnimFrame(create);
44 | run();
45 | }
46 |
47 | function run() {
48 | window.requestAnimFrame(run);
49 | go();
50 | }
51 |
52 | function Part() {
53 | this.deg = 0;
54 | this.rad = 0;
55 | this.x = 0;
56 | this.y = 0;
57 | this.distX = 0;
58 | this.distY = 0;
59 | this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';
60 | this.size;
61 | }
62 |
63 | function create() {
64 | var n = num;
65 | while (n--) {
66 | var p = new Part();
67 | p.deg = Math.floor(Math.random() * 360);
68 | p.rad = Math.floor(Math.random() * w * 0.5);
69 | p.x = p.distX = Math.floor(Math.random() * w);
70 | p.y = p.distY = Math.floor(Math.random() * h);
71 | p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));
72 | parts[n] = p;
73 | }
74 | c.onmousemove = msmv;
75 | c.onmousedown = msdn;
76 | c.onmouseup = msup;
77 |
78 | var int = setInterval(function() {
79 | flow--;
80 | if (flow === repeat) clearInterval(int);
81 | }, 20);
82 | }
83 |
84 | function go() {
85 | $.globalCompositeOperation = 'source-over';
86 | $.fillStyle = 'hsla(242, 30%, 5%, .55)';
87 | $.fillRect(0, 0, w, h);
88 | $.globalCompositeOperation = 'lighter';
89 | var mx = msX;
90 | var my = msY;
91 | var bounds = force;
92 | if (msdn) {
93 | bounds = force * 2;
94 | }
95 | var n = num;
96 | while (n--) {
97 | var p = parts[n];
98 | var radi = Math.PI / 180 * p.deg;
99 | p.distX = midX + p.rad * Math.cos(radi);
100 | p.distY = midY + p.rad * Math.sin(radi) * 0.4;
101 | if (mx && my) {
102 | var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));
103 | if (p.distX - mx > 0 &&
104 | p.distX - mx < bounds &&
105 | p.distY - my > 0 &&
106 | p.distY - my < bounds) {
107 | p.distX += react;
108 | p.distY += react;
109 | } else if (p.distX - mx > 0 &&
110 | p.distX - mx < bounds &&
111 | p.distY - my < 0 &&
112 | p.distY - my > -bounds) {
113 | p.distX += react;
114 | p.distY -= react;
115 | } else if (p.distX - mx < 0 &&
116 | p.distX - mx > -bounds &&
117 | p.distY - my > 0 &&
118 | p.distY - my < bounds) {
119 | p.distX -= react;
120 | p.distY += react;
121 | } else if (p.distX - mx < 0 &&
122 | p.distX - mx > -bounds &&
123 | p.distY - my < 0 &&
124 | p.distY - my > -bounds) {
125 | p.distY -= react;
126 | p.distY -= react;
127 | }
128 | }
129 | p.x += ((p.distX - p.x) / flow);
130 | p.y += ((p.distY - p.y) / flow);
131 | var x = p.x;
132 | var y = p.y;
133 | var s = p.size * (p.y * 1.5 / h);
134 | if (s < 0.1) {
135 | s = 0;
136 | }
137 | $.beginPath();
138 | $.fillStyle = p.color;
139 | $.arc(x, y, s, 0, end, true);
140 | $.fill();
141 | $.closePath();
142 | var vary;
143 | if (p.size < 2) {
144 | vary = 4;
145 | } else if (p.size < 3) {
146 | vary = 3;
147 | } else if (p.size < 4) {
148 | vary = 2;
149 | } else {
150 | vary = 1;
151 | }
152 | vary *= (p.y / (h * 0.9));
153 | p.deg += vary;
154 | p.deg = p.deg % 360;
155 | }
156 | }
157 |
158 | function msmv(e) {
159 | var p = getPos(e.target);
160 | var sX = window.pageXOffset;
161 | var sY = window.pageYOffset;
162 | msX = e.clientX - p.x + sX;
163 | msY = e.clientY - p.y + sY;
164 | }
165 |
166 | function msdn(e) {
167 | msdn = true;
168 | }
169 |
170 | function msup(e) {
171 | msdn = false;
172 | }
173 |
174 | function getPos(el) {
175 | var cosmo = {};
176 | cosmo.x = el.offsetLeft;
177 | cosmo.y = el.offsetTop;
178 | while (el.offsetParent) {
179 | el = el.offsetParent;
180 | cosmo.x += el.offsetLeft;
181 | cosmo.y += el.offsetTop;
182 | }
183 | return cosmo;
184 | }
--------------------------------------------------------------------------------
/canvas全屏七夕爱心表白特效/README.md:
--------------------------------------------------------------------------------
1 | # canvas全屏七夕爱心表白特效
2 |
3 | #### 介绍
4 |
5 | html5 canvas制作七夕520表白，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效。
6 |
7 | #### 技术栈
8 |
9 | HTML5 canvas + CSS3 + JS
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas全屏七夕爱心表白特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas全屏七夕爱心表白特效/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas全屏七夕爱心表白特效/img/heart.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/canvas全屏七夕爱心表白特效/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 七夕520爱心表白
6 |
10 |
11 |
12 |
13 |
14 |
15 |
180 |
181 |
--------------------------------------------------------------------------------
/canvas烟花动画/README.md:
--------------------------------------------------------------------------------
1 | # H5 canvas炫酷喜庆全屏烟花动画特效
2 |
3 | #### 介绍
4 |
5 | 一款非常绚丽多彩的HTML5 canvas炫酷喜庆全屏烟花动画特效，HTML5 Canvas制作的网页放烟花动画效果。可运用于新年节日、生日快乐祝福等场景。
6 |
7 | #### 技术栈
8 |
9 | HTML5 canvas + CSS3 + JS + DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas烟花动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas烟花动画/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas碰碰球动画/README.md:
--------------------------------------------------------------------------------
1 | # 基于canvas的碰碰球动画特效
2 |
3 | #### 介绍
4 |
5 | 基于canvas的碰碰球动画特效
6 |
7 | #### 技术栈
8 |
9 | HTML5 canvas + JS + DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas碰碰球动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas碰碰球动画/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas碰碰球动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 碰碰球
8 |
9 |
10 |
11 |
12 |
13 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/canvas粒子文字动画/README.md:
--------------------------------------------------------------------------------
1 | # 基于canvas的粒子文字动画特效
2 |
3 | #### 介绍
4 |
5 | 一款基于canvas的粒子文字动画特效，该特效是由动态生成粒子，并以动画的方式组成文字，还可以用鼠标和文字进行交互。
6 |
7 | #### 技术栈
8 |
9 | HTML5 canvas + CSS3 + JS
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas粒子文字动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas粒子文字动画/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas粒子文字动画/assets/css/base.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway:300,400,900');
2 |
3 | /* Header */
4 | .coidea-header {
5 | position: fixed;
6 | display: block;
7 | width: 96%;
8 | width: calc( 100% - 32px );
9 | height: 40px;
10 | margin: 0 auto;
11 | color: #3498db;
12 | text-align: center;
13 | top: 16px; right: 16px; left: 16px;
14 | z-index: 1000;
15 | }
16 |
17 | .coidea-header .coidea-links .coidea-icon-back {
18 | position: absolute;
19 | display: block;
20 | width: 24px;
21 | height: 24px;
22 | padding: 7px;
23 | color: rgba(255, 255, 255,0.75);
24 | font-size: 32px;
25 | line-height: 34px;
26 | font-weight: 900;
27 | font-family: 'Raleway', sans-serif;
28 | text-decoration: none;
29 | outline: 0px none;
30 | outline: 0px;
31 | transition: all .3s ease;
32 | top: 0px;
33 | left: 0px;
34 | z-index: 2;
35 | }
36 |
37 | .coidea-header .coidea-links .coidea-icon-back::before {
38 | content: '';
39 | position: absolute;
40 | display: block;
41 | width: 34px;
42 | height: 34px;
43 | top: 7px;
44 | left: 20px;
45 | border-radius: 8px;
46 | background-color: rgba(255, 255, 255,.35);
47 | }
48 |
49 | .coidea-header .coidea-links .coidea-icon-back:hover {
50 | color: rgba(255, 255, 255,1);
51 | }
52 |
53 | .coidea-header .coidea-links .coidea-icon-github {
54 | position: absolute;
55 | display: block;
56 | width: 24px;
57 | height: 24px;
58 | padding: 7px;
59 | color: rgba(255, 255, 255,0.75);
60 | font-size: 32px;
61 | line-height: 34px;
62 | font-weight: 900;
63 | font-family: 'Raleway', sans-serif;
64 | text-decoration: none;
65 | outline: 0px none;
66 | outline: 0px;
67 | transition: all .3s ease;
68 | top: 0px;
69 | right: 0px;
70 | z-index: 2;
71 | }
72 |
73 | .coidea-header .coidea-links .coidea-icon-github::before {
74 | content: '';
75 | position: absolute;
76 | display: block;
77 | width: 34px;
78 | height: 34px;
79 | top: 7px;
80 | right: 18px;
81 | border-radius: 8px;
82 | background-color: rgba(255, 255, 255,.35);
83 | }
84 |
85 | .coidea-header .coidea-links .coidea-icon-github:hover {
86 | color: rgba(255, 255, 255,1);
87 | }
88 |
89 | .coidea-header .coidea-links .coidea-header {
90 | font-family: 'Raleway', sans-serif;
91 | display: inline-block;
92 | font-size: 14px;
93 | font-weight: 300;
94 | margin: 0;
95 | padding: 17px 0;
96 | z-index: 1;
97 | }
98 |
99 | @media screen and (max-width: 360px) {
100 | .coidea-header .coidea-links .coidea-header {
101 | font-size: 12px;
102 | }
103 | }
--------------------------------------------------------------------------------
/canvas粒子文字动画/assets/css/demo.css:
--------------------------------------------------------------------------------
1 | /**
2 | * demo.css
3 | * https://coidea.website
4 | *
5 | * Licensed under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | *
8 | * Copyright 2018, COIDEA
9 | * https://coidea.website
10 | */
11 |
12 | /* @import url("https://fonts.googleapis.com/css?family=Abril+Fatface"); */
13 |
14 | body {
15 | background-color: #000000;
16 | margin: 0;
17 | overflow: hidden;
18 | font-size: 0;
19 | }
20 | body section {
21 | background: url(../img/bcg.jpg) no-repeat center center fixed;
22 | -webkit-background-size: cover;
23 | -moz-background-size: cover;
24 | -o-background-size: cover;
25 | background-size: cover;
26 | width: 100vw;
27 | height: 100vh;
28 | font-weight: 700;
29 | }
30 | body section canvas {
31 | width: 100vw;
32 | height: 100vh;
33 | }
--------------------------------------------------------------------------------
/canvas粒子文字动画/assets/img/bcg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/canvas粒子文字动画/assets/img/bcg.jpg
--------------------------------------------------------------------------------
/canvas粒子文字动画/assets/js/demo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * demo.js
3 | * https://coidea.website
4 | *
5 | * Licensed under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | *
8 | * Copyright 2018, COIDEA
9 | * https://coidea.website
10 | */
11 |
12 | var canvas = document.querySelector("#canvas"),
13 | ctx = canvas.getContext("2d"),
14 | link = document.createElement('link');
15 | particles = [],
16 | amount = 0,
17 | mouse = { x: -9999, y: -9999 },
18 | radius = 1,
19 | colors = [
20 | "rgba(252,248,254,0.85)",
21 | "rgba(220,203,255,0.75)",
22 | "rgba(154,112,124,0.85)",
23 | "rgba(192,213,255,0.85)",
24 | "rgba(244,223,254,0.75)"
25 | ],
26 | headline = document.querySelector("#headline"),
27 | ww = window.innerWidth,
28 | wh = window.innerHeight;
29 |
30 | function Particle(x, y) {
31 |
32 | this.x = Math.random() * ww;
33 | this.y = Math.random() * wh;
34 | this.dest = { x: x, y: y };
35 | this.r = Math.random() * 2 * Math.PI;
36 | this.vx = (Math.random() - 0.5) * 25;
37 | this.vy = (Math.random() - 0.5) * 25;
38 | this.accX = 0;
39 | this.accY = 0;
40 | this.friction = Math.random() * 0.025 + 0.94;
41 | this.color = colors[Math.floor(Math.random() * 2.75)];
42 | }
43 |
44 | Particle.prototype.render = function() {
45 |
46 | this.accX = (this.dest.x - this.x) / 1000;
47 | this.accY = (this.dest.y - this.y) / 1000;
48 | this.vx += this.accX;
49 | this.vy += this.accY;
50 | this.vx *= this.friction;
51 | this.vy *= this.friction;
52 | this.x += this.vx;
53 | this.y += this.vy;
54 |
55 | ctx.fillStyle = this.color;
56 | ctx.beginPath();
57 | ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
58 | ctx.fill();
59 |
60 | var a = this.x - mouse.x;
61 | var b = this.y - mouse.y;
62 |
63 | var distance = Math.sqrt(a * a + b * b);
64 | if (distance < (radius * 75)) {
65 |
66 | this.accX = (this.x - mouse.x) / 100;
67 | this.accY = (this.y - mouse.y) / 100;
68 | this.vx += this.accX;
69 | this.vy += this.accY;
70 | }
71 | }
72 |
73 | function onMouseMove(e) {
74 |
75 | mouse.x = e.clientX;
76 | mouse.y = e.clientY;
77 | }
78 |
79 | function onTouchMove(e) {
80 |
81 | if (e.touches.length > 0) {
82 |
83 | mouse.x = e.touches[0].clientX;
84 | mouse.y = e.touches[0].clientY;
85 | }
86 | }
87 |
88 | function onTouchEnd(e) {
89 |
90 | mouse.x = -9999;
91 | mouse.y = -9999;
92 | }
93 |
94 | function initScene() {
95 |
96 | ww = canvas.width = window.innerWidth;
97 | wh = canvas.height = window.innerHeight;
98 |
99 | ctx.clearRect(0, 0, canvas.width, canvas.height);
100 |
101 | link.rel = 'stylesheet';
102 | link.type = 'text/css';
103 | link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
104 | document.getElementsByTagName('head')[0].appendChild(link);
105 |
106 | ctx.font = 'bold 16vw "Abril Fatface"';
107 | ctx.textAlign = "center";
108 | ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);
109 |
110 | var data = ctx.getImageData(0, 0, ww, wh).data;
111 |
112 | ctx.clearRect(0, 0, canvas.width, canvas.height);
113 | ctx.globalCompositeOperation = "screen";
114 |
115 | particles = [];
116 | for (var i = 0; i < ww; i += Math.round(ww / 200)) {
117 | for (var j = 0; j < wh; j += Math.round(ww / 200)) {
118 | if (data[((i + j * ww) * 4) + 3] > 200) {
119 |
120 | particles.push(new Particle(i, j));
121 | }
122 | }
123 | }
124 | amount = particles.length;
125 | }
126 |
127 | function render(a) {
128 |
129 | requestAnimationFrame(render);
130 | ctx.clearRect(0, 0, canvas.width, canvas.height);
131 | for (var i = 0; i < amount; i++) {
132 |
133 | particles[i].render();
134 | }
135 | }
136 |
137 | headline.addEventListener("keyup", initScene);
138 | window.addEventListener("resize", initScene);
139 | window.addEventListener("mousemove", onMouseMove);
140 | window.addEventListener("touchmove", onTouchMove);
141 | window.addEventListener("touchend", onTouchEnd);
142 | initScene();
143 | requestAnimationFrame(render);
--------------------------------------------------------------------------------
/canvas粒子文字动画/assets/scss/demo.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
2 |
3 | body {
4 | background-color: #000000;
5 | margin: 0;
6 | overflow: hidden;
7 | font-size: 0;
8 | section {
9 | background: url(https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80) no-repeat center center fixed;
10 | -webkit-background-size: cover;
11 | -moz-background-size: cover;
12 | -o-background-size: cover;
13 | background-size: cover;
14 | width: 100vw;
15 | height: 100vh;
16 | canvas {
17 | width: 100vw;
18 | height: 100vh;
19 | }
20 | }
21 | }
--------------------------------------------------------------------------------
/canvas粒子文字动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 基于canvas的粒子组成文字动画特效
8 |
9 |
10 |
11 |
12 |
13 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/canvas粒子组合三角形3D旋转动画/README.md:
--------------------------------------------------------------------------------
1 | # HTML5 canvas粒子组合三角形3D结构旋转动画特效
2 |
3 | #### 介绍
4 |
5 | 一款html5 canvas粒子组合三角形3D结构旋转动画特效
6 |
7 | 备注：[tsParticles](https://github.com/matteobruni/tsparticles) - 用于创建粒子的轻量级TypeScript库
8 |
9 | #### 技术栈
10 |
11 | HTML5 canvas + CSS3 + JS + tsParticles
12 |
13 | #### 在线预览
14 |
15 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas粒子组合三角形3D旋转动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas粒子组合三角形3D旋转动画/index.html)
16 |
17 | #### 软件架构
18 |
19 | 软件架构说明
20 |
21 |
22 | #### 安装教程
23 |
24 | 1. xxxx
25 | 2. xxxx
26 | 3. xxxx
27 |
28 | #### 使用说明
29 |
30 | 1. xxxx
31 | 2. xxxx
32 | 3. xxxx
33 |
34 | #### 参与贡献
35 |
36 | 1. Fork 本仓库
37 | 2. 新建 Feat_xxx 分支
38 | 3. 提交代码
39 | 4. 新建 Pull Request
40 |
41 |
42 | #### 特技
43 |
44 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
45 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
46 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
47 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
48 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas粒子组合三角形3D旋转动画/css/style.css:
--------------------------------------------------------------------------------
1 | /* ---- reset ---- */
2 | body {
3 | margin: 0;
4 | font: normal 75% Arial, Helvetica, sans-serif;
5 | }
6 | canvas {
7 | display: block;
8 | vertical-align: bottom;
9 | }
10 | /* ---- tsparticles container ---- */
11 | #tsparticles {
12 | position: absolute;
13 | width: 100%;
14 | height: 100%;
15 | background-color: #0d47a1;
16 | background-image: url("");
17 | background-repeat: no-repeat;
18 | background-size: cover;
19 | background-position: 50% 50%;
20 | }
--------------------------------------------------------------------------------
/canvas粒子组合三角形3D旋转动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | html5 canvas粒子组合三角形3D结构旋转动画特效
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/canvas粒子组合三角形3D旋转动画/js/script.js:
--------------------------------------------------------------------------------
1 | tsParticles.load("tsparticles", {
2 | fpsLimit: 60,
3 | particles: {
4 | number: {
5 | value: 80,
6 | density: {
7 | enable: true,
8 | value_area: 800
9 | }
10 | },
11 | color: {
12 | value: "#ff0000",
13 | animation: {
14 | enable: true,
15 | speed: 20,
16 | sync: true
17 | }
18 | },
19 | shape: {
20 | type: "circle",
21 | stroke: {
22 | width: 0,
23 | color: "#000000"
24 | },
25 | polygon: {
26 | nb_sides: 5
27 | },
28 | image: {
29 | src: "https://cdn.matteobruni.it/images/particles/github.svg",
30 | width: 100,
31 | height: 100
32 | }
33 | },
34 | opacity: {
35 | value: 0.5,
36 | random: false,
37 | anim: {
38 | enable: false,
39 | speed: 3,
40 | opacity_min: 0.1,
41 | sync: false
42 | }
43 | },
44 | size: {
45 | value: 3,
46 | random: true,
47 | anim: {
48 | enable: false,
49 | speed: 20,
50 | size_min: 0.1,
51 | sync: false
52 | }
53 | },
54 | line_linked: {
55 | enable: true,
56 | distance: 100,
57 | color: "random",
58 | opacity: 0.4,
59 | width: 1,
60 | triangles: {
61 | enable: true,
62 | color: "#ffffff",
63 | opacity: 0.1
64 | }
65 | },
66 | move: {
67 | enable: true,
68 | speed: 6,
69 | direction: "none",
70 | random: false,
71 | straight: false,
72 | out_mode: "out",
73 | attract: {
74 | enable: false,
75 | rotateX: 600,
76 | rotateY: 1200
77 | }
78 | }
79 | },
80 | interactivity: {
81 | detect_on: "canvas",
82 | events: {
83 | onhover: {
84 | enable: true,
85 | mode: "repulse"
86 | },
87 | onclick: {
88 | enable: true,
89 | mode: "push"
90 | },
91 | resize: true
92 | },
93 | modes: {
94 | grab: {
95 | distance: 400,
96 | line_linked: {
97 | opacity: 1
98 | }
99 | },
100 | bubble: {
101 | distance: 400,
102 | size: 40,
103 | duration: 2,
104 | opacity: 0.8,
105 | speed: 3
106 | },
107 | repulse: {
108 | distance: 200
109 | },
110 | push: {
111 | particles_nb: 4
112 | },
113 | remove: {
114 | particles_nb: 2
115 | }
116 | }
117 | },
118 | retina_detect: true,
119 | background: {
120 | color: "#000000",
121 | image: "",
122 | position: "50% 50%",
123 | repeat: "no-repeat",
124 | size: "cover"
125 | }
126 | });
--------------------------------------------------------------------------------
/canvas鼠标跟随几何动画/README.md:
--------------------------------------------------------------------------------
1 | # 鼠标跟随几何动画
2 |
3 | #### 介绍
4 |
5 | 一款炫酷的鼠标跟随特效，鼠标移动可迸溅出不同色彩的几何图形，十分炫酷，相信大家一定会喜欢的，快来看看吧！
6 |
7 | #### 技术栈
8 |
9 | HTML5 canvas + CSS3 + JS +DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas鼠标跟随几何动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas鼠标跟随几何动画/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/canvas鼠标跟随几何动画/css/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | overflow: hidden;
3 | background-color: black;
4 | }
--------------------------------------------------------------------------------
/canvas鼠标跟随几何动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Growth II
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/canvas鼠标跟随几何动画/js/script.js:
--------------------------------------------------------------------------------
1 | const { PI, cos, sin, abs, sqrt, pow, floor, round, random } = Math;
2 | const HALF_PI = 0.5 * PI;
3 | const TAU = 2 * PI;
4 | const TO_RAD = PI / 180;
5 | const rand = n => n * random();
6 | const randRange = n => n - rand(2 * n);
7 | const fadeIn = (t, m) => t / m;
8 | const fadeOut = (t, m) => (m - t) / m;
9 | const fadeInOut = (t, m) => {
10 | let hm = 0.5 * m;
11 | return abs((t + hm) % m - hm) / hm;
12 | };
13 |
14 | let canvas;
15 | let ctx;
16 | let particles;
17 | let hover;
18 | let mouse;
19 | let tick;
20 |
21 | function setup() {
22 | canvas = {
23 | a: document.createElement('canvas'),
24 | b: document.createElement('canvas') };
25 |
26 | ctx = {
27 | a: canvas.a.getContext('2d'),
28 | b: canvas.b.getContext('2d') };
29 |
30 | canvas.b.style = `
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | width: 100%;
35 | height: 100%;
36 | `;
37 | document.body.appendChild(canvas.b);
38 | particles = [];
39 | hover = false;
40 | mouse = { x: 0, y: 0 };
41 | tick = 0;
42 | resize();
43 | draw();
44 | }
45 |
46 | function resize() {
47 | canvas.a.width = canvas.b.width = window.innerWidth;
48 | canvas.a.height = canvas.b.height = window.innerHeight;
49 | }
50 |
51 | function mousehandler(e) {
52 | hover = e.type === 'mousemove';
53 | if (hover) {
54 | mouse.x = e.clientX;
55 | mouse.y = e.clientY;
56 | }
57 | }
58 |
59 | function getParticle(x, y) {
60 | return {
61 | position: { x, y },
62 | size: 2 + rand(20),
63 | speed: 2 + rand(5),
64 | direction: floor(rand(6)) * 60 * TO_RAD,
65 | turnDirection: randRange(1) * 0.1,
66 | directionChangeRate: 20 + round(rand(10)),
67 | hue: rand(90) + 180,
68 | ttl: 100 + rand(50),
69 | life: 0,
70 | destroy: false,
71 | update() {
72 | this.destroy = this.life++ > this.ttl;
73 | this.direction += this.life % this.directionChangeRate === 0 && round(randRange(1)) * 60 * TO_RAD;
74 | this.velocity = fadeInOut(this.life, this.ttl) * this.speed;
75 | this.position.x += cos(this.direction) * this.velocity;
76 | this.position.y += sin(this.direction) * this.velocity;
77 | },
78 | draw() {
79 | this.update();
80 |
81 | ctx.a.beginPath();
82 | ctx.a.lineWidth = 2;
83 | ctx.a.strokeStyle = `hsla(${this.hue},100%,50%,${fadeInOut(this.life, this.ttl)})`;
84 | ctx.a.strokeRect(this.position.x - 0.5 * this.size, this.position.y - 0.5 * this.size, this.size, this.size);
85 | ctx.a.closePath();
86 | } };
87 |
88 | }
89 |
90 | function draw() {
91 | tick++;
92 | ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
93 | if (!hover) {
94 | mouse.x = window.innerWidth * 0.5 + cos(tick * 0.05) * 200;
95 | mouse.y = window.innerHeight * 0.5 + sin(tick * 0.05) * 200;
96 | }
97 | tick % 2 === 0 && particles.push(getParticle(mouse.x, mouse.y));
98 | for (let i = particles.length - 1; i >= 0; i--) {
99 | particles[i].draw();
100 | if (particles[i].destroy) particles.splice(i, 1);
101 | }
102 |
103 | ctx.b.fillStyle = 'rgba(0,0,0,0.05)';
104 | ctx.b.fillRect(0, 0, canvas.b.width, canvas.b.height);
105 |
106 | ctx.b.save();
107 | ctx.b.globalCompositeOperation = "lighter";
108 | ctx.b.filter = "blur(8px)";
109 | ctx.b.drawImage(canvas.a, 0, 0, canvas.b.width, canvas.b.height);
110 | ctx.b.restore();
111 |
112 | ctx.b.save();
113 | ctx.b.globalCompositeOperation = "lighter";
114 | ctx.b.drawImage(canvas.a, 0, 0, canvas.b.width, canvas.b.height);
115 | ctx.b.restore();
116 |
117 | window.requestAnimationFrame(draw);
118 | }
119 |
120 | window.addEventListener("load", setup);
121 | window.addEventListener("resize", resize);
122 | window.addEventListener("mousemove", mousehandler);
123 | window.addEventListener("mouseout", mousehandler);
--------------------------------------------------------------------------------
/canvas鼠标跟随爱心背景特效/README.md:
--------------------------------------------------------------------------------
1 | # h5 canvas鼠标跟随爱心背景特效
2 |
3 | #### 介绍
4 | html5 canvas实现的鼠标跟随爱心背景动画特效，html5情人节爱心背景动画。
5 |
6 | #### 在线预览
7 |
8 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/js-effects/canvas鼠标跟随爱心背景特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/canvas鼠标跟随爱心背景特效/index.html)
9 |
10 | #### 软件架构
11 | 软件架构说明
12 |
13 |
14 | #### 安装教程
15 |
16 | 1. xxxx
17 | 2. xxxx
18 | 3. xxxx
19 |
20 | #### 使用说明
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 参与贡献
27 |
28 | 1. Fork 本仓库
29 | 2. 新建 Feat_xxx 分支
30 | 3. 提交代码
31 | 4. 新建 Pull Request
32 |
33 |
34 | #### 特技
35 |
36 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
37 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
38 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
39 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
40 | 5. GitHub中文社区 https://www.githubs.cn/
41 |
--------------------------------------------------------------------------------
/canvas鼠标跟随爱心背景特效/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | html5情人节爱心背景动画特效
6 |
7 |
42 |
43 |
44 |
45 |
46 |
47 | 情人节快乐！
48 | 适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.
不支持Safari、IE8及以下浏览器。
49 |
50 |
51 |
145 |
146 |
147 |
148 |
149 |
--------------------------------------------------------------------------------
/css+js3D立体杯子旋转动画/README.md:
--------------------------------------------------------------------------------
1 | # CSS3 3D立体杯子旋转动画特效
2 |
3 | #### 介绍
4 |
5 | css3绘制的一款3D立体杯子旋转动画特效，3个不同颜色的杯子，点击杯子可3D旋转展示。
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS + DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/css+js3D立体杯子旋转动画/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/css+js3D立体杯子旋转动画/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/css+js3D立体杯子旋转动画/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | css3 3D立体杯子旋转动画特效
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
46 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
15 |
16 |
17 |
18 |
19 |
Hey now, you're an allstar
20 |
21 |
22 |
23 |
24 |
Hey now, you're a rock star
25 |
26 |
27 |
28 |
29 |
30 |
31 |
Get your game on, go play
32 |
33 |
34 |
35 |
36 |
Get the show on, get paid
37 |
38 |
39 |
44 |
45 |
![]()
46 |
47 |
48 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | - 1
20 | - 2
21 | - 3
22 | - 4
23 | - 5
24 | - 6
25 | - 7
26 | - 8
27 | - 9
28 | - 10
29 | - 11
30 | - 12
31 |
32 |
❤❤❤❤❤❤❤❤
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/css+js多个爱心层叠波浪动画/js/script.js:
--------------------------------------------------------------------------------
1 | NodeList.prototype.animate = function (keyframes, options) {
2 | this.forEach((el, i) => {
3 | let delay = options.delay;
4 | if (options.stagger) delay = options.delay + options.stagger * i;
5 | el.animate(keyframes, {
6 | ...options,
7 | delay
8 | });
9 | });
10 | };
11 |
12 | const colors = ["#7400b8","#6930c3","#5e60ce","#5390d9","#4ea8de","#48bfe3","#56cfe1","#64dfdf","#72efdd","#80ffdb"];
13 | let rainbowEnd = '';
14 | let rainbowEnd2 = '';
15 | colors.reverse().forEach((c, i) => {
16 | rainbowEnd += `,0 ${(i - 5) * 5}vh ${i * 2}px ${c}`;
17 | });
18 | colors.forEach((c, i) => {
19 | rainbowEnd2 += `,0 ${(i - 5) * -5}vh ${i * 2}px ${c}`;
20 | });
21 |
22 | rainbowEnd = rainbowEnd.substring(1);
23 | rainbowEnd2 = rainbowEnd2.substring(1);
24 |
25 | document.querySelectorAll('h1 span').animate({
26 | textShadow: [rainbowEnd, rainbowEnd2]
27 | }, {
28 | duration: 2000,
29 | stagger: 200,
30 | delay: -1000,
31 | iterations: Infinity,
32 | easing: 'cubic-bezier(0.3, 0, 0.7, 1)',
33 | direction: 'alternate',
34 | fill: 'both'
35 | });
--------------------------------------------------------------------------------
/css+js手风琴布局卡片/css/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 | body {
7 | font-family: Roboto, sans-serif;
8 | margin: 0;
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 |
13 | height: 100vh;
14 | overflow: hidden;
15 | }
16 |
17 | .container {
18 | display: flex;
19 |
20 | width: 50vw;
21 | }
22 |
23 | .panel {
24 | background-size: auto 100%;
25 | background-position: center;
26 | background-repeat: no-repeat;
27 | height: 80vh;
28 | border-radius: 60px;
29 | color: #fff;
30 | cursor: pointer;
31 | flex: 1;
32 | margin: 10px;
33 | position: relative;
34 | transition: flex 0.7s ease-in;
35 | }
36 |
37 | .panel h3 {
38 | font-size: 24px;
39 | position: absolute;
40 | bottom: 20px;
41 | left: 40px;
42 | margin: 0;
43 | opacity: 0;
44 | }
45 |
46 | .panel.active {
47 | flex: 5;
48 | }
49 |
50 | .panel.active h3 {
51 | opacity: 1;
52 | transition: opacity 0.3s ease-in 0.4s;
53 | }
54 |
55 | @media (max-width: 480px) {
56 | .container {
57 | width: 100vw;
58 | }
59 |
60 | .panel:nth-of-type(4),
61 | .panel:nth-of-type(5) {
62 | display: none;
63 | }
64 | }
--------------------------------------------------------------------------------
/css+js手风琴布局卡片/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Cyberpunk 2077 Expanding Card - HTML, CSS, Javascript
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 | Expanding Cards
24 |
25 |
26 |
27 |
28 |
30 |
探索世界
31 |
32 |
33 |
34 |
35 |
全新的角色
36 |
37 |
38 |
39 |
40 |
全新的任务
41 |
42 |
43 |
44 |
46 |
多重结局
47 |
48 |
49 |
50 |
51 |
自由畅玩
52 |
53 |
54 |
55 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
19 |
20 |
21 |
22 | Your name (max 10 chars) :
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/css+js箭头跟随鼠标/README.md:
--------------------------------------------------------------------------------
1 | # 箭头动态特效，鼠标跟随css代码模板
2 |
3 | #### 介绍
4 | 这是一款紫色的箭头动态特效，鼠标跟随css代码模板，该模板箭头跟随鼠标移动，全部转向鼠标图标方向，十分有趣。
5 |
6 | #### 技术栈
7 |
8 | HTML + CSS3 + JS + DOM
9 |
10 | #### 在线预览
11 |
12 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/css-effects/other/css+js箭头跟随鼠标/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/css-effects/other/css+js箭头跟随鼠标/index.html)
13 |
14 | #### 软件架构
15 | 软件架构说明
16 |
17 |
18 | #### 安装教程
19 |
20 | 1. xxxx
21 | 2. xxxx
22 | 3. xxxx
23 |
24 | #### 使用说明
25 |
26 | 1. xxxx
27 | 2. xxxx
28 | 3. xxxx
29 |
30 | #### 参与贡献
31 |
32 | 1. Fork 本仓库
33 | 2. 新建 Feat_xxx 分支
34 | 3. 提交代码
35 | 4. 新建 Pull Request
36 |
37 |
38 | #### 特技
39 |
40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
44 | 5. GitHub中文社区 https://www.githubs.cn/
45 |
--------------------------------------------------------------------------------
/css+js箭头跟随鼠标/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 箭头跟随鼠标效果
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/css+js箭头跟随鼠标/script.js:
--------------------------------------------------------------------------------
1 | var i, count = 200,
2 | arrow,
3 | body,
4 | init,
5 | prefixTransform,
6 | touch = false,
7 | touchx,
8 | touchy;
9 |
10 | body = document.querySelector("body");
11 | body.innerHTML = (new Array(count + 1)).join('');
12 | arrow = document.getElementsByClassName("arrow");
13 | //prefixTransform=["transform","webkitTransform","MozTransform"].filter(function(el) { return typeof(arrow[0].style[el])==="string"; }).pop();
14 | prefixTransform = "transform";
15 | init = function() {
16 | setTimeout(function() {
17 | for (i = 0; i < count; i += 1) {
18 | arrow[i].style.left = Math.floor(Math.random() * window.innerWidth) + "px";
19 | arrow[i].style.top = Math.floor(Math.random() * window.innerHeight) + "px";
20 | arrow[i].style[prefixTransform] = "rotate(" + Math.floor(Math.random() * 360) + "deg)";
21 | }
22 | }, 0);
23 | }
24 |
25 |
26 | window.addEventListener('touchstart', function(e) {
27 | touch = true;
28 | var x = e.touches[0].pageX,
29 | y = e.touches[0].pageY;
30 | arrowsPointTo(x, y);
31 | })
32 |
33 | window.addEventListener('touchmove', function(e) {
34 | if (!touch) return;
35 | var x = e.touches[0].pageX,
36 | y = e.touches[0].pageY;
37 | arrowsPointTo(x, y);
38 | e.preventDefault();
39 | })
40 |
41 | window.addEventListener('touchend', function(e) {
42 | touch = false;
43 | })
44 |
45 | window.addEventListener('mousemove', function(event) {
46 | var x = event.clientX,
47 | y = event.clientY;
48 | arrowsPointTo(x, y);
49 | });
50 |
51 |
52 |
53 | function arrowsPointTo(x, y) {
54 | var i, deg;
55 | for (i = 0; i < count; i += 1) {
56 | deg = angle({
57 | "x": parseInt(arrow[i].style.left, 10),
58 | "y": parseInt(arrow[i].style.top, 10)
59 | }, {
60 | "x": x,
61 | "y": y
62 | });
63 | arrow[i].style[prefixTransform] = "rotate(" + deg + "deg)";
64 | }
65 | }
66 |
67 | function angle(p1, p2) {
68 | var dx = p2.x - p1.x,
69 | dy = p2.y - p1.y,
70 | c = Math.sqrt(dx * dx + dy * dy),
71 | deg;
72 | deg = (c > 0) ? Math.asin(dy / c) / (Math.PI / 180) : 0;
73 | deg = (dx > 0) ? deg : 180 - deg;
74 | return (deg).toFixed(2);
75 | }
76 |
77 |
78 | window.onresize = init;
79 | init();
--------------------------------------------------------------------------------
/css+js箭头跟随鼠标/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #004;
3 | overflow: hidden;
4 | }
5 |
6 | .arrow {
7 | position: absolute;
8 | background: #76f;
9 | width: 40px;
10 | height: 5px;
11 | transform-origin: 0% 50%;
12 | }
13 |
14 | .arrow:after {
15 | display: block;
16 | content: '';
17 | border-top: 7px solid transparent;
18 | border-bottom: 8px solid transparent;
19 | border-left: 14px solid #76f;
20 | transform: translate(40px, -5px);
21 | }
--------------------------------------------------------------------------------
/css+js鼠标悬停图片剪辑路径效果/README.md:
--------------------------------------------------------------------------------
1 | # 鼠标悬停图片剪辑路径效果
2 |
3 | #### 介绍
4 |
5 | 一款css鼠标悬停图片剪辑路径效果，当鼠标悬停在图片上时，图片按一定路径放大的动画特效，生动形象，让图片灵活起来。
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS + DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/css+js鼠标悬停图片剪辑路径效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/css+js鼠标悬停图片剪辑路径效果/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/css+js鼠标悬停图片剪辑路径效果/css/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --gutter: 0.75rem;
3 | }
4 |
5 | .image {
6 | width: 100%;
7 | }
8 |
9 | .grid {
10 | width: 100%;
11 | max-width: 60rem;
12 | margin: 1rem auto;
13 | display: grid;
14 | grid-gap: var(--gutter);
15 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16 | background: #e8e8e8;
17 | }
18 |
19 | .item {
20 | filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
21 | will-change: filter;
22 | }
23 |
24 | .envelope {
25 | clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
26 | will-change: clip-path;
27 | pointer-events: none;
28 | }
29 |
30 | .item:hover {
31 | filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.6));
32 | }
33 |
34 | .item:hover .envelope {
35 | animation: 0.25s ease-out forwards grow;
36 | }
37 |
38 | .item.go-back .envelope {
39 | animation: 0.3s ease-in shrink;
40 | }
41 |
42 | @keyframes grow {
43 | 0% {
44 | clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
45 | }
46 | 50% {
47 | clip-path: polygon(0% 0%, 95% 5%, 100% 100%, 5% 95%);
48 | }
49 | 100% {
50 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
51 | }
52 | }
53 | @keyframes shrink {
54 | 0% {
55 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
56 | }
57 | 50% {
58 | clip-path: polygon(0% 0%, 95% 5%, 100% 100%, 5% 95%);
59 | }
60 | 100% {
61 | clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
62 | }
63 | }
--------------------------------------------------------------------------------
/css+js鼠标悬停图片剪辑路径效果/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Clip path
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
43 |
44 |
45 |
36 |
37 |
38 |
39 |
150 |
151 |
152 |
--------------------------------------------------------------------------------
/h5+js大海蓝天雁飞过特效/README.md:
--------------------------------------------------------------------------------
1 | # html5 svg大海蓝天大雁飞过动画场景特效
2 |
3 | #### 介绍
4 | 一款基于TweenMax+html5 svg制作的大海蓝天白云大雁飞过动画场景特效，鼠标左右移动有互动效果。
5 |
6 | #### 技术栈
7 |
8 | HTML5 SVG + CSS3 + JS + TweenMax + DOM
9 |
10 | #### 在线预览
11 |
12 | [Github仓库](https://github.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.github.io/js-effects/h5+js大海蓝天雁飞过特效/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/css-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/h5+js大海蓝天雁飞过特效/index.html)
13 |
14 | #### 软件架构
15 | 软件架构说明
16 |
17 |
18 | #### 安装教程
19 |
20 | 1. xxxx
21 | 2. xxxx
22 | 3. xxxx
23 |
24 | #### 使用说明
25 |
26 | 1. xxxx
27 | 2. xxxx
28 | 3. xxxx
29 |
30 | #### 参与贡献
31 |
32 | 1. Fork 本仓库
33 | 2. 新建 Feat_xxx 分支
34 | 3. 提交代码
35 | 4. 新建 Pull Request
36 |
37 |
38 | #### 特技
39 |
40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
44 | 5. GitHub中文社区 https://www.githubs.cn/
45 |
--------------------------------------------------------------------------------
/h5+js大海蓝天雁飞过特效/css/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width:100%;
3 | height:100%;
4 | overflow:hidden;
5 | background:linear-gradient(to top, rgb(255,255,255) 55%, rgb(110,215,255) 80%, rgb(75,100,255) 130%);
6 | min-height:440px;
7 | padding:0;
8 | margin:0;
9 | }
10 |
11 | * {
12 | position:absolute;
13 | user-select: none;
14 | }
--------------------------------------------------------------------------------
/h5+js大海蓝天雁飞过特效/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | html5 svg大海蓝天大雁飞过动画场景特效
6 |
7 |
8 |
9 |
10 |
11 |
12 |
18 |
19 |
20 |
25 |
11 |
12 |
13 |
19 |
20 |
26 |
27 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/jquery-3D卡片交互悬停动画/js/script.js:
--------------------------------------------------------------------------------
1 | var limits = 15.0;
2 |
3 | $(".card").mousemove(function (e) {
4 | var rect = e.target.getBoundingClientRect();
5 | var x = e.clientX - rect.left; //x position within the element.
6 | var y = e.clientY - rect.top; //y position within the element.
7 | var offsetX = x / rect.width;
8 | var offsetY = y / rect.height;
9 |
10 | var rotateY = ((offsetX - 0) / (1 - 0)) * (limits - -limits) + -limits;
11 | var rotateX = ((offsetY - 0) / (1 - 0)) * (limits - -limits) + -limits;
12 |
13 | var shadowOffsetX = ((offsetX - 0) / (1 - 0)) * (16 - -16) + -16;
14 | var shadowOffsetY = ((offsetY - 0) / (1 - 0)) * (16 - -16) + -16;
15 |
16 | $(this).css({
17 | "box-shadow":
18 | (1 / 6) * shadowOffsetX * -1 +
19 | "px " +
20 | (1 / 6) * shadowOffsetY * -1 +
21 | "px 3px rgba(0, 0, 0, 0.051), " +
22 | (2 / 6) * shadowOffsetX * -1 +
23 | "px " +
24 | (2 / 6) * shadowOffsetY * -1 +
25 | "px 7.2px rgba(0, 0, 0, 0.073), " +
26 | (3 / 6) * shadowOffsetX * -1 +
27 | "px " +
28 | (3 / 6) * shadowOffsetY * -1 +
29 | "px 13.6px rgba(0, 0, 0, 0.09), " +
30 | (4 / 6) * shadowOffsetX * -1 +
31 | "px " +
32 | (4 / 6) * shadowOffsetY * -1 +
33 | "px 24.3px rgba(0, 0, 0, 0.107), " +
34 | (5 / 6) * shadowOffsetX * -1 +
35 | "px " +
36 | (5 / 6) * shadowOffsetY * -1 +
37 | "px 45.5px rgba(0, 0, 0, 0.129), " +
38 | shadowOffsetX * -1 +
39 | "px " +
40 | shadowOffsetY * -1 +
41 | "px 109px rgba(0, 0, 0, 0.18)",
42 | transform:
43 | "perspective(1000px) rotateX(" +
44 | -rotateX +
45 | "deg) rotateY(" +
46 | rotateY +
47 | "deg)"
48 | });
49 |
50 | var glarePos = rotateX + rotateY + 90;
51 | $(this)
52 | .children()
53 | .children()
54 | .css("left", glarePos + "%");
55 | });
56 |
57 | $(".card").mouseleave(function (e) {
58 | $(".card").css({"box-shadow": "0px 0px 3px rgba(0, 0, 0, 0.051), 0px 0px 7.2px rgba(0, 0, 0, 0.073), 0px 0px 13.6px rgba(0, 0, 0, 0.09), 0px 0px 24.3px rgba(0, 0, 0, 0.107), 0px 0px 45.5px rgba(0, 0, 0, 0.129), 0px 0px 109px rgba(0, 0, 0, 0.18)", "transform": "scale(1.0)"});
59 | $(".glare").css("left", "100%");
60 | });
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/README.md:
--------------------------------------------------------------------------------
1 | # jquery层叠式手风琴滑动切换代码
2 |
3 | #### 介绍
4 |
5 | jquery层叠式手风琴滑动切换代码，基于[WOW.js](https://www.delac.io/WOW/docs.html)默认设置元素动画，鼠标点击可以滑动切换图片。注：[WOW.js是Animate.css的黄金搭档](https://blog.csdn.net/sunyctf/article/details/128534064)
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS + JQuery + WOW.js
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/jquery层叠式手风琴滑动切换代码/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/jquery层叠式手风琴滑动切换代码/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/css/style.css:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | /* DaTouWang URL: www.datouwang.com */
3 | .content-topic{
4 | margin:0px auto;
5 | padding:20px 0px;
6 | }
7 | .content-what{
8 | text-align:center;
9 | background-color:#f9f9f9
10 | }
11 | .content-what .what-list{
12 | font-size:0;height:448px;
13 | }
14 | .content-what .what-item{
15 | display:inline-block;
16 | position:relative;
17 | width:60px;
18 | margin-left:-2px;
19 | line-height:1.6;
20 | font-size:14px;
21 | text-align:center;
22 | vertical-align:middle;
23 | background-color:#fff;
24 | color:#323232;
25 | border-radius:4px;
26 | box-shadow:0 0 10px 0 rgba(0,0,0,.15);
27 | transition:width .5s ease,height .5s ease,box-shadow .3s ease;cursor:pointer
28 | }
29 | .content-backers .backers-detail,.content-invers .invers-item{
30 | box-shadow:0 0 4px 0 rgba(179,179,179,.17),inset 0 -3px 0 0 rgba(103,77,199,.05)
31 | }
32 | .content-what .what-item:hover{
33 | background-image:linear-gradient(160deg,rgba(101,70,194,.2) 0,rgba(119,115,228,.2) 50%,rgba(93,136,238,.2) 100%)
34 | }
35 | .content-what .what-item .what-item-bg{
36 | width:100%;
37 | height:100%;
38 | position:absolute;
39 | top:0;
40 | left:0;
41 | opacity:0;
42 | border-radius: 4px;
43 | box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
44 | transition:opacity .4s ease .1s
45 | }
46 | .content-what .what-item span{
47 | visibility:visible;
48 | transition:opacity .15s ease .4s;
49 | position:absolute;
50 | width:14px;top:50%;left:22px;transform:translateY(-50%)
51 | }
52 | .content-what .what-item-1 .what-item-bg{
53 | background:url("../img/t1.png") center/cover no-repeat;background-size:100%;
54 | }
55 | .content-what .what-item-2 .what-item-bg{
56 | background:url("../img/t2.png") center/cover no-repeat;background-size:100%;
57 | }
58 | .content-what .what-item-3 .what-item-bg{
59 | background:url("../img/t3.png") center/cover no-repeat;background-size:100%;
60 | }
61 | .content-what .what-item-4 .what-item-bg{
62 | background:url("../img/t4.png") center/cover no-repeat;background-size:100%;
63 | }
64 | .content-what .what-item-5 .what-item-bg{
65 | background:url("../img/t5.png") center/cover no-repeat;background-size:100%;
66 | }
67 | .content-what .what-item-6 .what-item-bg{
68 | background:url("../img/t6.png") center/cover no-repeat;background-size:100%;
69 | }
70 | .content-what .what-item-7 .what-item-bg{
71 | background:url("../img/t7.png") center/cover no-repeat;background-size:100%;
72 | }
73 |
74 | .content-what .what-item-active{
75 | width:857px;height:441px!important;background-size:cover;margin-right:2px;z-index:9!important;transition:width .4s ease,height .4s ease;
76 | }
77 | .content-what .what-item-active span{
78 | visibility:hidden;opacity:0
79 | }
80 | .content-what .what-item-active .what-item-bg{
81 | transition:opacity .5s ease 0s;opacity:1;visibility:visible
82 | }
83 | .content-what .what-item:nth-child(1){
84 | height:388px;padding:0 22px;z-index:1
85 | }
86 | .content-what .what-item:nth-child(2){
87 | height:408px;padding:0 22px;z-index:3
88 | }
89 | .content-what .what-item:nth-child(3){
90 | height:428px;padding:0 22px;z-index:5
91 | }
92 | .content-what .what-item:nth-child(4){
93 | height:448px;padding:0 22px;z-index:7
94 | }
95 | .content-what .what-item:nth-child(5){
96 | height:428px;padding:0 22px;z-index:5
97 | }
98 | .content-what .what-item:nth-child(6){
99 | height:408px;padding:0 22px;z-index:3
100 | }
101 | .content-what .what-item:nth-child(7){
102 | height:388px;padding:0 22px;z-index:2
103 | }
104 | .content-main{
105 | margin-top:20px;
106 | }
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t1.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t2.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t3.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t4.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t5.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t6.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/img/t7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/jquery层叠式手风琴滑动切换代码/img/t7.png
--------------------------------------------------------------------------------
/jquery层叠式手风琴滑动切换代码/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | jquery层叠式手风琴滑动切换代码演示
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 手风琴图片轮播
23 |
24 |
25 |
29 |
33 |
37 |
41 |
45 |
49 |
53 |
10 |
11 |
12 |
13 |
14 |
某某某相册
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
30 |
31 |
32 |
33 |
34 |
![]()
35 |
36 |
37 |
40 |
43 |
44 |
45 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
1/2
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
Happy New Year
2023
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/js+css3全屏2023新年快乐动画特效/js/script.js:
--------------------------------------------------------------------------------
1 | const stars = () => {
2 | const count = 200;
3 | const section = document.querySelector('.section');
4 | let i = 0;
5 | while (i < count) {
6 | // 在内存中创建一个新的空元素对象,如i或是div
7 | const star = document.createElement('i');
8 | // 定义变量x和y ：通过Math.random()方法随机的使星星出现在不同位置，当然星星的定位要在文档显示区内
9 | const x = Math.floor(Math.random() * window.innerWidth);
10 | const y = Math.floor(Math.random() * window.innerHeight);
11 | const size = Math.random() * 4;
12 | // 让星星始终会在网页最左最顶端出现，通过想x和y的定位，我们要让它出现在页面各个不同的位置
13 | star.style.left = x + 'px';
14 | star.style.top = y + 'px';
15 | // 利用Math.random()这个方法来随机取星星的大小：为每颗星星设置随机的宽高范围为[0,5)
16 | star.style.width = 1 + size + 'px';
17 | star.style.height = 1 + size + 'px';
18 |
19 | const duration = Math.random() * 2;
20 |
21 | // 设置持续时间
22 | // js中除了减法计算之外，不允许随便写-。因为会混淆。所以，DOM标准规定，所有带-的css属性名，一律去横线变驼峰
23 | // css属性animation-duration,在js中改写为驼峰形式：animationDuration
24 | star.style.animationDuration = 2 + duration + 's';
25 | // 设置延迟
26 | star.style.animationDelay = 2 + duration + 's';
27 | // 将新元素添加到DOM树：把新创建的节点追加到父元素下所有直接子元素的结尾
28 | section.appendChild(star);
29 | i++;
30 | }
31 | }
32 | // 调用函数
33 | stars();
--------------------------------------------------------------------------------
/原生js多形式日历控件/README.md:
--------------------------------------------------------------------------------
1 | # 用原生 JS 编写的多种形式的日历控件！
2 |
3 | #### 介绍
4 |
5 | 一款强大且简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/原生js多形式日历控件/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/原生js多形式日历控件/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/原生js多形式日历控件/css/fonts/icomoon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/原生js多形式日历控件/css/fonts/icomoon.eot
--------------------------------------------------------------------------------
/原生js多形式日历控件/css/fonts/icomoon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/原生js多形式日历控件/css/fonts/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/原生js多形式日历控件/css/fonts/icomoon.ttf
--------------------------------------------------------------------------------
/原生js多形式日历控件/css/fonts/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunyctf/js-effects/2bead301fcd9cd45c24df2c8a1785243eeade5ad/原生js多形式日历控件/css/fonts/icomoon.woff
--------------------------------------------------------------------------------
/原生js表单验证插件/README.md:
--------------------------------------------------------------------------------
1 | # 原生JS表单验证插件
2 |
3 | #### 介绍
4 |
5 | 原生JS，表单验证，可扩展，简单易用
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/原生js表单验证插件/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/原生js表单验证插件/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/原生js表单验证插件/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | JS校验
6 |
7 |
15 |
16 |
18 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/标题响应式导航栏菜单弹出效果/README.md:
--------------------------------------------------------------------------------
1 | # 标题响应式导航栏菜单弹出效果
2 |
3 | #### 介绍
4 | 一款标题响应式导航栏菜单弹出效果代码，浅蓝色和蓝色的拼接，给人一种水天相接的感受。
5 |
6 | #### 技术栈
7 |
8 | HTML+CSS+JQuery
9 |
10 | #### 在线预览
11 |
12 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/标题响应式导航栏菜单弹出效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/标题响应式导航栏菜单弹出效果/index.html)
13 |
14 | #### 软件架构
15 | 软件架构说明
16 |
17 |
18 | #### 安装教程
19 |
20 | 1. xxxx
21 | 2. xxxx
22 | 3. xxxx
23 |
24 | #### 使用说明
25 |
26 | 1. xxxx
27 | 2. xxxx
28 | 3. xxxx
29 |
30 | #### 参与贡献
31 |
32 | 1. Fork 本仓库
33 | 2. 新建 Feat_xxx 分支
34 | 3. 提交代码
35 | 4. 新建 Pull Request
36 |
37 |
38 | #### 特技
39 |
40 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
41 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
42 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
43 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
44 | 5. GitHub中文社区 https://www.githubs.cn/
45 |
--------------------------------------------------------------------------------
/标题响应式导航栏菜单弹出效果/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | background: #1D90F5;
6 | min-height: 100vh;
7 | margin: 0;
8 | font-family: roboto;
9 | }
10 | body:before {
11 | content: "";
12 | background: #E8FAFF;
13 | height: 50%;
14 | width: 100%;
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | }
19 |
20 | .menu {
21 | display: block;
22 | box-sizing: border-box;
23 | background: white;
24 | height: 87.75px;
25 | width: 87.75px;
26 | padding: 36px;
27 | border-radius: 6px;
28 | overflow: hidden;
29 | position: relative;
30 | box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
31 | transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
32 | }
33 | .menu.expanded {
34 | width: 351px;
35 | }
36 |
37 | span {
38 | padding: 9px;
39 | white-space: nowrap;
40 | visibility: visible;
41 | opacity: 1;
42 | transition: 0.3s;
43 | transform: rotateY(0deg);
44 | }
45 | span:nth-of-type(1) {
46 | transition-delay: 0.4s;
47 | }
48 | span:nth-of-type(2) {
49 | transition-delay: 0.5s;
50 | }
51 | span:nth-of-type(3) {
52 | transition-delay: 0.6s;
53 | }
54 | span:nth-of-type(4) {
55 | transition-delay: 0.7s;
56 | }
57 | span.hidden {
58 | width: 0;
59 | visibility: hidden;
60 | opacity: 0;
61 | transform: rotateY(90deg);
62 | }
63 | span.hidden:nth-of-type(1) {
64 | transition-delay: 0.3s;
65 | }
66 | span.hidden:nth-of-type(2) {
67 | transition-delay: 0.2s;
68 | }
69 | span.hidden:nth-of-type(3) {
70 | transition-delay: 0.1s;
71 | }
72 | span.hidden:nth-of-type(4) {
73 | transition-delay: 0s;
74 | }
75 | span a {
76 | color: black;
77 | text-decoration: none;
78 | font-size: 16.3636363636px;
79 | transition: 0.3s;
80 | }
81 | span a:hover {
82 | color: #1D90F5;
83 | }
84 |
85 | .container {
86 | position: absolute;
87 | top: 22.5px;
88 | right: calc(100% - 73.125px);
89 | height: 42.75px;
90 | width: 58.5px;
91 | transition: 1s;
92 | }
93 | .container.close {
94 | right: 0;
95 | }
96 |
97 | .toggle {
98 | position: relative;
99 | height: 42.75px;
100 | width: 58.5px;
101 | cursor: pointer;
102 | }
103 | .toggle:after, .toggle:before {
104 | content: "";
105 | background: #1D90F5;
106 | width: 36px;
107 | height: 4.5px;
108 | margin: auto;
109 | position: absolute;
110 | top: 0;
111 | bottom: 0;
112 | right: 0;
113 | left: 0;
114 | transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
115 | }
116 | .toggle:before {
117 | top: -30%;
118 | }
119 | .toggle:after {
120 | top: 30%;
121 | }
122 | .toggle.close:before {
123 | transform: rotate(-225deg);
124 | top: 0;
125 | }
126 | .toggle.close:after {
127 | transform: rotate(225deg);
128 | top: 0;
129 | }
--------------------------------------------------------------------------------
/标题响应式导航栏菜单弹出效果/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Header Navigation Menu
6 |
7 |
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/标题响应式导航栏菜单弹出效果/js/script.js:
--------------------------------------------------------------------------------
1 | $('.toggle').on('click', function() {
2 | $('.menu').toggleClass('expanded');
3 | $('span').toggleClass('hidden');
4 | $('.container , .toggle').toggleClass('close');
5 | });
--------------------------------------------------------------------------------
/鼠标悬停层叠拆分文字动态效果/README.md:
--------------------------------------------------------------------------------
1 | # 鼠标悬停层叠拆分文字动态效果
2 |
3 | #### 介绍
4 |
5 | 一款鼠标悬停层叠拆分文字动态效果，鼠标悬停可以实现层叠文字拆分的动画效果，出现多种颜色的文字特效，相信大家一定会喜欢的！
6 |
7 | #### 技术栈
8 |
9 | HTML + CSS + JS + DOM
10 |
11 | #### 在线预览
12 |
13 | [Github仓库](https://github.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.github.io/js-effects/鼠标悬停层叠拆分文字动态效果/index.html) 🌐 [Gitee仓库](https://gitee.com/sunyctf/js-effects) | [Demo预览](https://sunyctf.gitee.io/js-effects/鼠标悬停层叠拆分文字动态效果/index.html)
14 |
15 | #### 软件架构
16 |
17 | 软件架构说明
18 |
19 |
20 | #### 安装教程
21 |
22 | 1. xxxx
23 | 2. xxxx
24 | 3. xxxx
25 |
26 | #### 使用说明
27 |
28 | 1. xxxx
29 | 2. xxxx
30 | 3. xxxx
31 |
32 | #### 参与贡献
33 |
34 | 1. Fork 本仓库
35 | 2. 新建 Feat_xxx 分支
36 | 3. 提交代码
37 | 4. 新建 Pull Request
38 |
39 |
40 | #### 特技
41 |
42 | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
43 | 2. GitHub 官方博客 [blog.github.com](https://github.blog)
44 | 3. 你可以 [https://github.com/explore](https://github.com/explore) 这个地址来了解 GitHub 上的优秀开源项目
45 | 4. GitHub官方提供的使用手册 [https://docs.github.com/cn](https://docs.github.com/cn)
46 | 5. GitHub中文社区 https://www.githubs.cn/
--------------------------------------------------------------------------------
/鼠标悬停层叠拆分文字动态效果/css/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --alpha: 0.8;
3 | }
4 |
5 | html, body {
6 | height: 100%;
7 | }
8 |
9 | body {
10 | background-color: #191919;
11 | margin: 0;
12 | overflow-x: hidden;
13 | }
14 |
15 | ::-moz-selection {
16 | background-color: rgba(255, 0, 139, 0.8);
17 | }
18 |
19 | ::selection {
20 | background-color: rgba(255, 0, 139, 0.8);
21 | }
22 |
23 | .heading {
24 | height: 100%;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | }
29 |
30 | .typo {
31 | color: rgba(255, 255, 255, var(--alpha));
32 | cursor: default;
33 | font-family: "Oswald", Helvetica, Arial, sans-serif;
34 | font-size: 15vmax;
35 | font-weight: bold;
36 | line-height: 1.2;
37 | margin: 0;
38 | outline: none;
39 | padding: 0 10% 1.2% 10%;
40 | text-align: center;
41 | text-transform: uppercase;
42 | transition: color 0.1s linear;
43 | }
--------------------------------------------------------------------------------
/鼠标悬停层叠拆分文字动态效果/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Hover Alpha Effect
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Living in the edge
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/鼠标悬停层叠拆分文字动态效果/js/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | * HOVER ALPHA EFFECT
3 | * Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful text-shadow effects.
4 | *
5 | * Headline is editable, so place your cursor in the text and type anything else you'd like.
6 | *
7 | * #028 - #100DaysOfCode
8 | * By ilithya | 2019
9 | */
10 |
11 | function getTwoDecimal(num) {
12 | // The +0.5 smoothens the transition change
13 | return parseFloat(num.toFixed(2) + 0.5);
14 | }
15 |
16 | const mouse = {
17 | decimal(coord) {
18 | return getTwoDecimal(coord / 1000);
19 | },
20 | x(e) {
21 | return Math.abs(e.clientX - window.innerWidth / 2);
22 | },
23 | y(e) {
24 | return Math.abs(e.clientY - window.innerHeight / 2);
25 | } };
26 |
27 |
28 | const changeTextAlphaVal = (txt, e) => {
29 | const root = document.querySelector(":root");
30 | const cssVar = "--alpha";
31 | const currentAlpha = getComputedStyle(root).
32 | getPropertyValue(cssVar).
33 | trim();
34 |
35 | const max = parseFloat(currentAlpha);
36 | const dx = mouse.decimal(mouse.x(e));
37 | const dy = mouse.decimal(mouse.y(e));
38 |
39 | let alphaVal;
40 | if (dx <= 0) {
41 | alphaVal = dy >= max ? dy : getTwoDecimal(max - dy);
42 | } else {
43 | alphaVal = dx >= max ? dx : getTwoDecimal(max - dx);
44 | }
45 |
46 | txt.style.setProperty(cssVar, alphaVal);
47 | };
48 |
49 | function createShadow(e, currTarget) {
50 | // Walk effect based on Wes Bos' Mouse Move Shadow Exercise
51 | // https://tinyurl.com/touabxe
52 | const walk = Math.round(Math.max(window.innerWidth, window.innerHeight) / 6); // Or use 150?
53 | const coordWalk = (coord, side) => Math.round(coord / side * walk - walk / 2);
54 | const xWalk = coordWalk(e.clientX, currTarget.offsetWidth);
55 | const yWalk = coordWalk(e.clientY, currTarget.offsetHeight);
56 |
57 | const pink = [255, 0, 139];
58 | const blue = [0, 86, 255];
59 | const yellow = [255, 240, 0];
60 | const typoAlpha = 0.6;
61 |
62 | const typo = currTarget.querySelector(".typo");
63 | changeTextAlphaVal(typo, e); // Comment this if you don't want the text alpha opacity to change on interaction
64 |
65 | typo.style.textShadow = `
66 | ${xWalk}px ${yWalk}px 0 rgba(${pink}, ${typoAlpha}),
67 | ${xWalk * -1}px ${yWalk * 2}px 0 rgba(${blue}, ${typoAlpha}),
68 | ${xWalk * -2}px ${yWalk * -1}px 0 rgba(${yellow}, ${typoAlpha})
69 | `;
70 | }
71 |
72 | function onMouseMove(e) {
73 | createShadow(e, e.currentTarget);
74 | }
75 | function onTouchMove(e) {
76 | createShadow(e.changedTouches[0], e.currentTarget);
77 | }
78 |
79 | const heading = document.querySelector(".heading");
80 | heading.addEventListener("mousemove", onMouseMove);
81 | heading.addEventListener("touchmove", onTouchMove);
--------------------------------------------------------------------------------