- Peer-learning: How does it WWWork?
- Workshop: scroll magic!
- Tutorials on Sharing is caring
We can think of the WWW as a Web of interlinked knowledge in constant evolution.
To put this concept into practice, let's pretend that each one of us is a node in a network of knowledge. Each node will hold information about a certain concept related to the WWW.
| Who | What |
|---|---|
| Tom Will |
Tim Berners-Lee |
| Joe Kaleshe |
HyperText |
| Akvile Ben Josh |
HTTP |
| Melissa Dean |
DNS |
| Rosie Shajee |
IP address |
| Francisco Afsara |
Browser |
| Mark Malore |
Server |
| Darren Rajeev |
Internet submarine cables |
| Jennifer Ajay |
Net neutrality |
We're going to use Animate.css and ScrollMagic to add some magical scroll interactions to our previous demo.
Here's all the code for the finished thing.
Download the zip containing all the files.
Open index.html.
Notice in the head we're loading a bunch of CSS files (eg: <link href="css/style.css" rel="stylesheet">) and JS files (eg: <script src="js/lib/jquery.min.js"></script>).
-
CSS gives us the style.
-
JS gives us the fancy logic (eg:
when this scrolls past that, flip it).
Open css/style.css and find the following code:
.flex-h-centred
{
display: flex;
justify-content: center;
}
.flex-v-centred
{
display: flex;
align-items: center;
}
.flex-v-bottom
{
display: flex;
align-items: flex-end;
} Can you find where the classes above are applied in index.html?
In body notice
<div id="triggerDrone1" class="trigger"></div>
<section id="two" class="full flex-h-centred flex-v-centred">
<div id="drone1" class="drone">
<img src="images/drone.png" alt="Describe this image!">
</div>
</section>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.
It's time to write some JavaScript!
Scroll down to the bottom of the body and find
<script>
$(function()
{
// WRITE ALL YOUR JS CODE BETWEEN HERE
// AND HERE
})
</script>You'll write your JS code between those two lines that start with //.
// start a new ScrollMagic controller
var controller = new ScrollMagic.Controller()
/* Let's set the scene */
// 1. We define how in the variable sceneOptions
var sceneOptions = {}
// '#triggerDrone1' will select the element with id="triggerDrone1"
sceneOptions.triggerElement = '#triggerDrone1'
sceneOptions.duration = '100%' // will keep the element pinned for X% of the browser's height
// sceneOptions.duration = 0 // 0 will keep the element pinned indefinitely
// sceneOptions.duration = 782 // will keep the element pinned for X pixels
sceneOptions.triggerHook = 0 // from 0 (top) to 1 (bottom), default to center (0.5)
// 2. We create a new "scene" with those options
var scene = new ScrollMagic.Scene(sceneOptions)
// 3. We add indicators so that we know when the scroll magic starts and ends
scene.addIndicators({name: 'drone1'})
// 4. We add this scene to the main controller
scene.addTo(controller)We'll use a Tween to animate #drone1.
// 5. Let's use a Tween to animate #drone1
var tweenOptions = {}
tweenOptions.scale = 0.2 // 1 is the normal size
tweenOptions.rotation = -360 // a full rotation
tweenOptions.x = '-200%'
tweenOptions.opacity = 0 // 0 = transparent, 1 = opaque
scene.setTween('#drone1', tweenOptions)With ScrollMagic we can also pin elements, ie: make them stick whilst the rest of the page scroll.
// 6. Let's pin the drone (make it stick whilst the rest of the page scroll)
var pinOptions = {}
pinOptions.pushFollowers = false // pushFollowers: if true, ScrollMagic will create a gap equal to sceneOptions.duration after the pinned element
// ..and activate the pin
scene.setPin('#drone1', pinOptions)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.
If no duration is defined, the pinned element will never be released unless scrolling back past the trigger position.
Let's animate the h1. We can use Animate.css for that.
Just add the class names animated and pulse to it.
If you want to the animation to loop, add infinite.
<h1 class="animated pulse infinite">Beesness</h1>See all the built-in animations on daneden.github.io/animate.css
Or hack your own animation, eg:
@keyframes buzz {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
5%, 25%, 45%, 65%, 85% {
-webkit-transform: translate3d(-2px, 0, 0);
transform: translate3d(-2px, 0, 0);
}
15%, 35%, 55%, 75%, 95% {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
}
.buzz {
-webkit-animation-name: buzz;
animation-name: buzz;
}This project is about using code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate a cause you care about.
All the project material is here.
In small groups, review your concepts and storyboards:
- What is your call to action?
- What story does your page tell?
- How can you visualise information make a stronger argument? Refer to Visualising information for advocacy.
- How can you translate your ideas into code? Re-using code from our workshops and/or code you found online (for instance on Codrops or CodePen).
-
Start translating your storyboard into code.
Re-use code from our workshops and/or code you found online (for instance on Codrops or CodePen).
-
Work on your page copy (the written stuff that people read).
Make it short and sharp.
Make a drawing to illustrate how the Web works, based on what you learned in today's peer-learning discussion.
-
If you weren't in class, gather your classmates' research notes (they should all be on Google docs).
-
It can be anything from a technical diagram to a visual analogy (ie, the Web looks like XYZ). The more creative the better 🎨
-
There is no such thing as a bad drawing.
-
You can use any medium and format.
Make sure you take pictures or scan your piece and post them to your blog.