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 41da2e8

Browse files
committed
work in progress
1 parent 7c5f79f commit 41da2e8

File tree

7 files changed

+213
-148
lines changed

7 files changed

+213
-148
lines changed

‎src/assets/css/layout.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ body {
1919
align-items: stretch;
2020
align-content: stretch;
2121
width: 100%;
22-
min-width: 600px;
23-
max-width: 900px;
2422
height: 100%;
2523
margin: 0 auto;
2624

‎src/components/development.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
}
1414
}
1515
</script>
16+
1617
<template>
1718
<div>
1819
<h1>Running Your App</h1>

‎src/components/intro.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
import Vue from 'vue'
3+
import VueBuildIntro from '../helpers/intro.js'
4+
export default {
5+
mounted () {
6+
Vue.nextTick(function () {
7+
/* eslint-disable no-new */
8+
new VueBuildIntro()
9+
})
10+
}
11+
}
12+
</script>
13+
14+
<style lang="scss">
15+
@import "~src/assets/css/_variables.scss";
16+
17+
.intro {
18+
position: fixed;
19+
top: 0;
20+
right: 0;
21+
bottom: 0;
22+
left: 0;
23+
background-color: $white;
24+
25+
#canvasIntro {
26+
height: 100%;
27+
width: 100%;
28+
}
29+
}
30+
</style>
31+
32+
<template>
33+
<div class="intro">
34+
<div id="canvasIntro" style="border: solid 1px #cccccc;"></div>
35+
</div>
36+
</template>

‎src/components/logo.vue

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/helpers/logo.js renamed to ‎src/helpers/intro.js

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,22 @@ import { TweenMax, Power3, RoughEase, Linear } from 'gsap'
33
/* globals PIXI */
44

55
// Create class - needed something that was effected by vue
6-
export default class VueBuildLogo {
6+
export default class VueBuildIntro {
77
constructor () {
88
this.height = window.innerHeight
99
this.width = window.innerWidth
10-
window.onresize = (event) => {
11-
this.height = window.innerHeight
12-
this.width = window.innerWidth
13-
}
14-
this.canvas = document.getElementById('canvasLogo')
10+
this.canvas = document.getElementById('canvasIntro')
1511
this.app = new PIXI.Application(this.height, this.width, {
1612
antialias: true,
17-
backgroundColor: 0xffffff
13+
backgroundColor: 0xffffff,
14+
transparent: false,
15+
resolution: window.devicePixelRatio,
16+
autoResize: true
1817
})
18+
window.addEventListener('resize', this.resize())
1919
this.canvas.appendChild(this.app.view)
2020
this.all = new PIXI.Container() // Container for all v's
21+
this.minis = []
2122

2223
// Make a container to hold all v's
2324
this.app.stage.addChild(this.all) // Add to state
@@ -30,16 +31,23 @@ export default class VueBuildLogo {
3031
// Center and scale
3132
this.allCenter()
3233

34+
// Animate minis
35+
this.animateMinis()
36+
3337
// Animate
34-
this.spreadOut(2)
38+
this.spreadOut(0.5,1)
3539
.then(() => {
3640
this.animate()
37-
setInterval(() => {
38-
this.animate()
39-
}, 3000)
4041
})
4142
}
4243

44+
// When window resizes resize renderer
45+
resize () {
46+
this.width = window.innerWidth
47+
this.height = window.innerHeight
48+
this.app.renderer.resize(this.width, this.height)
49+
}
50+
4351
allCenter () {
4452
// Set pivot location
4553
this.all.pivot.x = this.width / 2
@@ -61,11 +69,15 @@ export default class VueBuildLogo {
6169
v.addChild(vTop)
6270
v.addChild(vBottom)
6371

64-
// Set pivot
65-
v.pivot.x = v.width / 2
66-
v.pivot.y = -115
67-
v.x += this.width / 2
68-
v.y += this.height / 2
72+
// Set pivot and position
73+
v.pivot.x = info.pivotX ? info.pivotX : v.width / 2
74+
v.pivot.y = info.pivotY ? info.pivotY : -115
75+
v.x += info.x ? info.x : this.width / 2
76+
v.y += info.y ? info.y : this.height / 2
77+
78+
if (info.scale) {
79+
v.scale.set(info.scale)
80+
}
6981

7082
return v
7183
}
@@ -104,6 +116,29 @@ export default class VueBuildLogo {
104116
return v
105117
}
106118

119+
animateMinis () {
120+
// Load a bunch of mini v's
121+
for (var iMini = 0; iMini < 100; iMini++) {
122+
let vMini = this.v({
123+
scale: 0.3,
124+
x: this.getRandomNum(-600, this.width + 600),
125+
y: -200
126+
})
127+
this.app.stage.addChild(vMini)
128+
TweenMax.to(vMini, 0.6, {
129+
delay: this.getRandomNum(0, 2),
130+
ease: Power3.easeIn,
131+
x: this.width / 2,
132+
y: this.height / 2,
133+
height: 0,
134+
width: 0,
135+
onComplete () {
136+
vMini.destroy()
137+
}
138+
})
139+
}
140+
}
141+
107142
// Animate is responsible for calling animations in order and timing
108143
animate () {
109144
this.spin(1)
@@ -125,16 +160,16 @@ export default class VueBuildLogo {
125160
return new Promise((resolve, reject) => {
126161
// Rotate top left
127162
TweenMax.to(this.all.children[1], timing, {
128-
delay: 0.5,
163+
delay: delay,
129164
rotation: 120 * PIXI.DEG_TO_RAD,
130-
ease: Power3.easeInOut
165+
ease: Power3.easeIn
131166
})
132167

133168
// Rotate top right
134169
TweenMax.to(this.all.children[2], timing, {
135-
delay: 0.5,
170+
delay: delay*1.5,
136171
rotation: 240 * PIXI.DEG_TO_RAD,
137-
ease: Power3.easeInOut,
172+
ease: Power3.easeIn,
138173
onComplete: function () {
139174
resolve()
140175
}
@@ -234,4 +269,8 @@ export default class VueBuildLogo {
234269
// Make sure you are back to center again
235270
TweenMax.to(this.all, 0, {delay: timing, x: this.width / 2, y: this.height / 2})
236271
}
272+
273+
getRandomNum (min, max) {
274+
return Math.random() * (max - min) + min
275+
}
237276
}

‎src/index.vue

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
<script>
22
import nav from './components/nav.vue'
3-
import logo from './components/logo.vue'
3+
import intro from './components/intro.vue'
44
55
export default {
6-
data: function () {
7-
return {
8-
logo
9-
}
10-
},
116
components: {
12-
logo,
7+
intro,
138
navBar: nav
149
},
1510
mounted () {
@@ -28,7 +23,7 @@
2823

2924
<template>
3025
<div class="app">
31-
<logo />
26+
<intro />
3227
<div class="header" :class="{'large': isHome}">
3328
<div class="tagline">Taking the frustrating build process and clutter out of your application</div>
3429
</div>

0 commit comments

Comments
(0)

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