Circle animation

很久沒有做這類的東西，

這次是一種漸層的排序，

運用了三角函數的sin，

和一些tween

留言

張貼留言

這個網誌中的熱門文章

html嵌入youtube影片當背景，並靜音

網路上看到至少三種以上教學，我依序放上我試過的： 首先，先知道影片內容， https://www.youtube.com/watch?v=YrLk4vdY28Q watch?v=XXXXXXXXX，後面即為id 若後面還有?rel或什麼什麼的，一律不管刪掉 第一種，簡單嵌入式，用div控制大小，並用iframe的參數來控制影片 來源： https://blog.allenchou.cc/youtube-video-background/ ---------- <div style="position: fixed; z-index: -99; width: 100%; height: 100%">   <iframe frameborder="0" height="100%" width="100%" src="我的影片?autoplay=1&controls=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen> </iframe> </div> <div id="muteYouTubeVideoPlayer"></div> ------------ 在src來源的部份，有autoplay，controls，showinfo，autohide這些 autoplay // 在讀取時自動播放影片 0為不播放 controls // 在播放器顯示暫停／播放按鈕 0為不出現 showinfo // 隱藏影片標題 1為不出現 autohide // 播放影片時隱藏影片控制列 0為不出現 fs // 顯示全螢幕按鈕 0為不出現 loop //循環播放 0為不循環 但，以上的問題就是沒有靜音功能… 然後，找到一個網站，在iframe上設定參數，增加一個volumn="0" 如下 <iframe width="640" heigh...
閱讀完整內容

css小發現：隱藏捲軸、強迫物件換行

有時在設定固定範圍物件時，總會有那麼奇怪的事發生： 就是捲軸竟然出現了！明明就剛剛好大小，怎麼會發生這樣的事呢… 這時就有css的設定出現了： overflow-y: scroll; overflow-x: hidden; 有x跟y兩個 除此之外，相關的設定有： 加入/隱藏捲軸語法 預設使用捲軸        overflow:auto; 刪除捲軸               overflow:hidden; 刪除水平捲軸        overflow-x:hidden; 刪除垂直捲軸        overflow-y:hidden; 捲軸變色 可放在所有有捲軸的地方，一般來說放在html{}裡就可。 html{ scrollbar-face-color: 色碼;    /*捲軸顏色*/ scrollbar-highlight-color: 色碼;    /*捲軸左與上內邊框*/ scrollbar-shadow-color: 色碼;    /*捲軸右與下內邊框*/ scrollbar-3dlight-color: 色碼;     /*捲軸左與上外邊框*/ scrollbar-darkshadow-color: 色碼;    /*捲軸右與下外邊框*/ scrollbar-arrow-color: 色碼;    /*捲軸箭頭*/ scrollbar-track-color: 色碼;   /*捲軸底色*/ } 捲軸左置 建議不要把主框架捲軸左置；文字會變成全部倒反，會不太好處理。 捲軸左置語法    direction: rtl; 語法加在你想改的捲軸語法欄位即可(有捲軸的地方皆可)。 例如我想把主選單的捲軸左置則:#links {direction: rtl;} 資料夾、欄位加入捲軸 有些欄位(最新回應、最新引用...之類)，總是佔了...
閱讀完整內容

好用的企畫編輯軟體- Axure

圖片
Axure 5.6 for mac Axure 5.6 for PC 一個網站企畫的工具，讓不懂網頁設計的人也可以快速的建立起具互動的架構， 並且可以發佈成HTML的格式， 以下是他的介面： 常用的工具包括了： Sitemap、Widgets、Masters、Annotations & Interactions 、pannel以及輸出：prototype Widgets 可以擴充，點擊並拖拉到介面上即可使用， 運用Master功能可以製作樣板， 利用互動來連結到不同的頁面， 輸出後即是一個有互動功能的頁面。 整體而言是一個不錯用的工具， 透過擴充還可以增加不同的風格物件， 但是沒有中文以及無法做細致的設計是我覺得美中不足吧 以下影片的內容是由 Luca Benazzi 所設計，為倫敦的使用者經驗設計師 Axure RP 網站原型示範- "Axure in Action" 看了影片可以發現這個網站所能做到的功能 其實滿強大的吧~
閱讀完整內容