├── heart.png
├── README.md
├── style.css
├── index.html
├── LICENSE
├── LoaderLogo.js
└── heartsNEW.css
/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlanBinu007/ColorfulHeartsOnMousemove/HEAD/heart.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ColorfulHeartsOnMousemove
2 | Make colour full hearts icons all over the screen
3 |
4 | **Project Link** - ***https://alanbinu007.github.io/ColorfulHeartsOnMousemove/index.html/***
5 |
6 | ## Tech We Used
7 |
8 | - HTML5
9 | - CSS
10 | - JAvaScript
11 |
12 |
13 | ## Steps to run in your machine
14 |
15 | Clone the rep and Start the index.html file
16 |
17 |
18 |
19 |
20 | #### Hope you liked this project, dont forget to ⭐ the repo.
21 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *
2 | {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 | body
8 | {
9 | overflow: hidden;
10 | height: 100vh;
11 | background: #000;
12 | }
13 | span
14 | {
15 | position: absolute;
16 | background: url(heart.png);
17 | background-size: cover;
18 | pointer-events: none;
19 | transform: translate(-50%,-50%);
20 | animation: animate 2s linear infinite;
21 | }
22 | @keyframes animate
23 | {
24 | 0%
25 | {
26 | transform: translate(-50%,-50%);
27 | opacity: 1;
28 | filter: hue-rotate(0deg);
29 | }
30 | 100%
31 | {
32 | transform: translate(-50%,-1000%);
33 | opacity: 0;
34 | filter: hue-rotate(720deg);
35 | }
36 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Append On Mousemove | Javascript
6 |
7 |
8 |
9 |
27 |
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Alan Binu
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 |
--------------------------------------------------------------------------------
/LoaderLogo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./heart.css";
3 |
4 | class LogoLoader extends React.Component {
5 | render() {
6 | document.addEventListener("mousemove", function (e) {
7 | var body = document.querySelector("body");
8 | var heart = document.createElement("span1");
9 | var x = e.offsetX;
10 | var y = e.offsetY;
11 | heart.style.left = x + "px";
12 | heart.style.top = y + "px";
13 | var size = Math.random() * 100;
14 | heart.style.width = 20 + size + "px";
15 | heart.style.height = 20 + size + "px";
16 | // if(window.location.href=="https://alanbinu-portfolio.web.app/#/" || window.location.href=="https://alanbinu-portfolio.web.app/#/splash"){
17 | // body.appendChild(heart);
18 | // }
19 | if(window.location.href=="http://localhost:3000/#/" || window.location.href=="http://localhost:3000/#/splash"){
20 | body.appendChild(heart);
21 | }
22 | setTimeout(function () {
23 | heart.remove();
24 | }, 2000);
25 | });
26 |
27 | const theme = this.props.theme;
28 | return (
29 | <>
30 | No Matter How Hard it is , Just Keep Going
31 |
32 |
33 | );
34 | }
35 | }
36 |
37 | export default LogoLoader;
38 |
--------------------------------------------------------------------------------
/heartsNEW.css:
--------------------------------------------------------------------------------
1 | #text {
2 | position: absolute;
3 | margin-top: 20px;
4 | left: 50%;
5 | top: 30px;
6 | width: 100%;
7 | transform: translate(-50%, 0%);
8 | font-family: 'Oswald', arial;
9 | color: #ED002E;
10 | font-size: 50px;
11 | font-size: 5.5vw;
12 | text-align: center;
13 | white-space: nowrap;
14 | }
15 |
16 | #text span {
17 | color: rgb(129, 113, 113);
18 | font-size: 30px;
19 | font-size: 3.5vw;
20 | }
21 | span1
22 | {
23 | position: absolute;
24 | background: url(heart.png);
25 | background-size: cover;
26 | pointer-events: none;
27 | transform: translate(-50%,-50%);
28 | animation: animate 2s linear infinite;
29 | }
30 | @keyframes animate
31 | {
32 | 0%
33 | {
34 | transform: translate(-50%,-50%);
35 | opacity: 1;
36 | filter: hue-rotate(0deg);
37 | }
38 | 100%
39 | {
40 | transform: translate(-50%,-1000%);
41 | opacity: 0;
42 | filter: hue-rotate(720deg);
43 | }
44 | }
45 |
46 |
47 | .loader {
48 | color: #ffffff;
49 | font-size: 10px;
50 | margin: 100px auto;
51 | width: 1em;
52 | height: 1em;
53 | border-radius: 50%;
54 | position: relative;
55 | text-indent: -9999em;
56 | -webkit-animation: load4 1.3s infinite linear;
57 | animation: load4 1.3s infinite linear;
58 | -webkit-transform: translateZ(0);
59 | -ms-transform: translateZ(0);
60 | transform: translateZ(0);
61 | }
62 | @-webkit-keyframes load4 {
63 | 0%,
64 | 100% {
65 | box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
66 | }
67 | 12.5% {
68 | box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
69 | }
70 | 25% {
71 | box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
72 | }
73 | 37.5% {
74 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
75 | }
76 | 50% {
77 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
78 | }
79 | 62.5% {
80 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
81 | }
82 | 75% {
83 | box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
84 | }
85 | 87.5% {
86 | box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
87 | }
88 | }
89 | @keyframes load4 {
90 | 0%,
91 | 100% {
92 | box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
93 | }
94 | 12.5% {
95 | box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
96 | }
97 | 25% {
98 | box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
99 | }
100 | 37.5% {
101 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
102 | }
103 | 50% {
104 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
105 | }
106 | 62.5% {
107 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
108 | }
109 | 75% {
110 | box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
111 | }
112 | 87.5% {
113 | box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
114 | }
115 | }
116 |
117 |
--------------------------------------------------------------------------------