Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 26, 2020. It is now read-only.

Commit 4420e09

Browse files
committed
work in progress
1 parent 193bd47 commit 4420e09

File tree

2 files changed

+110
-8
lines changed

2 files changed

+110
-8
lines changed

‎src/components/intro.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<script>
2-
import Vue from 'vue'
32
import VueBuildIntro from '../helpers/intro.js'
43
export default {
54
mounted () {
6-
Vue.nextTick(function () {
7-
/* eslint-disable no-new */
8-
new VueBuildIntro()
9-
})
5+
/* eslint-disable no-new */
6+
new VueBuildIntro(this.introCallback)
7+
},
8+
methods: {
9+
introCallback (action) {
10+
console.log(action)
11+
if (action === 'getting-started') { this.gettingStarted() }
12+
},
13+
gettingStarted () {
14+
alert('hello')
15+
}
1016
}
1117
}
1218
</script>
@@ -31,6 +37,6 @@
3137

3238
<template>
3339
<div class="intro">
34-
<div id="canvasIntro"style="border: solid1px#cccccc;"></div>
40+
<div id="canvasIntro"></div>
3541
</div>
3642
</template>

‎src/helpers/intro.js

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import { TweenMax, Power3, Power4, RoughEase, Linear } from 'gsap'
44

55
// Create class - needed something that was effected by vue
66
export default class VueBuildIntro {
7-
constructor () {
7+
constructor (callback) {
8+
this.callback = callback
9+
// console.log(callback('hit'))
810
this.height = window.innerHeight
911
this.width = window.innerWidth
1012
this.primaryColor = parseInt('41B883', 16) // #41B883
@@ -25,6 +27,8 @@ export default class VueBuildIntro {
2527
this.all.positionY = this.height / 2
2628
this.all.positionYStart = -200
2729
this.all.positionYEnd = 200
30+
this.slogan = this.slogan()
31+
this.gettingStarted = this.getStarted()
2832

2933
// Make a container to hold all v's
3034
this.app.stage.addChild(this.all) // Add to state
@@ -136,6 +140,67 @@ export default class VueBuildIntro {
136140
return rect
137141
}
138142

143+
slogan () {
144+
var style = new PIXI.TextStyle({
145+
fontFamily: 'Helvetica',
146+
fontSize: 50,
147+
fontWeight: 'bold',
148+
fill: this.primaryColor
149+
})
150+
151+
var text = new PIXI.Text('Ultra Super Simple Cli', style)
152+
text.pivot.x = text.width / 2
153+
text.pivot.y = text.height
154+
text.x = this.width / 2
155+
text.y = this.height + 100
156+
157+
this.app.stage.addChildAt(text, this.app.stage.length - 1)
158+
159+
return text
160+
}
161+
162+
getStarted () {
163+
var box = new PIXI.Container()
164+
var style = new PIXI.TextStyle({
165+
fontFamily: 'Helvetica',
166+
fontSize: 35,
167+
fontWeight: 'bold',
168+
fill: this.primaryColor
169+
})
170+
171+
var text = new PIXI.Text('Getting Started', style)
172+
text.pivot.x = text.width / 2
173+
text.pivot.y = text.height
174+
text.x = this.width / 2
175+
text.y = this.height / 2
176+
177+
var rect = new PIXI.Graphics()
178+
rect.beginFill(this.secondaryColor, 1)
179+
rect.drawRect(0, 0, 300, 75)
180+
rect.endFill()
181+
rect.pivot.x = rect.width / 2
182+
rect.pivot.y = rect.height
183+
rect.x = this.width / 2
184+
rect.y = this.height / 2
185+
186+
box.on('pointerdown', () => {
187+
console.log('yep')
188+
this.callback('getting-started')
189+
})
190+
191+
// Set box
192+
box.addChild(rect)
193+
box.addChild(text)
194+
box.pivot.x = box.width / 2
195+
box.pivot.y = box.height
196+
box.x = this.width / 2
197+
box.y = this.height / 2
198+
199+
this.app.stage.addChildAt(box, this.app.stage.length - 1)
200+
201+
return box
202+
}
203+
139204
// Animate is responsible for calling animations in order and timing
140205
animate () {
141206
// Zoom v in
@@ -164,6 +229,8 @@ export default class VueBuildIntro {
164229
})
165230
.then(() => {
166231
this.slideAllUp()
232+
this.slideSloganUp()
233+
this.slideGettingStartedUp()
167234
})
168235
}
169236

@@ -396,7 +463,36 @@ export default class VueBuildIntro {
396463
TweenMax.to(this.all, timing, {
397464
delay: delay,
398465
y: 200,
399-
ease: Power3.easeInOut
466+
ease: Power3.easeInOut,
467+
onComplete: () => {
468+
resolve()
469+
}
470+
})
471+
})
472+
}
473+
474+
slideSloganUp (timing = 2, delay = 0.5) {
475+
return new Promise((resolve, reject) => {
476+
TweenMax.to(this.slogan, timing, {
477+
delay: delay,
478+
y: 500,
479+
ease: Power3.easeInOut,
480+
onComplete: () => {
481+
resolve()
482+
}
483+
})
484+
})
485+
}
486+
487+
slideGettingStartedUp (timing = 2, delay = 0.5) {
488+
return new Promise((resolve, reject) => {
489+
TweenMax.to(this.gettingStarted, timing, {
490+
delay: delay,
491+
y: 600,
492+
ease: Power3.easeInOut,
493+
onComplete: () => {
494+
resolve()
495+
}
400496
})
401497
})
402498
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /