├── pic ├── love.png ├── pic1.png ├── pic10.png ├── pic11.png ├── pic12.png ├── pic13.png ├── pic14.png ├── pic15.png ├── pic16.png ├── pic2.png ├── pic3.png ├── pic4.png ├── pic5.png ├── pic6.png ├── pic7.png ├── pic8.png └── pic9.png ├── music └── music.mp3 ├── README.md ├── js ├── typeWriter.js ├── date.js ├── playImg.js └── stars.js ├── css └── format.css └── index.html /pic/love.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/love.png -------------------------------------------------------------------------------- /pic/pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic1.png -------------------------------------------------------------------------------- /pic/pic10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic10.png -------------------------------------------------------------------------------- /pic/pic11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic11.png -------------------------------------------------------------------------------- /pic/pic12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic12.png -------------------------------------------------------------------------------- /pic/pic13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic13.png -------------------------------------------------------------------------------- /pic/pic14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic14.png -------------------------------------------------------------------------------- /pic/pic15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic15.png -------------------------------------------------------------------------------- /pic/pic16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic16.png -------------------------------------------------------------------------------- /pic/pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic2.png -------------------------------------------------------------------------------- /pic/pic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic3.png -------------------------------------------------------------------------------- /pic/pic4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic4.png -------------------------------------------------------------------------------- /pic/pic5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic5.png -------------------------------------------------------------------------------- /pic/pic6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic6.png -------------------------------------------------------------------------------- /pic/pic7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic7.png -------------------------------------------------------------------------------- /pic/pic8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic8.png -------------------------------------------------------------------------------- /pic/pic9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/pic/pic9.png -------------------------------------------------------------------------------- /music/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ain-Crad/First-Anniversary-of-Love/HEAD/music/music.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## A website for my girlfriend to memorize our first anniversary of love. 2 | 3 | demo：[https://ain-crad.github.io/First-Anniversary-of-Love](https://ain-crad.github.io/First-Anniversary-of-Love) 4 | 5 | 文件目录： 6 | * css：css源码 7 | * js/date.js：显示恋爱时长 8 | * js/playImg.js：循环播放照片 9 | * js/stars.js：背景部分 10 | * js/typeWriter.js：模拟打字效果 11 | * music：背景音乐 12 | * pic：图片 13 | * index.html：html源码 14 | -------------------------------------------------------------------------------- /js/typeWriter.js: -------------------------------------------------------------------------------- 1 | 2 | let i = 0; 3 | let text1 = "Hey! Miss Qiu."; 4 | let text2 = "Today is the Big Day." 5 | let speed = 100; 6 | 7 | function typeWriter(text, para){ 8 | if(ok == 2){ 9 | clearInterval(typeInterval); 10 | } 11 | if(i < text.length){ 12 | document.getElementById(para).innerHTML += text.charAt(i); 13 | i++; 14 | speed = Math.random() * 50 + 100; 15 | } 16 | else{ 17 | if(ok == 0){ 18 | i = 0; 19 | } 20 | ok += 1; 21 | } 22 | } 23 | 24 | var typeInterval; 25 | 26 | //window.onload = function() { 27 | // window.onload = function(){}; 28 | typeInterval = setInterval(function(){ 29 | if(ok == 0){ 30 | typeWriter(text1, "txt1"); 31 | } 32 | else if(ok == 1){ 33 | typeWriter(text2, "txt2"); 34 | } 35 | }, 100); 36 | //}; 37 | -------------------------------------------------------------------------------- /js/date.js: -------------------------------------------------------------------------------- 1 | 2 | var dv = document.getElementById("content"); 3 | dv.style.opacity = 0; 4 | var val = 0; 5 | 6 | function timer(){ 7 | var start = new Date(2018, 0, 27, 20, 53); 8 | var t = new Date() - start; 9 | var d = Math.floor(t / 1000 / 60 / 60 / 24); 10 | var h = Math.floor(t / 1000 / 60 / 60 % 24); 11 | if(h < 10){ 12 | h = "0" + h; 13 | } 14 | var m = Math.floor(t / 1000 / 60 % 60); 15 | if(m < 10){ 16 | m = "0" + m; 17 | } 18 | var s = Math.floor(t / 1000 % 60); 19 | if(s < 10){ 20 | s = "0" + s; 21 | } 22 | document.getElementById("d").innerHTML = d; 23 | document.getElementById("h").innerHTML = h; 24 | document.getElementById("m").innerHTML = m; 25 | document.getElementById("s").innerHTML = s; 26 | } 27 | 28 | function fadein(){ 29 | if(val < 1){ 30 | val += 0.025; 31 | dv.style.opacity = val; 32 | } 33 | else{ 34 | clearInterval(fadeinInterval); 35 | if(ok == 2){ 36 | ok += 1; 37 | } 38 | } 39 | } 40 | 41 | var fadeInterval; 42 | var fadeinInterval; 43 | 44 | timer(); 45 | setInterval(timer, 1000); 46 | fadeInterval = setInterval(function(){ 47 | if(ok == 2){ 48 | clearInterval(fadeInterval); 49 | fadeinInterval = setInterval(fadein, 50); 50 | } 51 | }, 50) 52 | -------------------------------------------------------------------------------- /js/playImg.js: -------------------------------------------------------------------------------- 1 | 2 | var btn = document.getElementById("heartTxt"); 3 | btn.style.opacity = 0; 4 | var btnVal = 0; 5 | 6 | function showImage(){ 7 | //document.getElementById("imgTxt").style.opacity = 0; 8 | myImage.setAttribute("src", imageArray[imageIndex]); 9 | myTxt.innerHTML = txtArray[imageIndex]; 10 | //document.getElementById("imgTxt").style.opacity = 1 - flag; 11 | imageIndex++; 12 | if(imageIndex >= len){ 13 | imageIndex = 0; 14 | } 15 | } 16 | 17 | function play(){ 18 | if(t == 0){ 19 | myImage.setAttribute("src", ""); 20 | myTxt.innerHTML = ""; 21 | imageIndex = 0; 22 | clearInterval(showImageInterval); 23 | } 24 | flag = 1 - flag; 25 | document.getElementById("typeDiv").style.opacity = flag; 26 | document.getElementById("imgTxt").style.opacity = 1 - flag; 27 | if(t == 0){ 28 | //setTimeout(showImage, 1000); 29 | setInterval(showImage, 2500); 30 | } 31 | t++; 32 | } 33 | 34 | function preshowImage(){ 35 | document.getElementById("imgTxt").style.opacity = 0; 36 | myImage.setAttribute("src", imageArray[imageIndex]); 37 | myTxt.innerHTML = txtArray[imageIndex]; 38 | imageIndex++; 39 | if(imageIndex >= len){ 40 | imageIndex = 0; 41 | } 42 | } 43 | 44 | function buttonFadeIn(){ 45 | if(btnVal < 1){ 46 | btnVal += 0.025; 47 | btn.style.opacity = btnVal; 48 | } 49 | else{ 50 | clearInterval(buttonInterval); 51 | if(ok == 3){ 52 | ok += 1; 53 | } 54 | } 55 | } 56 | 57 | 58 | 59 | function event(){ 60 | 61 | showImageInterval = setInterval(preshowImage, 100); 62 | 63 | imgInterval = setInterval(function (){ 64 | if(ok == 3){ 65 | setTimeout(function(){buttonInterval = setInterval(buttonFadeIn, 50);}, 1500); 66 | clearInterval(imgInterval); 67 | } 68 | }, 50); 69 | } 70 | 71 | var showImageInterval; 72 | var imgInterval; 73 | var buttonInterval; 74 | 75 | event(); 76 | -------------------------------------------------------------------------------- /css/format.css: -------------------------------------------------------------------------------- 1 | #typeDiv { 2 | position: absolute; 3 | top: 45%; 4 | left: 0; 5 | right: 0; 6 | margin: auto; 7 | width: 100%; 8 | height: 10%; 9 | text-align: center; 10 | } 11 | 12 | #txt1 { 13 | font-size: 16px; 14 | text-align: center; 15 | color: white; 16 | } 17 | #txt2 { 18 | font-size: 16px; 19 | text-align: center; 20 | color: white; 21 | } 22 | 23 | #content{ 24 | position: absolute; 25 | top: 1%; 26 | left: 0; 27 | right: 0; 28 | margin: auto; 29 | width: 100%; 30 | height: 20%; 31 | } 32 | 33 | #together{ 34 | font-size: 25px; 35 | text-align: center; 36 | color: white; 37 | } 38 | 39 | #timer{ 40 | text-align: center; 41 | color: white; 42 | } 43 | 44 | #d{ 45 | font-size: 19px; 46 | } 47 | 48 | #h{ 49 | font-size: 19px; 50 | } 51 | 52 | #m{ 53 | font-size: 19px; 54 | } 55 | 56 | #s{ 57 | font-size: 19px; 58 | } 59 | 60 | #heartTxt{ 61 | position: absolute; 62 | display: table; 63 | vertical-align: middle; 64 | top: 80%; 65 | left: 0; 66 | right: 0; 67 | margin: auto; 68 | width: 10%; 69 | height: 8%; 70 | } 71 | 72 | #clickMe{ 73 | display: inline-block; 74 | font-size: 16px; 75 | width: 100%; 76 | text-align: center; 77 | color: white; 78 | } 79 | 80 | #heart{ 81 | width: 100%; 82 | height: 100%; 83 | } 84 | 85 | #button{ 86 | background-image: url("../pic/love.png"); 87 | background-repeat: no-repeat; 88 | background-size: contain; 89 | background-color: transparent; 90 | border: none; 91 | outline: none; 92 | background-position: center; 93 | transition: 0.1s; 94 | width: 100%; 95 | height: 100%; 96 | 97 | } 98 | 99 | #button:active { 100 | width: 92%; 101 | height: 92%; 102 | } 103 | 104 | #imgTxt{ 105 | position: absolute; 106 | display: table; 107 | vertical-align: middle; 108 | top: 20%; 109 | left: 0; 110 | right: 0; 111 | margin: auto; 112 | width: 100%; 113 | height: 50%; 114 | } 115 | 116 | #img{ 117 | display: block; 118 | left: 0; 119 | right: 0; 120 | margin: auto; 121 | width: auto; 122 | height: 100%; 123 | } 124 | 125 | #Txt{ 126 | display: inline-block; 127 | font-size: 17px; 128 | width: 100%; 129 | text-align: center; 130 | color: white; 131 | } 132 | 133 | #tmp{ 134 | display: inline-block; 135 | font-size: 17px; 136 | width: 100%; 137 | text-align: center; 138 | color: white; 139 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | First anniversary of love 7 | 8 | 9 | 10 | 11 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | Click! 23 |
24 | 25 |
26 |
27 |
28 |

