├── README.md
├── script.js
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Split-Landing-Page
2 | Creating an animated pointer Split Landing Page Hover Effect using HTML , CSS & JS.
3 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | /* ===( CODE AASHU )=== */
2 | const left = document.querySelector(".left");
3 | const right = document.querySelector(".right");
4 | const container = document.querySelector(".container");
5 |
6 | left.addEventListener("mouseenter", () => {
7 | container.classList.add("hover-left");
8 | });
9 |
10 | left.addEventListener("mouseleave", () => {
11 | container.classList.remove("hover-left");
12 | });
13 |
14 | right.addEventListener("mouseenter", () => {
15 | container.classList.add("hover-right");
16 | });
17 |
18 | right.addEventListener("mouseleave", () => {
19 | container.classList.remove("hover-right");
20 | });
21 |
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | CODE AASHU | Split Landing Page
8 |
9 |
10 |
11 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* ===( CODE AASHU )=== */
2 | :root {
3 | --container-bg-color: #333;
4 | --left-bg-color: rgba(223, 39, 39, 0.7);
5 | --left-button-hover-color: rgba(161, 11, 11, 0.3);
6 | --right-bg-color: rgba(43, 43, 43, 0.8);
7 | --right-button-hover-color: rgba(92, 92, 92, 0.3);
8 | --hover-width: 75%;
9 | --other-width: 25%;
10 | --speed: 1000ms;
11 | }
12 |
13 | html, body {
14 | padding:0;
15 | margin:0;
16 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
17 | width: 100%;
18 | height: 100%;
19 | overflow-x: hidden;
20 | }
21 |
22 | h1 {
23 | font-size: 4rem;
24 | color: #fff;
25 | position: absolute;
26 | left: 50%;
27 | top: 20%;
28 | transform: translateX(-50%);
29 | white-space: nowrap;
30 | }
31 |
32 | .button {
33 | display: block;
34 | position: absolute;
35 | left: 50%;
36 | top: 40%;
37 | height: 2.5rem;
38 | padding-top: 1.3rem;
39 | width: 15rem;
40 | text-align: center;
41 | color: #fff;
42 | border: #fff solid 0.2rem;
43 | font-size: 1rem;
44 | font-weight: bold;
45 | text-transform: uppercase;
46 | text-decoration: none;
47 | transform: translateX(-50%);
48 | }
49 |
50 | .split.left .button:hover {
51 | background-color: var(--left-button-hover-color);
52 | border-color: var(--left-button-hover-color);
53 | }
54 |
55 | .split.right .button:hover {
56 | background-color: var(--right-button-hover-color);
57 | border-color: var(--right-button-hover-color);
58 | }
59 |
60 | .container {
61 | position: relative;
62 | width: 100%;
63 | height: 100%;
64 | background: var(--container-bg-color);
65 | }
66 |
67 | .split {
68 | position: absolute;
69 | width: 50%;
70 | height: 100%;
71 | overflow: hidden;
72 | }
73 |
74 | .split.left {
75 | left:0;
76 | background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
77 | background-size: cover;
78 | }
79 |
80 | .split.left:before {
81 | position:absolute;
82 | content: "";
83 | width: 100%;
84 | height: 100%;
85 | background: var(--left-bg-color);
86 | }
87 |
88 | .split.right {
89 | right:0;
90 | background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
91 | background-size: cover;
92 | }
93 |
94 | .split.right:before {
95 | position:absolute;
96 | content: "";
97 | width: 100%;
98 | height: 100%;
99 | background: var(--right-bg-color);
100 | }
101 |
102 | .split.left, .split.right, .split.right:before, .split.left:before {
103 | transition: var(--speed) all ease-in-out;
104 | }
105 |
106 | .hover-left .left {
107 | width: var(--hover-width);
108 | }
109 |
110 | .hover-left .right {
111 | width: var(--other-width);
112 | }
113 |
114 | .hover-left .right:before {
115 | z-index: 2;
116 | }
117 |
118 |
119 | .hover-right .right {
120 | width: var(--hover-width);
121 | }
122 |
123 | .hover-right .left {
124 | width: var(--other-width);
125 | }
126 |
127 | .hover-right .left:before {
128 | z-index: 2;
129 | }
130 |
131 | @media(max-width: 800px) {
132 | h1 {
133 | font-size: 2rem;
134 | }
135 |
136 | .button {
137 | width: 12rem;
138 | }
139 | }
140 |
141 | @media(max-height: 700px) {
142 | .button {
143 | top: 70%;
144 | }
145 | }
--------------------------------------------------------------------------------