文章搬遷搬遷~~

-
因為自己弄了HEXO將來文章會放到那，這裡將停止更新，而文章也會慢慢更新到那裏去，歡迎大家來看與指教。 網址:https://donggualemon.github.io/
張貼留言

Vue和Css的小動畫時間 1

-
之前意外的案子才接觸前端網頁，並使用了Vue.js所以對一些基礎不是那麼厲害，但寫一陣子了對於資料流阿或控制還是可以的，最大的問題還是美感和CSS!!!

常常被老闆講做的真醜哈哈~

 所以開始來彌補以前跳級打怪留下的債囉，所以就做些小小動畫來練練，雖然也是從別人那慢慢看學(抄)來的，接下來就來看看幼幼班等級的CSS動畫吧!

大概長這個樣子
一個簡陋的進入畫面，也能當loading畫面~
程式碼大概是長
Html: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="app.css">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <span class="text1"> Welcome</span>
    <span class="text2">my web</span>

  </div>
</body>
</html>

一個div和兩個span放一些想要的內容
CSS部分:
*{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
body{
  background: #000;
}
.container{
  text-align: center;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%); 
  width: 100%;
}
.container span{
  text-transform: uppercase;
  display: block;
}
.text1{
  color: rgba(255, 255, 255, 0.856);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: text 3s 1;
}
.text2{
  font-size: 30px;
  color:#6ab04c;
}
@keyframes text{
  0%{
    color: black;
    margin-bottom:-40px; 
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}
以上就是這個畫面所用的程式碼，主要學的地方是排版和animation配合@keyframes的流程，其實還有很多API要多去看看。
然後因為自己是用Vue.js框架來做網頁，所以就做一個vue用transition的方式
底下為程式碼:
<template>
  <div class="load">
    <transition appear
     appear-active-class="fade-enter-active"
     @before-appear="beforeAppear"
     @appear="appear"
     @after-appear="afterAppear">
    >
    <span class="text1">Welcome</span>
    </transition>
   <span class="text2">my web</span>
  </div>  
</template>
<script>
export default {

methods:{
  beforeAppear(){
    console.log('beforeAppear')
  },
  appear(){
    console.log('appear')
  },
  afterAppear(){
    console.log('afterAppear')
  }
}
}
</script>
<style>
.load{
  width: 100%;
  height: 100%;
  background: #000;
  text-align: center;
  font-family: sans-serif;
  padding-top:20%; 
}
.load span{
  text-transform: uppercase;
  display: block;
  
}
.text1{
  color: rgba(255, 255, 255, 0.856);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 10px;
  background: black;
  position: relative;
  
}
.text2{
  font-size: 30px;
  color:#6ab04c;
}

.fade-enter-active {
  animation: go 2s;
}
@keyframes go {
  0%{
    color: black;
    margin-bottom:-40px; 
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}
</style>

做出來的效果差不多，做法也大同小異，這也能透過afterAppear來達到跳轉頁面，感覺蠻靈活的，兩方就互相學習運用在不同地方吧!!!!!

留言

張貼留言

這個網誌中的熱門文章

EventBus用來呼叫兄弟組件。

-
圖片
我們可以透過props、emit來溝通父子元件，而event bus則是溝通同層組件，但由於太常使用會造成元件複雜化、維護困難，所以當專案龐大時還是請使用Vuex哦!! 那我們來看看怎麼用event bus吧~ 創建一個bus.js來當作橋梁，當要使用時再呼叫。 import Vue from 'vue' export default new Vue() 這樣我們就創造出了一個新的vue的實例。再我們需要的地方做引入。 import bus from './bus.js' 接著我們在要發送資訊或要呼叫事件的地方，做一個中樞廣播動作。 export default { methods: { doSomething: function() { bus.$emit('Event', { msg: 'Test.' }); } } } 在任何想要接收訊息的地方去做接收的動作。 created(){ bus.$on('Event',data=>{ this.myname=data; }) }, beforeDestroy: function() { // [銷毀監聽事件] // 最好在组件銷毀前，清除 Event 所有監聽 // 如果要指定哪個監聽對應方法，就需要傳入第二個參數(對應$on設定的方法) bus.$off('Event'); } 這樣就能在任何的元件中可以拿到想要的數據，但如果是父子元件則不建議使用。
閱讀完整內容

第一次用Phaser.js做2D遊戲

-
圖片
因為參加F2E精神時光屋活動的直播讓我知道了Phaser.js，也讓我著手用來做了小遊戲。 Phaser2是利用Pixi.js為基底製作，而3是完全隔離出來的，而且蠻容易上手，我相信很適合做些小遊戲來玩玩。 官方連結 這次我做了一個外太空飛船閃躲障礙物的小遊戲。(感謝精神時光屋的UI設計投稿者) 閃躲障礙物透過鍵盤控制 假如受到物理碰撞死掉 非常簡單又上手的小遊戲 大家可以玩玩看，雖然沒有弄得更完整。 連結 而這篇文章大概算是紀錄而已，所以沒有詳細的教學，之後如果有時間或更深入研究在來寫教學文章。(然後做遊戲圖片超重要，希望人人都有設計師!!) 先去官方網站clone或用CDN引入lib~~ 然後建立個index.html吧，並在body部分引入所需的js <body> <div id="app"></div> <script src='./lib/phaser.min.js'></script> <script src='./js/index.js'></script> </body> 而div區塊的id是妳phaser.js config上設定來layout canvas的部分。 在我們的index.js來開始使用phaser吧 const config={ type: Phaser.AUTO,//type有Canvas and WebGL AUTO則是有WebGL就用WebGL width: 1200,//設定你要layout的寬度就像做canvas height: window.innerHeight,//設定高度 parent: 'app',//妳要layout區塊的id scene: [GameStart],//場景做變換或呈現所要用的 } const game = new Phaser.Game(config) //宣告遊戲物件 這樣妳就能看到有畫面啦~~一個黑色場景的canvas。 接下來我們要布置GameStart的場景。 const GameStart={ key:'Ga...
閱讀完整內容