想一次知道HTML5電子書的翻頁效果?進來就一次打包!

-
想一次知道HTML5電子書的翻頁效果?進來就一次打包!



HTML5的電子書翻頁效果原來這麼多樣態,而且今天這篇文章還送你原始碼!

1. HTML5 書本翻頁動畫特效




首先，先來介紹手動翻書頁面特效的基本款～

這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來進行快速翻頁。

▶網頁上展示
▶原始碼下載


2. HTML5 3D書本翻頁特效





 
利用 HTML5 和 CSS3 不但可以實現翻頁動畫，還可以以3D 的立體形式實現！下面這款書本翻頁特效，使用鼠標拖拽書本頁面即可翻動頁面，在翻頁的過程中，書本還可以呈現出3D立體的效果 - 包括書本中的圖片也是。

▶網頁上展示
▶原始碼下載


3. HTML5/CSS3書本翻頁3D動畫




另一種簡潔版書本3D動畫特效，就是這種：當我們將鼠標滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果不但非常鮮明、極簡，舒服。

▶網頁上展示
▶原始碼下載

4. 超逼真書本翻頁動畫(CSS3版)



這款 CSS3 動畫效果是模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時，書本即可向前翻一頁，而且翻頁動畫非常逼真。由於 CSS3 的運用，我們並不需要使用複雜的圖片來製造逼真的書本效果，書本翻頁可以很簡單地完成。

▶網頁上展示
▶原始碼下載

5. 超逼真書本翻頁動畫(jQuery版)




這款 jQuery 書本翻頁 3D 動畫，功能更加強大，支援頁數不限，並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML 元素，彈性高、強大好用。

▶網頁上展示
▶原始碼下載

6. jQuery/CSS3書本翻頁動畫特效




這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效，外觀清新、而且還有指示便於操作呢！除了點擊滑鼠來翻頁之外，我們還可以直接點擊左右按鈕進行翻頁。

▶網頁上展示
▶原始碼下載





延伸閱讀文章：

用Python寫出自己的番茄鐘!人工智慧來增加我效率了~下

Python可是你不能不了解的傳奇!有多好用?看這篇就知道~

24個對Python初學者的中肯建議,你敢不聽嗎?

Python vs R語言：哪個比較適合人工智慧／機器學習？

人工智慧釀酒超越人類 全球首支AI威士忌勇奪金牌

捷克新創Resistant.AI 開發2產品 揪出欺騙人工智慧的詭計

AI 人工智慧、ML 機器學習、深度學習、Python 是什麼？

這個網誌中的熱門文章

全球首屆"元宇宙時裝周"盛會,一起來看看!

-
圖片
你知道前陣子剛結束的 元宇宙 時裝周嗎?繼續往下看有多精彩! 目錄 元宇宙時裝周參與盛況 叫好不叫座？新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」（Metaverse Fashion Week，簡稱MVFW），不久前正式落幕。 這場盛會吸引了包括 Forever 21、Tommy Hilfiger、雅詩蘭黛等 60 多家國際品牌參與，以及來自世界各地的元宇宙用戶。 元宇宙時裝周參與盛況 傳統形式的時裝週，通常只有特定的時尚人士才有資格進入秀場觀賞；MVFW 打破這項限制，免費開放 元宇宙 中的所有用戶參加。 任何人用虛擬形象進入 元宇宙 秀場，都能觀賞頂尖設計師的最新作品，甚至只要綁定錢包，你也可以輕易獲得品牌推出的虛擬或實體服飾。 舉例來說，快時尚品牌 Forever 21 不僅開設了虛擬商店，還出售專屬的 NFT，聲勢浩大；唯一的美妝品牌雅詩蘭黛，免費贈送一萬份小棕瓶 NFT，為使用者的虛擬角色增添臉部發光的效果；鐘錶品牌 Bulova 推出了經典錶款的可穿戴虛擬版本；來自中國的獨立設計師讓秀場設計看起來充滿中國風的古色古香；服裝秀之後的 元宇宙 演唱會，則為參與時裝週的人們帶來最後的高潮。 時尚周上 Forever 21 的展示畫面｜aboutmetaverse 從各品牌的 NFT 及實體商品的搶手程度和現場熱火朝天的人群密度看來，這一場 元宇宙 的虛擬時尚盛宴，可以說是非常成功。 叫好不叫座？新興技術的行銷瓶頸 事實上，早在 20 年前的虛擬遊戲《第二人生》中，品牌爭奇鬥豔的推廣盛況就已展開，然而由於遊戲性質，導致品牌推廣效益比預想中還要低落，最終使這場品牌展示秀黯然落幕。       MVFM 實際上仍存在明顯技術缺陷，以容易故障的用戶體驗為例，由於伺服器限制，一旦人數瀕臨滿載，許多數位展演、視覺體驗、聽覺體驗都會受到大幅延遲甚至壞軌，嚴重破壞用戶體驗。而時裝週最重要的服裝作品，更因為 3D 設計功能過度侷限簡化，導致無法展現複雜細膩的圖像和紋理。 MVFM 首次開辦就成功，大都是因為搭上 元宇宙 的列車。若未來無法突破技術的限制、創造新的驚喜，以致虛實無法成功整合，恐怕都要步上 20...
閱讀完整內容

