Skip to content

Commit ce1ac0c

Browse files
author
Matteo Menapace
committed
Tweaks
1 parent 69ec023 commit ce1ac0c

File tree

2 files changed

+10
-12
lines changed

2 files changed

+10
-12
lines changed

resources/scroll-magic/02.tweening+pinning.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55

6-
<title>01 - Pinning</title>
6+
<title>02 - Tweening and Pinning</title>
77

88
<link href="css/normalize.css" rel="stylesheet">
99
<link href="css/animate.css" rel="stylesheet">

sessions/03/README.md

+9-11
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ Open `css/style.css` and find the following code:
9898
}
9999
```
100100

101-
*Flexbox* [remember](http://flexboxfroggy.com)?
101+
[Remember *Flexbox*](http://flexboxfroggy.com)?
102102

103103
Can you find where the classes above are applied in `index.html`?
104104

@@ -115,7 +115,7 @@ In `body` notice
115115
</section>
116116
```
117117

118-
Before `section` there's a `div` identified as `triggerDrone1`: we'll use that to trigger *scroll-magic* on the `drone` element to make it stick (and perhaps other fancy stuff) whilst we scroll.
118+
Before `section` there's a `div` identified as `triggerDrone1` which we'll use to trigger *scroll-magic* on the `drone` element to make it stick (and perhaps other fancy stuff) whilst we scroll.
119119

120120
### Let the ScrollMagic begin
121121

@@ -127,15 +127,15 @@ Scroll down to the bottom of the `body` and find
127127
128128
$(function()
129129
{
130-
// WRITE YOUR CODE BETWEEN HERE
130+
// WRITE ALL YOUR JS CODE BETWEEN HERE
131131
132132
// AND HERE
133133
})
134134
135135
</script>
136136
```
137137

138-
You'll write your code between those two lines that start with `//`.
138+
You'll write your JS code between those two lines that start with `//`.
139139

140140
```js
141141
// start a new ScrollMagic controller
@@ -180,7 +180,7 @@ scene.setTween('#drone1', tweenOptions)
180180

181181
### Pinning
182182

183-
With ScrollMagic we can also pin elements (make them stick whilst the rest of the page scroll).
183+
With ScrollMagic we can also *pin* elements, ie: make them stick whilst the rest of the page scroll.
184184

185185
```js
186186
// 6. Let's pin the drone (make it stick whilst the rest of the page scroll)
@@ -190,15 +190,13 @@ pinOptions.pushFollowers = false // pushFollowers: if true, ScrollMagic will cre
190190
scene.setPin('#drone1', pinOptions)
191191
```
192192

193-
A pin of a scene that has a duration will be pinned for the respective amount of scrolled pixels and then released.
193+
A pin of a scene that has a `duration` (see `sceneOptions.duration`) will be pinned for the respective amount of scrolled pixels and then released.
194194

195-
If no duration is defined, the pinned element will never be released unless scrolling back past the trigger position.
195+
If no `duration` is defined, the pinned element will never be released unless scrolling back past the trigger position.
196196

197197
### Animating with CSS
198198

199-
Let's animate the `h1`.
200-
201-
We can use [Animate.css](https://daneden.github.io/animate.css/) for that.
199+
Let's animate the `h1`. We can use [Animate.css](https://daneden.github.io/animate.css/) for that.
202200

203201
Just add the class names `animated` and `pulse` to it.
204202

@@ -207,7 +205,7 @@ If you want to the animation to loop, add `infinite`.
207205
<h1 class="animated pulse infinite">Beesness</h1>
208206
```
209207

210-
See all the built-in animations on [daneden.github.io/animate.css](https://daneden.github.io/animate.css/).
208+
See all the built-in animations on [daneden.github.io/animate.css](https://daneden.github.io/animate.css/)
211209

212210
Or hack your own animation, eg:
213211

0 commit comments

Comments
 (0)