-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpj_digital_illustration.html
184 lines (180 loc) · 8.72 KB
/
pj_digital_illustration.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PTFLO</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<main id="app">
<my-header :is-scroll-down="isScrollDown" @mobile-is-open="mobileIsOpen" @mobile-is-close="mobileIsClose"></my-header>
<main style="overflow: hidden;">
<!-- Content -->
<section class="row mb-0 mt-5">
<div class="col-12">
<project-cover :project-name="project.name"></project-cover>
</div>
<main class="px-1 px-md-5">
<div class="mb-2 mb-md-1 layout-t">
<h1 class="t-title-1 mb-lg-1">{{project.nameCh}}</h1>
<h3 class="t-z-6 mt-0 mb-lg-1">{{project.name}}</h3>
</div>
<!-- Layouts -->
<section class="layout-t">
<layout-t :pars-num="project.paragraphs[0]"></layout-t>
<layout-i @popup-img="popup" :imgs="project.figures.slice(0,2)"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(2,4)" align-to="center"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(4,6)" align-to="right"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(6,8)"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(8,10)"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(10,13)" align-to="right"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(13,15)" align-to="center"></layout-i>
<layout-i @popup-img="popup" :imgs="project.figures.slice(15,17)"></layout-i>
</section>
</main>
</section>
<!-- Credits -->
<section class="row jcc">
<div class="col-12 col-md-6">
<ul class="list-info">
<li>{{project.info.for}}</li>
<li>{{project.info.media}}</li>
<li v-if="project.info.link">
<basic-link :title="project.info.link.title" :url="project.info.link.url" :highlight="false"></basic-link>
</li>
<li>{{project.info.date}}</li>
</ul>
</div>
</section>
<!-- Popup -->
<section>
<div class="popup" v-if="popupShow" @click="popupShow = !popupShow">
<img :src="popupShowImg" alt="">
</div>
</section>
<!-- Back to All -->
<section class="d-flex jcc">
<cta :large="true" url="works.html" class="por" style="width: unset; min-width: unset;"></cta>
</section>
</main>
<!-- Footer -->
<my-footer></my-footer>
</main>
<!-- GSAP -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.js' integrity='sha512-NbdYutU8SqxAdwkioXbsw2Tr3jbPA1LCB3aQj/LkIshNnMMggYViEafkDdazPtAYklypxdjPfeG12OATLwZlnQ==' crossorigin='anonymous'></script>
<!-- Vue -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.js" integrity="sha512-TpgbLHXaTCAZ7ULhjopb1PveTz5Jx6KEQUtMfXhV0m0EArh+6O8ybZjjDN1Yug6oagN6iFm6EoMjuYSiFr0qXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="assets/js/components.js"></script>
<script>
const vm = new Vue({
el: "#app",
data:{
isScrollDown: false,
lastScrollTop: 0,
mobileMenuOpen: false,
popupShow: false,
popupShowImg: undefined,
project: {
name: "Digital Illustration",
nameCh: "電繪作品集結",
info: {
for: "Personal Side Project",
media: "Digital Painting (PHOTOSHOP)",
date: "Till 2022"
},
paragraphs: [
{
pars: ["至2022年創作的電繪作品，包含用於商業出版的作品和個人的隨意小畫。"]
}
],
figures: [
{
url: "./assets/img/pj_digital_illustration/us.jpg",
figcaption: "US"
},{
url: "./assets/img/pj_digital_illustration/time.jpg",
figcaption: "Time"
},{
url: "./assets/img/pj_digital_illustration/love.jpg",
figcaption: "Finding Love"
},{
url: "./assets/img/pj_digital_illustration/aki.jpg",
figcaption: "Aki"
},{
url: "./assets/img/pj_digital_illustration/wait.jpg",
figcaption: "等待回聲 Waiting for Echo"
},{
url: "./assets/img/pj_digital_illustration/萬中選一的青年.jpg",
figcaption: "萬中選一的青年（靈感來自昏鴉的歌曲）"
},{
url: "./assets/img/pj_digital_illustration/南下.jpg",
figcaption: "南下。從高鐵望向的風景。"
},{
url: "./assets/img/pj_digital_illustration/新湖一路口.jpg",
figcaption: "新湖一路口。Bei Fern「擠在城市角落」個人音樂專場主視覺。"
},{
url: "./assets/img/pj_digital_illustration/0331.jpg",
},{
url: "./assets/img/pj_digital_illustration/0125.jpg",
},{
url: "./assets/img/pj_digital_illustration/dennsya_study.jpg",
},{
url: "./assets/img/pj_digital_illustration/sanpo2.jpg",
figcaption: "放課後"
},{
url: "./assets/img/pj_digital_illustration/sanpo3.jpg",
figcaption: "交大竹湖"
},{
url: "./assets/img/pj_digital_illustration/when_night_falls_down.jpg",
figcaption: "When Night Falls Down"
},{
url: "./assets/img/pj_digital_illustration/youwanesouzai.jpg",
figcaption: "遙遠的所在（靈感來自廖士賢的歌曲）"
},{
url: "./assets/img/pj_digital_illustration/demachiyanagi.jpg",
figcaption: "小說「出町柳」封面插畫。"
}
]
}
},
methods: {
scrollDirect(){
let st = window.pageYOffset || document.documentElement.scrollTop
if (!this.mobileMenuOpen){
if (st > this.lastScrollTop){
this.isScrollDown = true
} else {
this.isScrollDown = false
}
}else{
let deltaY = st - this.lastScrollTop
TweenMax.to(".scroll", .5, {
y: "-="+ deltaY*3 + "px"
})
}
this.lastScrollTop = st <= 0 ? 0 : st
},
mobileIsOpen(){
this.mobileMenuOpen = true
},
mobileIsClose(){
this.mobileMenuOpen = false
},
popup(el){
this.popupShow = true
this.popupShowImg = el
}
},
created(){
window.addEventListener('scroll', this.scrollDirect);
},
destroyed(){
window.removeEventListener('scroll', this.scrollDirect);
}
})
</script>
</body>
</html>