JuxtaposeJS 輕鬆插入「比對」照片、地圖的網頁特效,報導、科普、教學文必備



之前寫了一篇「Google 相機夜視模式實測:解決禁用閃光燈餐廳展覽拍照難題」,裡面提供了幾張一般拍照、夜視拍照的對比。讀者回饋說,何不專業一點,使用許多網站中常見的「照片比對特效」呢?(如下圖)

讀者說的很有道理,於是我動手搜尋一下,馬上找到一個行之有年的解決辦法:「JuxtaposeJS」。




「JuxtaposeJS」是好幾年前就已經推出的免費線上工具,讓即使不懂網頁程式碼的朋友,只要貼上圖片網址,就能立刻產生「圖片比對特效」,像是下圖這兩張照片的比對這樣,拉動中間橫感,就能在同一個場景的照片、地圖上直接對照變化。

這個工具在台灣的許多新聞報導、科普教學、測試評論等等網頁文章中,已經頗常看到。如果你之前也沒有想到可以這樣利用,那麼記下這個工具,下次需要時就能幫上忙。





「JuxtaposeJS」的使用步驟很簡單。

首先來到「JuxtaposeJS」線上工具網站,點擊[ Make Juxtapose]開始製作。




製作過程中,先輸入左方圖片的網址,再貼上右方圖片的網址。你可以把圖檔上傳到 Dropbox 獲得網址,或是上傳到任何可以獲得圖片網址的空間。

在[ Label ]處填寫圖片說明,例如這是 2008 年的士林夜市,這是 2016 年的士林夜市。到時候圖片上方會顯示說明。

而[ Credit ]澤可以用來填寫圖片的來源。

接著按下[ Preview ]可以預覽,按下[ Publish ]可以獲得嵌入網頁的程式碼。




我們可以將「JuxtaposeJS」用在下面的用途

  • 老師用來製作古今地圖的比較
  • 記者用在今昔街景、建築、人物等的對比
  • 評論者用在對於照片的比較,例如相機效果、軟體效果、遊戲場景等等

比起直接羅列照片,可以拉動橫桿直接比較,更加生動直接。







將這個工具,也分享給有需要,而還不知道「JuxtaposeJS」的朋友。

我之前也有介紹過他的同系列工具:「免費開源時間軸製作 TimelineJS 視覺化歷史免程式碼」。

有這類需求的朋友,還可以參考相關工具的整理:[19 個新學期準備考試、做報告、寫筆記的數位學習與研究技能]、[給 2017 知識工作者與學習者的推薦工具及精選方法特輯]、[21 種「知識性」教學素材資源網站,提供老師學生免費下載]。

JuxtaposeJS」網站


 (歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:JuxtaposeJS 輕鬆插入「比對」照片、地圖的網頁特效,報導、科普、教學文必備

留言

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google Maps 我的地圖完全教學!規劃自助旅行攻略

個人知識管理的時間平衡心法,忙碌中我如何維持高效率輸入輸出

5 條「這時候,不要做」清單打破無意識行動模式的低效率循環

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單的 10 個專業問卷調查設計秘密教學

ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學,勝過 Midjourney