人工智慧最關鍵始祖,最接近神的男人1:是預言家還是科學

-
圖片
現在發展高科技人工智慧的特斯拉電動車,還真的沒有讓特斯拉失望!今天來介紹這位被消失的天才預言家和科學家! 為何我們會想寫這篇文章? 人工智慧 、AI自動駕駛、wifi 等新科技，其實 100 年前就被一位被譽為「最接近神的男人」的科技奇才尼古拉．特斯拉（Nikola Tesla）所預言。無線電、遙控器、交流電都是被他發明，美國驚人的電力建設「尼加拉瓜」水電站也是他的建設。但是他晚年卻窮困潦倒、被教科書抹去，因為他的成果都被大奸商愛迪生―沒錯，就是小時候你在課本上看到那位號稱「發明電燈」的愛迪生刻意掩蓋住了。特斯拉在 IT 界上的貢獻，在做古後才得以平反。他讓 Google CEO Larry Page 小時候為之境遇落淚、他是特斯拉汽車執行長 Elon Musk 的精神偶像。讓我們看下去~ 本篇目錄 預言手機的發明、兩次世界大戰與鐵達尼號沉沒 - 他是「最接近神的男人」 特斯拉說到做到 vs 愛迪生的不認帳 貓奴不要看！愛迪生為打垮對手，不惜用交流電殺人殺貓殺狗 撕掉交流電專利，與西屋共患難...特斯拉的包容度無極限！ 即將於 7/19 上映的電影【電流大戰】，深度還原了特斯拉與愛迪生的商業戰爭過程   發明了交流電、無線電，促成現代的 人工智慧 等新科技 - 來自未來的天才特斯拉 沒有尼古拉．特斯拉（Nikola Tesla）這位發明無線電的男人，我們今天在外面可就沒有手機可用了，更別說 wifi、4G/5G 無線通訊啦！回到家，要開個電視、轉台，也沒有遙控器可用、若把時間往前移一點，我們的爺爺奶奶也沒有廣播可聽。因為這些東西全都是偉大的特斯拉發明的呀！ 除此之外，他還發明了無線電報、氖燈、三項電、火星塞、交流電、尼加拉發電站等等，他的每一次發明，都讓世界進步至少100 年呢！ 預言手機的發明、兩次世界大戰與鐵達尼號沉沒 - 他是 「最接近神的男人」！ 美國 NBC 新聞報導：特斯拉於 100 年前關於智慧型手機的預言，極其準確 除了發明發現了現在與未來的科技外，這位擁有物理學家、機械工程師、電機工程師、發明家等諸多身分，並能說八種語言的東歐天才，更有超乎常人的觀察力與預知能力。 百年前，他曾預言十樣事情，如今已...
閱讀完整內容

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

-
圖片
如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況! CSS  background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動，而它有三種不同的呈現方案： 第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動 第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的 第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。 而 前端工程師 們通常會將CSS background-repeat 與  背景圖樣設定 (background-image)  搭配設計。 CSS background-attachment 基本語法如下： background-attachment: 顯示參數; 而另外，有三種可以使用的顯示參數，來決定背景圖與網頁主體該以何種方式來搭配顯示，分別為  scroll （預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、 fixed （背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、 local （背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例： CSS background-attachment 各種參數的範例 See the Pen background-attachment-example by Tedutw ( @Tedutw ) on CodePen . 現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的 前端工程師 搭配「 background-repeat: no-repeat; 」參數使用，做出網頁主體都浮在高質感的背景圖的效果。 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repe...
閱讀完整內容