圖像特效框

您現在最好給我停下來

本頁面內包含基金會維基內部使用的模板

嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面


評分: +3+x

這是什麼?

這是一系列替代性的[image blocks],可為你的文章、SCP檔案、故事,或任何你所想的到的頁面提供極具互動性的圖像方塊!

如何使用

這大多數都是一目瞭然的,裡面有著一些共通的特點:

  • 在SIGMA-9和黑色標記筆上都可以正常使用
  • 所有true/false的選項都必須要填寫。
  • 圖像方塊是可以浮動的。這代表著你的內文會包覆在它們的旁邊。如果你選擇使用|float=true的話,你就也要使用到|align=left/right這個參數。這將會決定你的圖像是靠在螢幕的哪一邊。
  • Width就是max-width。在手機上,圖像的大小將會固定在螢幕最大寬度的一半。如果你想要變更的話,你將會要修改以下的CSS數值:

    .scp-image-block[data-feature="image-feature"] {
    max-width: [在這裡輸入寬度] !important;
    }

  • 圖片說明是可選擇使用的!如果你選填|add-caption=false的話,你就不需要加上|caption=text這一段了。
  • 碎形噪點式遮蔽與像素點式遮蔽都是用HTML的iframe來實現的,而它們……在Wikidot上會有點怪怪的。它們應該要能正常運作,但也有一定的機率會出狀況。
  • 如果你有任何疑問或請求的話,敬請聯繫WoedenazWoedenaz。不能保證我會很快回覆但我會盡可能快的!

多行的說明文字

可以擁有複數行的圖像說明文字。
你只需要照著以下的格式來書寫代碼即可:

|add-caption=true
|caption=這是一段超級無敵宇宙長的說明文字,而在句子尾端會有一個換行記號。 _
你只需要在句尾打上一個空格和一個下劃線就好了。 _
請務必記得那個空格,否則這不會起作用。 _
在下劃線的後方加上空格也會導致這個語法不起作用的。

圖像揭示

游標懸停後消除模糊

在手機上點擊以消除模糊

noodle.jpg
模糊效果開太強得話會變很怪
[[include :scp-zh-tr:component:image-features-source |blur-reveal=--]
|blur-amount=數值 推薦的範圍是1.5到5。數字愈大 = 模糊效果愈強!
|speed=數值 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 接受各類型的單位。
|url=url
|add-caption=true/false
|caption=文字
]]

游標懸停後模糊漸變圖像

在手機上點擊以漸變圖像

noodle.jpg
scp-4378-noodleverse.png
在使用時兩張圖像最好有著相同的寬長比。
[[include :scp-zh-tr:component:image-features-source |image-change=--]
|blur-amount=數值 推薦的範圍是1.5到5。數字愈大 = 模糊效果愈強!
|speed=數值 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 接受各類型的單位。
|start-url=url 游標懸浮之前的圖像的URL。
|hover-url=url 游標懸浮之後的圖像的URL。
|add-caption=true/false
|caption=文字
]]

游標懸停後滑動消除模糊

在手機上點擊以滑動消除模糊

Firefox瀏覽器的支援性代碼由EstrellaYoshteEstrellaYoshte所提供!

noodle.jpg
noodle.jpg
slide-direction代表的是它會從哪一邊往另一邊「滑走」
[[include :scp-zh-tr:component:image-features-source |slide-blur-reveal=--]
|blur-amount=數值 推薦的範圍是5到10。數字愈大 = 模糊效果愈強!
|slide-direction=left/right/top/bottom 整塊模糊濾鏡要從哪個方向「滑走」
|float=true/false
|align=left/right
|speed=數值 動畫的速度(單位為毫秒)
|width=px/rem/vw/% 接受各類型的單位。
|url=url
|add-caption=true/false
|caption=文字
]]

游標懸停後滑動消除遮蔽塊

在手機上點擊以滑動消除遮蔽塊

noodle.jpg
這裡的slide-direction也是一樣。
它也是從圖像的那一邊「滑走」。
[[include :scp-zh-tr:component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl 接受各類型的顏色輸入格式。
|slide-direction=left/right/top/bottom 整遮蔽塊要從哪個方向「滑走」
|speed=數值 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 接受各類型的單位。
|url=url
|add-caption=true/false
|caption=文字
]]

拉門式圖像切換器


noodle.jpg
根據你slider-color設定的顏色
那一個可以滑動的拉紐
能夠變換成任意顏色喔!
[[include :scp-zh-tr:component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl 接受各類型的顏色輸入格式。
|float=true/false
|align=left/right
|width=px/rem/vw/% 接受各類型的單位。
|left-url=url 左邊那張圖像的URL。
|right-url=url 右邊那張圖像的URL。
|slider-start-percent=0到100 從左邊開始算起,滑動拉紐的起始位置百分比。
|slider-color=hex/rgb/hsl 接受各類型的顏色輸入格式。
|slider-circle-size=px/rem/vw/% 接受各類型的單位。
|add-caption=true/false
|caption=文字
]]

游標懸停後消除碎形噪點

在手機上點擊以消除碎形噪點

noodle.jpg
較小的fractal-size能讓它看起來超整齊的。
試試看吧!
[[include :scp-zh-tr:component:image-features-source |noise-reveal=--]
|fractal-size=1至999 較大的數值代表著較小的碎形。
|speed=Number 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem 不接受輸入 vw 或 % 這兩種單位。
|background=color/url("")/gradient 接受各類型的背景輸入。
|url=url
|add-caption=true/false
|caption=文字
]]

游標懸停後消除像素點

在手機上點擊以消除像素點

noodle.jpg
這整個是用iframe來完成的。
如果可以的話,一個頁面裡最好只使用一個。
[[include :scp-zh-tr:component:image-features-source |pixel-reveal=--]
|pixel-res=數值 數值愈大代表像素點愈大。(推薦範圍是4至32)
|speed=Number 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem 不接受輸入 vw 或 % 這兩種單位。
|url=url
|add-caption=true/false
|caption=文字
]]

圖像縮放

游標懸停後放大圖像

在手機上點擊以放大圖像

noodle.jpg
enlarge-amount=6代表它會放大成原始大小的1.6倍。
enlarge-amount=20代表的就是原本的3倍大。
[[include :scp-zh-tr:component:image-features-source |hover-enlarge=--]
|enlarge-amount=數值 數字愈大:擴張幅度愈大。(推薦範圍是5至20)
|speed=數值 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 接受各類型的單位。
|url=url
|add-caption=true/false
|caption=文字
]]

游標長按後全螢幕顯示

在手機上點擊以全螢幕顯示

noodle.jpg
noodle.jpg
這裡的speed指的是
當你點擊/按壓圖片時,圖片
淡入螢幕中心的速度。
[[include :scp-zh-tr:component:image-features-source |click-fullscreen=--]
|speed=數值 動畫的速度(單位為毫秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 接受各類型的單位。
|url=url
|add-caption=true/false
|caption=文字
]]
除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License