Image Features
Примечание:
Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.
2/0%
What is this?
A collection of alternative [image blocks] that provide extra interactivity to the images in your Articles, SCPs, Tales, or whatever the heck you want!
How to use
Most are self-explanatory but there are a few shared features:
- THESE WORK ON BOTH SIGMA-9 AND BLACK HIGHLIGHTER
- Any
true/falseoptions must be included. - Images can be floated. This means text will wrap around them. If you chose
|float=trueyou also need to pick|align=left/right. This will choose what side of the screen the image will float on. - Width is max-width. On mobile, images will always be max-50% screen width. If you want to change this, you'll have to edit CSS values:
.scp-image-block[data-feature="image-feature"] {
max-width: [add width here] !important;
} - Captions are optional! If you chose
|add-caption=false, you do not need to include a|caption=text. - Fractal Noise Reveal and Pixelate Reveal both use HTML in iframes which are… a little odd on Wikidot. They should work but there is certainly a chance they will bug out.
- If you have any more questions or requests feel free to contact Woedenaz. No guarantee that I'll respond quickly but I'll try!
Multi-Line Captions
You can have multi-line captions.
You just need to format the code like so:
|add-caption=true
|caption=This is a super duper long caption that is eventually going to have a line break. _
You just need to add a space WITH an underscore after. _
Remember the space or it will not work. _
Adding a space after the underscore will also cause it not to work.
|caption=This is a super duper long caption that is eventually going to have a line break. _
You just need to add a space WITH an underscore after. _
Remember the space or it will not work. _
Adding a space after the underscore will also cause it not to work.
IMAGE REVEALS
Hover Blur Reveal
Tap Blur Reveal on Mobile
Check Page Source for Code
Main Component Link Here
Lots of blur might end up looking really odd
[[include component:image-features-source |blur-reveal=--]
|blur-amount=Number 1.5 - 5 Recommended. Higher number = More blur!
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
|blur-amount=Number 1.5 - 5 Recommended. Higher number = More blur!
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
Hover Blur Change Image
Tap Blur Change Image on Mobile
Check Page Source for Code
Main Component Link Here
This works best if both images share the same width to height ratio.
[[include component:image-features-source |image-change=--]
|blur-amount=Number 1.5 - 5 Recommended. Higher number = More blur!
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|start-url=url URL of image BEFORE hover.
|hover-url=url URL of image AFTER hover.
|add-caption=true/false
|caption=text
]]
|blur-amount=Number 1.5 - 5 Recommended. Higher number = More blur!
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|start-url=url URL of image BEFORE hover.
|hover-url=url URL of image AFTER hover.
|add-caption=true/false
|caption=text
]]
Hover Slide Blur Reveal
Tap Slide Blur Reveal on Mobile
Firefox supported blur slide code provided by EstrellaYoshte!
Check Page Source for Code
Main Component Link Here
The slide direction means it will move AWAY that direction.
[[include component:image-features-source |slide-blur-reveal=--]
|blur-amount=Number 5 - 10 Recommended. Higher number = More blur!
|slide-direction=left/right/top/bottom Direction slide will move AWAY from.
|float=true/false
|align=left/right
|speed=Number Animation speed in milliseconds
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
|blur-amount=Number 5 - 10 Recommended. Higher number = More blur!
|slide-direction=left/right/top/bottom Direction slide will move AWAY from.
|float=true/false
|align=left/right
|speed=Number Animation speed in milliseconds
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
Hover Slide Block Reveal
Tap Slide Block Reveal on Mobile
Check Page Source for Code
Main Component Link Here
This slide direction is not different.
It moves AWAY from that direction also.
It moves AWAY from that direction also.
[[include component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl All color inputs work here.
|slide-direction=left/right/top/bottom Direction slide will move AWAY from.
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
|block-color=hex/rgb/hsl All color inputs work here.
|slide-direction=left/right/top/bottom Direction slide will move AWAY from.
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
Slide Image Revealer
Check Page Source for Code
Main Component Link Here
The slider button arrows will change
from black to white
depending on the slider-color!
from black to white
depending on the slider-color!
[[include component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl All color inputs work here.
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|left-url=url This is the URL for the left image.
|right-url=url This is the URL for the right image.
|slider-start-percent=0-100 % from the left where the slider will start.
|slider-color=hex/rgb/hsl All color inputs work here.
|slider-circle-size=px/rem/vw/% All measurement types work here.
|add-caption=true/false
|caption=text
]]
|block-color=hex/rgb/hsl All color inputs work here.
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|left-url=url This is the URL for the left image.
|right-url=url This is the URL for the right image.
|slider-start-percent=0-100 % from the left where the slider will start.
|slider-color=hex/rgb/hsl All color inputs work here.
|slider-circle-size=px/rem/vw/% All measurement types work here.
|add-caption=true/false
|caption=text
]]
Hover Fractal Noise Reveal
Tap Fractal Noise Reveal on Mobile
Check Page Source for Code
Main Component Link Here
Lower fractal sizes can look super neat.
Try it out!
[[include component:image-features-source |noise-reveal=--]
|fractal-size=1-999 Larger # means smaller fractal.
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem vw/% WILL NOT WORK.
|background=color/url("")/gradient Any sort of background input will work here.
|url=url
|add-caption=true/false
|caption=text
]]
|fractal-size=1-999 Larger # means smaller fractal.
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem vw/% WILL NOT WORK.
|background=color/url("")/gradient Any sort of background input will work here.
|url=url
|add-caption=true/false
|caption=text
]]
Hover Pixelate Reveal
Tap Pixelate Reveal on Mobile
Check Page Source for Code
Main Component Link Here
This is all done in iframes.
It's best to only use one per page, if possible.
It's best to only use one per page, if possible.
[[include component:image-features-source |pixel-reveal=--]
|pixel-res=Number Larger # means larger pixels. (4-32 suggested)
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem vw/% WILL NOT WORK.
|url=url
|add-caption=true/false
|caption=text
]]
|pixel-res=Number Larger # means larger pixels. (4-32 suggested)
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem vw/% WILL NOT WORK.
|url=url
|add-caption=true/false
|caption=text
]]
IMAGE ZOOMS
Hover Enlarge
Tap Enlarge on Mobile
Check Page Source for Code
Main Component Link Here
enlarge-amount=6 means it will grow to 1.6 times its original size.enlarge-amount=20 means 3.0 times larger.[[include component:image-features-source |hover-enlarge=--]
|enlarge-amount=Number Higher number: Larger Expand. (5-20 Recommended)
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
|enlarge-amount=Number Higher number: Larger Expand. (5-20 Recommended)
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
Click & Hold Fullscreen
Tap Fullscreen on Mobile
Check Page Source for Code
Main Component Link Here
The speed here refers to how quickly
the image will fade into the center of the screen
when you click/tap.
the image will fade into the center of the screen
when you click/tap.
✖
[[include component:image-features-source |click-fullscreen=--]
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
версия страницы: 17, Последняя правка: 14 Янв. 2024, 22:18 (95 дней назад)