2019年7月31日 星期三

好用的線上去背網站- Remove.bg



許多人在處理影像的時候,如果沒有學過去背應該都會覺得十分的困擾,雖然去背能力已經是學習 photoshop 的人應該都要會的能力,但每次要去背總是得花一些時間,而這個 Remove.bg 就是為了解決這個問題而誕生的網站。

使用的方法很簡單,在頁面上方選取要使用的照片,或是貼上網址,就可以把指定的圖片去背了,有試過大部分的情況都滿理想的,對於不會去背或是想節省時間的朋友應該是一個很好用的工具,有興趣的話不妨先試試看吧。

Read more

2019年7月28日 星期日

2019年7月27日 星期六

使用氣象局 open data 氣象 api 抓取氣象資料



如果想要在網站上放上氣象資料,在台灣的話相信使用氣象局的 open data 是一個很好的選擇,想要使用的話首先要先到氣象資料開放平台註冊一個帳號,註冊後認證一下就可以開始來使用了,要注意的是開放平台的 fb 登入有問題,所以不管註冊或登入都還是使用 email 比較不會浪費時間。


使用方法官方有文件說明,簡單說我們只要透過以下這個網址

https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/{dataid}?Authorization={apikey}&format={format}

在 dataid 的部分填上想要抓取的資料,資料 id 可以透過資料主題列表查詢,把想要的那一項的資料編號替換就可以了。

接下來 apikey 的部分則是 API 授權碼後到本頁點下取得授權碼後把那串複製貼上就可以了。

最後的 {format} 為資料格式,請參照各資料集頁面確認可下載之檔案格式 ex.XML、CAP、JSON、ZIP、KMZ、GRIB2

把網址替代填入後就可以透過 api 抓取資料了。
Read more

2019年7月26日 星期五

哥吉拉

去哥吉拉展買的小東西,可惜我最熟悉的平常時代的哥吉拉賣光了,所以只收了這幾隻。

紅蓮哥吉拉
P1190017P1190018P1190019P1190029P1190030P1190031


Read more

按下加到購物車後,物品飛到購物車的效果



有些網站為了增加互動,會做把物品點了後東西飛到購物車的效果,這個只要善用網頁排版的概念就能夠做出來了,這邊來示範一下。

首先先用 html 排一個版,右上角是購物車,下面的商品列表會有增加到購物車的按鈕,另外會有一個空的區塊,是用來當點了加到購物車後把圖片放到裡面然後做動畫的地方。

See the Pen
fly to cart
by deathhell (@deathhell)
on CodePen.




接著點加到購物車後,要去計算空的區塊要移動的位置並替換掉裡面的圖片。
let itemList=$("#itemList").offset().left;
let cartPos=$("#cart").offset().left;

$(".btn").click(function(){
  let item=$(this).closest(".item");
  let img=item.find("img").attr("src");
  let itemX=item.offset().left-itemList;
  let itemY=item.offset().top;

  $("#show")
    .css({
      left: itemX,
      top: itemY,
      width: 200,
      opacity: 1
    })
    .find("img").attr("src", img)

});

接著計算要飛到的目標位置後,這邊我們使用 TweenMax 做中間的動畫。
TweenMax.to("#show", 0.8, {left:cartPos-itemList, top: 10, width: 20});
  TweenMax.to("#show", .3, {
    css:{
      opacity: 0
    }, delay:0.5})

這樣大致完成了,但因為動畫在播放的時候會想跑到終點,如果我們連點可能就會出問題,所以必須點了後就重置動畫。
TweenMax.killTweensOf('#show');

最後的結果在這邊:

See the Pen
fly to cart
by deathhell (@deathhell)
on CodePen.


Read more

2019年7月25日 星期四

2019年7月24日 星期三

[KERORO魂] ケロロロボUC(Keroro 機器人 UC)

ケロロロボUC

為了紀念 Keroro 軍曹 20 週年,Bandai 推出了 KERORO魂系列,第一款就是這隻隊長的 ケロロロボ(Keroro 機器人),跟以往組合模型不一樣的是這款結合了鋼彈獨角獸,除了有獨角獸的裝甲外也可以做到類似獨角獸的變形樣貌。


Read more

2019年7月23日 星期二

2019年7月22日 星期一

Eva Design System- 深度學習的配色工具,幫你找出跟網站符合的配色系統



Eva Design System 是一個指定主配色後,利用深度學習幫你算出可以跟這個主配色搭配顏色的網站,網路上有不少這樣幫你算配色的工具,這個也可以當成是一個選擇。

使用方式很簡單,只要在 Primary 輸入主要的配色後,會幫你算出 Success、info...等顏色,看起來是用 bootstrap 的系統,這樣如果你的網站是用 bootstrap 跟這個配色系統就能搭配得更完美了。


Read more

2019年7月21日 星期日

2019年7月20日 星期六

真獅版獅子王

這年頭動物真辛苦 要演戲還要會唱歌(X
雖然整體編排跟網路上說的一樣跟原版差不多
可是就特效技術力的展現還有看音樂劇而言還是很好看就是了


Read more

2019年7月19日 星期五

2019年7月18日 星期四

2019年7月17日 星期三

2019年7月12日 星期五

2019年7月11日 星期四

[NXEDGE STYLE] EVA 二號機

P1200409

NXEDGE STYLE 推出的新劇場版 EVA 二號機一樣維持很高的水準,看起來應該是賣得不錯所以不只新劇場版的福音戰士陸續推出,連舊 TV 跟電影版的也都陸續推出中,對於喜歡 SD 版比例的真的也算是一個福音。

P1200386P1200387

Read more

2019年7月9日 星期二

2019年7月6日 星期六

2019年7月4日 星期四

2019年7月2日 星期二

Related Posts Plugin for WordPress, Blogger...