-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparallax.shtml
152 lines (115 loc) · 4.24 KB
/
parallax.shtml
1
2
3
4
5
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
42
43
44
45
46
47
48
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!--#include virtual="includes/htmlstart.shtml" -->
<!--#include virtual="includes/headstart.shtml" -->
<!--#include virtual="includes/meta.shtml" -->
<!--#include virtual="includes/title.shtml" -->
<link rel="stylesheet" href="styles/css/normalise.css">
<link rel="stylesheet" href="styles/css/variables.css">
<link rel="stylesheet" href="styles/css/fonts.css">
<link rel="stylesheet" href="styles/css/size-16.css">
<link rel="stylesheet" href="styles/css/forms.css">
<link rel="stylesheet" href="styles/css/buttons.css">
<link rel="stylesheet" href="styles/css/lists.css">
<link rel="stylesheet" href="styles/css/images.css">
<link rel="stylesheet" href="styles/css/backgrounds.css">
<link rel="stylesheet" href="styles/css/shadows.css">
<link rel="stylesheet" href="styles/css/paddings-margins.css">
<link rel="stylesheet" href="styles/css/modifiers.css">
<link rel="stylesheet" href="styles/css/component_header.css">
<link rel="stylesheet" href="styles/css/tables.css">
<link rel="stylesheet" href="styles/css/cards.css">
<style>
body {
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent 20px,
black 20px,
black 40px);
/* with multiple color stop lengths */
background-image: repeating-linear-gradient(-45deg,
transparent 0 20px,
black 20px 40px);
}
.main-section {
margin-top:
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 150vh;
position: absolute;
}
.ball-1 {
width: 10rem;
height: 10rem;
border-radius: 50%;
background-image: linear-gradient(#fff 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px),
linear-gradient(#fff 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px);
background-size: 64px 64px, 64px 64px, 8px 8px, 8px 8px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.ball-2 {
border: solid 17px black;
width: 10rem;
height: 10rem;
border-radius: 50%;
position: relative;
left: -10rem;
background-image: linear-gradient(#fff 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px),
linear-gradient(#fff 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px);
background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
</style>
<link rel="stylesheet" href="styles/css/custom.css">
<html>
<section class="main-section">
<div>
<p>
<label>Price From:</label>
<input type="range" id="fromPrice" value="0" min="0" max="255" step="1" class="slider_r"/>
<label id="fPrice"></label>
</p>
<p>
<label>Price To:</label>
<input type="range" id="toPrice" value="450" min="0" max="255"
oninput="document.getElementById('tPrice').innerHTML = this.value" />
<label id="tPrice"></label>
</p>
<p><input type="submit" value="submit" onclick="ti()" /></p>
</div>
<div class="ball-1"></div>
<div class="ball-2"></div>
<button class="btn">I am a button</button>
</section>
<script>
window.addEventListener('scroll', function(e){
const target_1 = document.querySelector('.ball-1');
const target_2 = document.querySelector('.ball-2');
var scrolled = window.pageYOffset;
var rate = scrolled * 0.5;
var curve = rate/0.8;
target_1.style.transform = 'translate3D(' + curve + 'px,' + rate + 'px,' + rate + 'px' +')';
target_2.style.transform = 'rotate(' + rate * -1 + 'deg' + ')';
});
window.addEventListener('input', function(e){
const slider_r = document.querySelector('.slider_r');
const btn = document.querySelector('.btn');
const main = document.querySelector('.main-section');
var r_val = slider_r.value;
btn.style.backgroundColor = 'rgba(' + r_val + ',' + r_val + ',0,1)';
btn.style.borderRadius = r_val + 'px';
btn.style.padding = r_val + 'px';
main.style.background ='linear-gradient(217deg, rgba(255,0,0,.8), rgba(' + r_val + ',0,0) 70.71%)'
/*
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
*/
console.log(main.style);
});
</script>
</html>