@@ -116,11 +116,11 @@ <h2 id="alternate">Alternate Colours</h2>
116
116
Indigo and Violet. This animation has two variations as below.
117
117
</ p >
118
118
< p >
119
- < b > < img class ="pin " src ="pin.svg " /> Alternate colour: </ b >
119
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Alternate colour: </ b >
120
120
Alternates the colour of the whole body of the object.
121
121
</ p >
122
122
< p >
123
- < b > < img class ="pin " src ="pin.svg " /> Alternate text colour: </ b >
123
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Alternate text colour: </ b >
124
124
Alternates the colour of the text contained inside object.
125
125
</ p >
126
126
@@ -130,25 +130,25 @@ <h2 id="blink">Blink</h2>
130
130
its transparency.
131
131
</ p >
132
132
< p >
133
- < b > < img class ="pin " src ="pin.svg " /> Blink: </ b >
133
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Blink: </ b >
134
134
This produces a simple blinking effect on your applied object.
135
135
</ p >
136
136
< p >
137
137
< b
138
- > < img class ="pin " src ="pin.svg " /> Blink-red, -green and –blue:
138
+ > < img class ="pin " src ="../static/assets/ pin.svg " /> Blink-red, -green and –blue:
139
139
</ b >
140
140
This make your object to blink with corresponding colour suffixed,
141
141
irrespective of the object’s initial colour.
142
142
</ p >
143
143
< p >
144
144
< b
145
- > < img class ="pin " src ="pin.svg " /> Blink-text-red, -green and
145
+ > < img class ="pin " src ="../static/assets/ pin.svg " /> Blink-text-red, -green and
146
146
–blue:
147
147
</ b >
148
148
This applies the animation above to texts
149
149
</ p >
150
150
< p >
151
- < b > < img class ="pin " src ="pin.svg " /> Blink-and-fade: </ b >
151
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Blink-and-fade: </ b >
152
152
This animation applies both the phenomenon of blinking and fading to
153
153
an object.
154
154
</ p >
@@ -161,11 +161,11 @@ <h2 id="bounce">Bounce</h2>
161
161
preference.
162
162
</ p >
163
163
< p >
164
- < b > < img class ="pin " src ="pin.svg " /> Bounce-1x to -5x: </ b >
164
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Bounce-1x to -5x: </ b >
165
165
Increase in the number produces faster oscillation.
166
166
</ p >
167
167
< p >
168
- < b > < img class ="pin " src ="pin.svg " /> Bounce and slide: </ b >
168
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Bounce and slide: </ b >
169
169
This produces a slide and bounce animation when applied to an
170
170
object.
171
171
</ p >
@@ -177,7 +177,7 @@ <h2 id="cloud">Cloud</h2>
177
177
doesn’t want the ability to fly?
178
178
</ p >
179
179
< p >
180
- < b > < img class ="pin " src ="pin.svg " /> Big cloud: </ b >
180
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Big cloud: </ b >
181
181
Your object floats like a big cloud.
182
182
</ p >
183
183
@@ -188,23 +188,23 @@ <h2 id="fade">Fade</h2>
188
188
to keep in your animation arsenal.
189
189
</ p >
190
190
< p >
191
- < b > < img class ="pin " src ="pin.svg " /> Fade-in: </ b >
191
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Fade-in: </ b >
192
192
This gradually reduces the opacity of your object from full
193
193
transparency to full opacity.
194
194
</ p >
195
195
< p >
196
- < b > < img class ="pin " src ="pin.svg " /> Fade-out: </ b >
196
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Fade-out: </ b >
197
197
This performs, precisely you are probably thinking, the opposite of
198
198
Fade-in. The object transitions from full opacity to full
199
199
transparency.
200
200
</ p >
201
201
< p >
202
- < b > < img class ="pin " src ="pin.svg " /> Fade-in-out: </ b >
202
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Fade-in-out: </ b >
203
203
This combines both the effect of Fade-in and Fade-out. Awesome,
204
204
right?
205
205
</ p >
206
206
< p >
207
- < b > < img class ="pin " src ="pin.svg " /> Fade-out-persist: </ b >
207
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Fade-out-persist: </ b >
208
208
After the object fades out, it retains the last transparency.
209
209
</ p >
210
210
@@ -215,19 +215,19 @@ <h2 id="move">Move</h2>
215
215
object’s initial position.
216
216
</ p >
217
217
< p >
218
- < b > < img class ="pin " src ="pin.svg " /> Move-up: </ b >
218
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Move-up: </ b >
219
219
The object changes its postion and goes upward
220
220
</ p >
221
221
< p >
222
- < b > < img class ="pin " src ="pin.svg " /> Move-down: </ b >
222
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Move-down: </ b >
223
223
The object changes its postion and goes downward
224
224
</ p >
225
225
< p >
226
- < b > < img class ="pin " src ="pin.svg " /> Move-left: </ b >
226
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Move-left: </ b >
227
227
The object changes its positon and goes towards the left
228
228
</ p >
229
229
< p >
230
- < b > < img class ="pin " src ="pin.svg " /> Move-right: </ b >
230
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Move-right: </ b >
231
231
The object changes its position and goes towards the right.
232
232
</ p >
233
233
@@ -240,13 +240,13 @@ <h2 id="pulse">Pulse</h2>
240
240
produce a pulsating effect.
241
241
</ p >
242
242
< p >
243
- < b > < img class ="pin " src ="pin.svg " /> Heartbeat:</ b >
243
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Heartbeat:</ b >
244
244
</ p >
245
245
< p >
246
- < b > < img class ="pin " src ="pin.svg " /> Reverse:</ b >
246
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Reverse:</ b >
247
247
</ p >
248
248
< p >
249
- < b > < img class ="pin " src ="pin.svg " /> Pulse:</ b >
249
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Pulse:</ b >
250
250
</ p >
251
251
252
252
< h2 id ="rotate "> Rotate</ h2 >
@@ -255,19 +255,19 @@ <h2 id="rotate">Rotate</h2>
255
255
directions.
256
256
</ p >
257
257
< p >
258
- < b > < img class ="pin " src ="pin.svg " /> Spin: </ b >
258
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Spin: </ b >
259
259
The object spins in the clock-wise direction at a preset speed.
260
260
</ p >
261
261
< p >
262
- < b > < img class ="pin " src ="pin.svg " /> Reverse Spin: </ b >
262
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Reverse Spin: </ b >
263
263
The object will rotate in the anti-clockwise direction, also at a
264
264
preset speed.
265
265
</ p >
266
266
< p >
267
267
< b
268
268
> < img
269
269
class ="pin "
270
- src ="pin.svg "
270
+ src ="../static/assets/ pin.svg "
271
271
/> Rotate-angle-direction/Rotate-direction-angle:
272
272
</ b >
273
273
</ p >
@@ -279,16 +279,16 @@ <h2 id="stretch">Stretch</h2>
279
279
the object stretches both its width, height and/or both.
280
280
</ p >
281
281
< p >
282
- < b > < img class ="pin " src ="pin.svg " /> Stretch-wide: </ b >
282
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Stretch-wide: </ b >
283
283
The object provide an animation wherein it is being stretched
284
284
horizontally.
285
285
</ p >
286
286
< p >
287
- < b > < img class ="pin " src ="pin.svg " /> Stretch-high: </ b >
287
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Stretch-high: </ b >
288
288
The object stretches vertically.
289
289
</ p >
290
290
< p >
291
- < b > < img class ="pin " src ="pin.svg " /> Squash-and-stretch: </ b >
291
+ < b > < img class ="pin " src ="../static/assets/ pin.svg " /> Squash-and-stretch: </ b >
292
292
The animation displays the object being
293
293
squashed and stretched simultaneously and/or alternately.
294
294
</ p >
@@ -319,7 +319,7 @@ <h2 id="sm3">Something Missing?</h2>
319
319
< button id ="previous " type ="submit ">
320
320
< a href ="{% url 'doc_page2' %} ">
321
321
< div class ="up ">
322
- < img class ="previous " src ="previous.svg " /> Previous
322
+ < img class ="previous " src ="../static/assets/ previous.svg " /> Previous
323
323
</ div >
324
324
< br />
325
325
< div class ="down "> Installation</ div >
@@ -328,7 +328,7 @@ <h2 id="sm3">Something Missing?</h2>
328
328
329
329
< button id ="next " type ="submit ">
330
330
< a href ="{% url 'doc_page4' %} ">
331
- < div class ="up "> Next< img class ="next " src ="next.svg " /> </ div >
331
+ < div class ="up "> Next< img class ="next " src ="../static/assets/ next.svg " /> </ div >
332
332
< br />
333
333
< div class ="down "> Usage Examples</ div >
334
334
</ a >
0 commit comments