We have been together

29 |
30 | Days 31 | Hours 32 | Minutes 33 | Seconds 34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 | 42 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /js/stars.js: -------------------------------------------------------------------------------- 1 | //import utils from "./utils" 2 | 3 | const canvas = document.querySelector('canvas') 4 | const c = canvas.getContext('2d') 5 | 6 | canvas.width = innerWidth 7 | canvas.height = innerHeight 8 | 9 | window.addEventListener("resize", function() { 10 | canvas.width = window.innerWidth; 11 | canvas.height = window.innerHeight; 12 | init() 13 | }); 14 | 15 | /* 16 | const mouse = { 17 | x: innerWidth / 2, 18 | y: innerHeight / 2 19 | } 20 | 21 | 22 | // Event Listeners 23 | addEventListener('mousemove', event => { 24 | mouse.x = event.clientX 25 | mouse.y = event.clientY 26 | }) 27 | */ 28 | 29 | // Objects 30 | function Star(x, y, radius, color) { 31 | this.x = x 32 | this.y = y 33 | this.radius = radius 34 | this.color = color 35 | this.velocity = { 36 | x: (Math.random() - 0.5) * 8, 37 | y: 3 38 | } 39 | this.friction = 0.8 40 | this.gravity = 1 41 | } 42 | 43 | Star.prototype.draw = function() { 44 | c.save() 45 | c.beginPath() 46 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 47 | c.fillStyle = this.color 48 | c.shadowColor = '#E3EAEF' 49 | c.shadowBlur = 20 50 | c.fill() 51 | c.closePath() 52 | c.restore() 53 | } 54 | 55 | Star.prototype.update = function() { 56 | this.draw() 57 | 58 | //When ball hits bottom of screen 59 | if(this.y + this.radius + this.velocity.y > canvas.height - groundHeight){ 60 | this.velocity.y = -this.velocity.y * this.friction 61 | this.shatter() 62 | } 63 | else{ 64 | this.velocity.y += this.gravity 65 | } 66 | 67 | //Hits side of screen 68 | if(this.x + this.radius + this.velocity.x > canvas.width || this.x - this.radius <= 0){ 69 | this.velocity.x = -this.velocity.x * this.friction 70 | this.shatter() 71 | } 72 | 73 | this.x += this.velocity.x 74 | this.y += this.velocity.y 75 | 76 | } 77 | 78 | Star.prototype.shatter = function(){ 79 | this.radius -= 3 80 | for(let i = 0; i < 8; i++){ 81 | miniStars.push(new MiniStar(this.x, this.y, 2)) 82 | } 83 | 84 | } 85 | 86 | function MiniStar(x, y, radius, color){ 87 | Star.call(this, x, y, radius, color) 88 | this.velocity = { 89 | x: (Math.random() - 0.5) * 10, 90 | y: (Math.random() - 0.5) * 30 91 | } 92 | this.friction = 0.8 93 | this.gravity = 0.1 94 | this.ttl = 100 95 | this.opacity = 1 96 | } 97 | 98 | MiniStar.prototype.draw = function() { 99 | c.save() 100 | c.beginPath() 101 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) 102 | c.fillStyle = `rgba(227,234, 239, ${this.opacity})` 103 | c.shadowColor = '#E3EAEF' 104 | c.shadowBlur = 20 105 | c.fill() 106 | c.closePath() 107 | c.restore() 108 | } 109 | 110 | MiniStar.prototype.update = function() { 111 | this.draw() 112 | 113 | if(this.y + this.radius + this.velocity.y > canvas.height - groundHeight){ 114 | this.velocity.y = -this.velocity.y * this.friction 115 | } 116 | else{ 117 | this.velocity.y += this.gravity 118 | } 119 | 120 | this.x += this.velocity.x 121 | this.y += this.velocity.y 122 | this.ttl -= 1 123 | this.opacity -= 0.0001 * this.ttl 124 | } 125 | 126 | function creatMountainRange(mountainAmount, height, color){ 127 | for(let i = 0; i < mountainAmount; i++){ 128 | const mountainWidth = canvas.width / mountainAmount 129 | c.beginPath() 130 | c.moveTo(i * mountainWidth, canvas.height) 131 | c.lineTo(i * mountainWidth + mountainWidth + 0.2*canvas.height, canvas.height) 132 | c.lineTo(i * mountainWidth + mountainWidth / 2, canvas.height - height) 133 | c.lineTo(i * mountainWidth - 0.2*canvas.height, canvas.height) 134 | c.fillStyle = color 135 | c.fill() 136 | c.closePath() 137 | } 138 | } 139 | 140 | // Implementation 141 | const backgroundGradient = c.createLinearGradient(0, 0, canvas.width, canvas.height) 142 | backgroundGradient.addColorStop(0, '#171e26') 143 | backgroundGradient.addColorStop(1, '#3f586b') 144 | 145 | let stars 146 | let miniStars 147 | let backgroundStars 148 | let ticker = 0 149 | let randomSpawnRate = 75 150 | const groundHeight = 0.09 * canvas.height 151 | let inf = 1e9 152 | function init() { 153 | stars = [] 154 | miniStars = [] 155 | backgroundStars = [] 156 | 157 | for(let i = 0; i < 200; i++){ 158 | const x = Math.random() * canvas.width 159 | const y = Math.random() * canvas.height 160 | const radius = Math.random() * 3 161 | backgroundStars.push(new Star(x, y, radius, 'white')) 162 | } 163 | } 164 | 165 | // Animation Loop 166 | function animate() { 167 | c.clearRect(0, 0, 0, canvas.height) 168 | c.fillStyle = backgroundGradient 169 | c.fillRect(0, 0, canvas.width, canvas.height) 170 | 171 | backgroundStars.forEach(backgroundStar => { 172 | backgroundStar.draw() 173 | }) 174 | 175 | if(flag) creatMountainRange(1, canvas.height * 0.7, '#384551') 176 | if(flag) creatMountainRange(2, canvas.height * 0.6, '#2B3843') 177 | if(flag) creatMountainRange(3, canvas.height * 0.4, '#26333E') 178 | c.fillStyle = '#182028' 179 | c.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight) 180 | stars.forEach((star, index) => { 181 | star.update(); 182 | if(star.radius == 0){ 183 | stars.splice(index, 1) 184 | } 185 | }); 186 | 187 | miniStars.forEach((miniStar, index) => { 188 | miniStar.update(); 189 | if(miniStar.ttl == 0){ 190 | miniStars.splice(index, 1) 191 | } 192 | }); 193 | 194 | ticker++ 195 | if(ticker >= inf){ 196 | ticker = 0 197 | } 198 | if(ticker % randomSpawnRate == 0){ 199 | const radius = 9 200 | const x = Math.max(radius, Math.random() * canvas.width - radius) 201 | stars.push(new Star(x, -100, 9, '#E3EAEF')) 202 | randomSpawnRate = Math.floor(Math.random() * (200 - 125 + 1) + 125) 203 | } 204 | 205 | requestAnimationFrame(animate) 206 | } 207 | 208 | init() 209 | animate() 210 | --------------------------------------------------------------------------------