<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { ParallaxDirective } from './parallax.directive';
@Component({
selector: 'my-app',
templateUrl: 'src/app.component.html',
styleUrls: ['src/app.component.css']
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App,
ParallaxDirective ],
bootstrap: [ App ]
})
export class AppModule {}
#content{
overflow: visible;
text-align: center;
font-size: 1.5rem;
}
#container{
width: 100%;
}
#square{
position: fixed;
z-index: -1;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: green;
}
#rectangle{
position: fixed;
z-index: -1;
bottom: 0px;
left: 50px;
width: 200px;
height: 100px;
background-color: red;
}
#circle{
position: fixed;
z-index: -1;
bottom: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50px;
}
<div id="container">
<div id="content">
<div style="width: 80%; margin-left: auto; margin-right: auto;">
Shut up! Will you shut up?! Bring her forward! What a strange person. I'm not a witch. Where'd you get the coconuts? Well,
how'd you become king, then? Why do you think that she is a witch? …Are you suggesting that coconuts migrate? I don't
want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother
was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! You don't
vote for kings. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Be quiet!
I am your king. We want a shrubbery!! I don't want to talk to you no more, you empty-headed animal food trough water!
I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I
am forced to taunt you a second time! Listen. Strange women lying in ponds distributing swords is no basis for a system
of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
Well, I didn't vote for you. I am your king. Where'd you get the coconuts? Be quiet! You can't expect to wield supreme
power just 'cause some watery tart threw a sword at you! Knights of Ni, we are but simple travelers who seek the enchanter
who lives beyond these woods. Look, my liege! Shut up! Listen. Strange women lying in ponds distributing swords is no
basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical
aquatic ceremony. I have to push the pram a lot. I'm not a witch. But you are dressed as one… Camelot! Bloody Peasant!
Well, I didn't vote for you. Well, she turned me into a newt. She looks like one. Shut up! Will you shut up?! The Knights
Who Say Ni demand a sacrifice! Did you dress her up like this? We found them. Oh, ow! No, no, no! Yes, yes. A bit. But
she's got a wart. She looks like one. Who's that then? The swallow may fly south with the sun, and the house martin or
the plover may seek warmer climes in winter, yet these are not strangers to our land. It's only a model. I'm not a witch.
Look, my liege! We want a shrubbery!! The swallow may fly south with the sun, and the house martin or the plover may
seek warmer climes in winter, yet these are not strangers to our land. You don't vote for kings. Who's that then? Who's
that then? Why do you think that she is a witch? Well, Mercia's a temperate zone! Found them? In Mercia?! The coconut's
tropical! How do you know she is a witch? Did you dress her up like this? Be quiet! Bring her forward! The swallow may
fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers
to our land. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Camelot! Well, what
do you want? Well, I got better. You don't vote for kings. Why do you think that she is a witch? You don't frighten us,
English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng,
you and all your silly English K-n-n-n-n-n-n-n-niggits! Well, I didn't vote for you. We want a shrubbery!! But you are
dressed as one… Burn her anyway! On second thoughts, let's not go there. It is a silly place. He hasn't got shit all
over him. The Knights Who Say Ni demand a sacrifice! Shut up! Will you shut up?! Bring her forward! What a strange person.
I'm not a witch. Where'd you get the coconuts? Well, how'd you become king, then? Why do you think that she is a witch?
…Are you suggesting that coconuts migrate? I don't want to talk to you no more, you empty-headed animal food trough water!
I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I
am forced to taunt you a second time! You don't vote for kings. You can't expect to wield supreme power just 'cause some
watery tart threw a sword at you! Be quiet! I am your king. We want a shrubbery!! I don't want to talk to you no more,
you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father
smelt of elderberries! Now leave before I am forced to taunt you a second time! Listen. Strange women lying in ponds
distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses,
not from some farcical aquatic ceremony. Well, I didn't vote for you. I am your king. Where'd you get the coconuts? Be
quiet! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Knights of Ni, we are
but simple travelers who seek the enchanter who lives beyond these woods. Look, my liege! Shut up! Listen. Strange women
lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate
from the masses, not from some farcical aquatic ceremony. I have to push the pram a lot. I'm not a witch. But you are
dressed as one… Camelot! Bloody Peasant! Well, I didn't vote for you. Well, she turned me into a newt. She looks like
one. Shut up! Will you shut up?! The Knights Who Say Ni demand a sacrifice! Did you dress her up like this? We found
them. Oh, ow! No, no, no! Yes, yes. A bit. But she's got a wart. She looks like one. Who's that then? The swallow may
fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers
to our land. It's only a model. I'm not a witch. Look, my liege! We want a shrubbery!! The swallow may fly south with
the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.
You don't vote for kings. Who's that then? Who's that then? Why do you think that she is a witch? Well, Mercia's a temperate
zone! Found them? In Mercia?! The coconut's tropical! How do you know she is a witch? Did you dress her up like this?
Be quiet! Bring her forward! The swallow may fly south with the sun, and the house martin or the plover may seek warmer
climes in winter, yet these are not strangers to our land. Listen. Strange women lying in ponds distributing swords is
no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical
aquatic ceremony. Camelot! Well, what do you want? Well, I got better. You don't vote for kings. Why do you think that
she is a witch? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my
nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! Well, I didn't vote for
you. We want a shrubbery!! But you are dressed as one… Burn her anyway! On second thoughts, let's not go there. It is
a silly place. He hasn't got shit all over him. The Knights Who Say Ni demand a sacrifice! Shut up! Will you shut up?!
Bring her forward! What a strange person. I'm not a witch. Where'd you get the coconuts? Well, how'd you become king,
then? Why do you think that she is a witch? …Are you suggesting that coconuts migrate? I don't want to talk to you no
more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your
father smelt of elderberries! Now leave before I am forced to taunt you a second time! You don't vote for kings. You
can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Be quiet! I am your king. We want
a shrubbery!! I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general
direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you
a second time! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Well, I didn't vote
for you. I am your king. Where'd you get the coconuts? Be quiet! You can't expect to wield supreme power just 'cause
some watery tart threw a sword at you! Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond
these woods. Look, my liege! Shut up! Listen. Strange women lying in ponds distributing swords is no basis for a system
of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
I have to push the pram a lot. I'm not a witch. But you are dressed as one… Camelot! Bloody Peasant! Well, I didn't vote
for you. Well, she turned me into a newt. She looks like one. Shut up! Will you shut up?! The Knights Who Say Ni demand
a sacrifice! Did you dress her up like this? We found them. Oh, ow! No, no, no! Yes, yes. A bit. But she's got a wart.
She looks like one. Who's that then? The swallow may fly south with the sun, and the house martin or the plover may seek
warmer climes in winter, yet these are not strangers to our land. It's only a model. I'm not a witch. Look, my liege!
We want a shrubbery!! The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes
in winter, yet these are not strangers to our land. You don't vote for kings. Who's that then? Who's that then? Why do
you think that she is a witch? Well, Mercia's a temperate zone! Found them? In Mercia?! The coconut's tropical! How do
you know she is a witch? Did you dress her up like this? Be quiet! Bring her forward! The swallow may fly south with
the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.
Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power
derives from a mandate from the masses, not from some farcical aquatic ceremony. Camelot! Well, what do you want? Well,
I got better. You don't vote for kings. Why do you think that she is a witch? You don't frighten us, English pig-dogs!
Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly
English K-n-n-n-n-n-n-n-niggits! Well, I didn't vote for you. We want a shrubbery!! But you are dressed as one… Burn
her anyway! On second thoughts, let's not go there. It is a silly place. He hasn't got shit all over him. The Knights
Who Say Ni demand a sacrifice!
</div>
</div>
</div>
<div appParallax [ratio]="-0.2" id="square"></div>
<div appParallax [ratio]="0.5" id="circle"></div>
<div appParallax [ratio]="0.9" id="rectangle"></div>
import { Directive, Input, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appParallax]'
})
export class ParallaxDirective {
@Input('ratio') parallaxRatio : number = 1
initialTop : number = 0
constructor(private eleRef : ElementRef) {
this.initialTop = this.eleRef.nativeElement.getBoundingClientRect().top
}
@HostListener("window:scroll", ["$event"])
onWindowScroll(event){
this.eleRef.nativeElement.style.top = (this.initialTop - (window.scrollY * this.parallaxRatio)) + 'px'
}
}