├── img-1.jpg
├── img-2.jpg
├── img-3.jpg
├── style.css
└── index.html
/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Liquid-Distortion-Slider-rgbKineticSlider-Liquid-Distortion-Slider/HEAD/img-1.jpg
--------------------------------------------------------------------------------
/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Liquid-Distortion-Slider-rgbKineticSlider-Liquid-Distortion-Slider/HEAD/img-2.jpg
--------------------------------------------------------------------------------
/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Liquid-Distortion-Slider-rgbKineticSlider-Liquid-Distortion-Slider/HEAD/img-3.jpg
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | width: 100%;
3 | height: 100%;
4 | margin: 0;
5 | background: #000;
6 | color: white;
7 | font-family: "Cosi Azure" !important;
8 | }
9 |
10 | .slider {
11 | width: 100%;
12 | height: 100vh;
13 | position: relative;
14 | text-transform: uppercase !important;
15 | }
16 |
17 | @media screen and (min-width: 53em) {
18 | .slider {
19 | height: 100vh;
20 | }
21 | }
22 |
23 | .rgbKineticSlider {
24 | display: block;
25 | position: relative;
26 | overflow: hidden;
27 | width: 100%;
28 | height: 100%;
29 | }
30 |
31 | canvas {
32 | position: absolute;
33 | display: block;
34 | top: 0;
35 | left: 0;
36 | }
37 |
38 | nav a {
39 | text-decoration: none;
40 | position: absolute;
41 | top: 46vh;
42 | z-index: 1;
43 | padding: 20px;
44 | transition: 0.3s;
45 | background: black;
46 | color: white;
47 | }
48 |
49 | nav a.next {
50 | right: 10vw;
51 | }
52 |
53 | nav a.prev {
54 | left: 10vw;
55 | }
56 |
57 | @media screen and (max-width: 53em) {
58 | nav a {
59 | top: auto;
60 | bottom: 3rem;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | GLITCH LIQUID DISTORTION SLIDER
7 |
8 |
9 |
10 |
11 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
69 |
70 |
71 |
--------------------------------------------------------------------------------