얼굴 사진에서 한 사람을 선택하는 애니메이션이있는 룰렛을 즉흥으로 만들 수 있다고 말했다.
이런 것을 만들었습니다.
ｈｔｐ：／／아니마테 d란드 mー우세 r피 c케 r. s3-우아 b-아아 p-r ぇ아 st-1. 아마조나 ws. 코m/
리포지토리는 htps : // 기주 b. 코 m / 우미 히코 / 아니 마테 d입니다.
이하의 사양을 이쪽으로 결정, 2시간에 제작했습니다.
S3에서의 호스트는 이쪽을 참고로 했습니다.
vue를 html 파일 단독으로 움직이는 것은 이쪽을 참고로 했습니다.
데모 이미지는 일러스트와에서 빌립니다.
여러분 감사합니다.
Slack의 모든 프로필 이미지를 찍는 것은 다른 기사였습니다.
CDN에서 lodash, vue, vuetify를 사용하고 있습니다.
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta charset="UTF-8">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="app">
<v-container>
<p><a target="_blank" href="https://github.com/umihico/animated-random-user-picker">Github</a></p>
<p><a target="_blank" href="https://qiita.com/umihico/items/7878dbaca57b21d2bfc0">Qiita</a></p>
<v-btn @click="shuffle">シャッフル！</v-btn>
<v-btn @click="run">
<template v-if="moving">ストップ</template>
<template v-else>スタート</template>
！
</v-btn>
<v-row>
<v-col xl="3" lg="3" md="4" sm="3" cols="12">
<v-img max-height="200" contain v-if="picked" :src="picked"></v-img>
</v-col>
<v-col xl="9" lg="9" md="8" sm="9" cols="12">
<v-row>
<v-col xl="1" lg="1" md="2" sm="2" cols="2" v-for="path in paths" v-bind:key="path">
<v-img contain :src="path" max-height="50"
:gradient="(picked==path) ? 'to top right, rgba(100,115,201,.60), rgba(100,115,201,.60)' : ''"
>
<div class="fill-height bottom-gradient"></div>
</v-img>
</v-col>
</v-row>
</v-col>
</v-row>
<div style="max-width:500px">
</div>
</v-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
new Vue({
el: "#app",
data: {
pos: 0,
picked: null,
moving: false,
paths: ["img/nigaoe_adam_smith.png",
"img/nigaoe_amakusa_shirou.png",
// 省略
"img/nigaoe_yamaoka_tessyuu.png",
]
},
methods: {
shuffle() {
this.paths = _.shuffle(this.paths)
},
run() {
this.moving = !this.moving
}
},
mounted() {
setInterval(function () {
if (this.moving) {
this.pos += 1;
if (!this.paths[this.pos]) {
this.pos = 0
}
this.picked = this.paths[this.pos]
}
}.bind(this), 3)
}
})
</script>
</body>
</html>
S3 호스트에 대해 파일을 게시해야 하므로 정책 파일을 만듭니다.
policy.json
{
"Version": "2012-10-17",
"Id": "PublicRead",
"Statement": [
{
"Sid": "ReadAccess",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::animated-random-user-picker/*"
}
]
}
파일이 준비되면 다음 명령으로 배포할 수 있습니다.
$ aws s3 mb s3://animated-random-user-picker # バケット作成
$ aws s3 website s3://animated-random-user-picker --index-document index.html # 静的ウェブサイトとしてホスト
$ aws s3api put-bucket-policy --bucket animated-random-user-picker --policy file://policy.json # only once # ポリシーファイル適用
$ aws s3 sync . s3://animated-random-user-picker --exclude=.git/* # バケットにカレントディレクトリと同期させる
기타 참고
htps : // ゔ에치 fyjs. 코 m / 엔 / 껄껄 gs r d / 쿠이 ck s rt / # cd 흠
Reference
이 문제에 관하여(얼굴 사진에서 한 사람을 선택하는 애니메이션이있는 룰렛을 즉흥으로 만들 수 있다고 말했다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/umihico/items/7878dbaca57b21d2bfc0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
