Skip to content

Commit 8b7b335

Browse files
rachelandrewrachelandrew
committed
a path example
1 parent b1f7509 commit 8b7b335

File tree

1 file changed

+166
-0
lines changed

1 file changed

+166
-0
lines changed

‎path/offset-path.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>path() example with offset-path</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
img {
60+
max-width: 100%;
61+
}
62+
63+
</style>
64+
<style class="editable">
65+
.parent {
66+
width: 200px;
67+
height: 200px;
68+
border: 4px solid rgba(0,0,0,0.1);
69+
border-radius: 50%;
70+
margin: 40px;
71+
}
72+
73+
.item {
74+
width: 50px;
75+
height: 50px;
76+
background-color: red;
77+
border-radius: 50%;
78+
offset-path: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");
79+
}
80+
</style>
81+
</head>
82+
83+
<body>
84+
<section>
85+
<div class="container">
86+
<div class="parent">
87+
<div class="item"></div>
88+
</div>
89+
90+
<button id="button">animate</button>
91+
</div>
92+
93+
</section>
94+
<textarea class="playable-css" style="height: 300px">
95+
.parent {
96+
width: 200px;
97+
height: 200px;
98+
border: 4px solid rgba(0,0,0,0.1);
99+
border-radius: 50%;
100+
margin: 40px;
101+
}
102+
103+
.item {
104+
width: 50px;
105+
height: 50px;
106+
background-color: red;
107+
border-radius: 50%;
108+
offset-path: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");
109+
}
110+
</textarea>
111+
<textarea id="code" class="playable-html">
112+
<div class="container">
113+
<div class="parent">
114+
<div class="item"></div>
115+
</div>
116+
<button id="button">animate</button>
117+
</div>
118+
</textarea>
119+
<div class="playable-buttons">
120+
<input id="reset" type="button" value="Reset">
121+
</div>
122+
</body>
123+
<script>
124+
var section = document.querySelector('section');
125+
var editable = document.querySelector('.editable');
126+
var textareaHTML = document.querySelector('.playable-html');
127+
var textareaCSS = document.querySelector('.playable-css');
128+
var reset = document.getElementById('reset');
129+
var htmlCode = textareaHTML.value;
130+
var cssCode = textareaCSS.value;
131+
132+
function fillCode() {
133+
editable.innerHTML = textareaCSS.value;
134+
section.innerHTML = textareaHTML.value;
135+
136+
let btn = document.getElementById("button");
137+
138+
btn.addEventListener("click", function (evt) {
139+
document.querySelector(".parent > .item").animate([
140+
{ offsetDistance: 0 },
141+
{ offsetDistance: '100%' }
142+
],
143+
{
144+
duration: 1200,
145+
easing: 'linear',
146+
iterations: 3,
147+
fill: 'forwards'
148+
}
149+
)
150+
});
151+
}
152+
153+
reset.addEventListener('click', function () {
154+
textareaHTML.value = htmlCode;
155+
textareaCSS.value = cssCode;
156+
fillCode();
157+
});
158+
159+
textareaHTML.addEventListener('input', fillCode);
160+
textareaCSS.addEventListener('input', fillCode);
161+
window.addEventListener('load', fillCode);
162+
163+
164+
</script>
165+
166+
</html>

0 commit comments

Comments
 (0)