Визуальный элемент Image Features
Примечание:
Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.
5/40%
Что это?
Набор альтернативных [image block]'ов, которые добавляют немного интерактива в ваши статьи. Неважно, пишите ли вы объект, рассказ или что-то ещё.
Как использовать
Большинство вариаций понятны сами по себе, но есть ряд общих особенностей:
- ЭТО РАБОТАЕТ И В SIGMA-9 И В BLACK HIGHLIGHTER
- Любые параметры со значением
trueлибоfalseобязательны. - Картинки могут "плавать". Т.е. текст будет огибать их. Если вы выбираете
|float=true, то не забудьте указать параметр|align=left/right. Он указывает, с какой стороны должно "плавать" изображение. - Ширина — это max-width. На мобильных экранах изображения всегда будут иметь размер от указанной ширины до 50% ширины экрана. Если вы хотите это поменять, вам необходимо подредактировать значение CSS:
.scp-image-block[data-feature="image-feature"] {
max-width: [здесь укажите ширину] !important;
} - Подписи опциональны! Если вы указываете
|add-caption=false, то|caption=текстне нужен. - Рекомендуется указывать Alt-текст! У всех изображений есть опции
|alt=alt|alt-text=Описание картинки. Их можно опустить, но ради доступности контента их рекомендуется добавлять. Alt-текст должен описывать содержимое изображения. - Появление из фрактального шума и Появление из пиксельного шума написаны на HTML и используют iframe, которые что на WikiDot, что у нас, достаточно… странные. Они по идее сработают, но шанс их поломки достаточно высок.
- Если у вас остались вопросы или пожелания, свяжитесь с Woedenaz.
Многострочные подписи
Многострочные подписи возможны.
Добавляются они следующим образом:
|add-caption=true
|caption=Это супер-пупер длинная подпись у которой будет перенос строки. _
Надо лишь добавить пробел и нижнее подчёркивание после него. _
Помните про пробел, иначе не сработает. _
Добавление пробела после нижнего подчёркивания тоже не сработает.
|caption=Это супер-пупер длинная подпись у которой будет перенос строки. _
Надо лишь добавить пробел и нижнее подчёркивание после него. _
Помните про пробел, иначе не сработает. _
Добавление пробела после нижнего подчёркивания тоже не сработает.
ПОЯВЛЕНИЯ ИЗОБРАЖЕНИЙ
Появление из размытия при наведении
Нажмите для активации на мобильных устройствах
Слишком много размытия может выглядеть очень странно
[[include component:image-features-source |blur-reveal=--]
|blur-amount=Число Рекомендуются значения от 1.5 до 5. Больше цифра = больше размытия!
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|blur-amount=Число Рекомендуются значения от 1.5 до 5. Больше цифра = больше размытия!
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
Смена изображения через размытие при наведении
Нажмите для активации на мобильных устройствах
Данный вариант работает наилучшим образом, если соотношение сторон у обоих изображений одинаковое.
[[include component:image-features-source |image-change=--]
|blur-amount=Число Рекомендуются значения от 1.5 до 5. Больше цифра = больше размытия!
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|start-url=Ссылка URL изображения ДО наведения.
|hover-url=Ссылка URL изображения ПОСЛЕ наведения.
|alt1=alt|alt1-text=Описание изображения 1
|alt2=alt|alt2-text=Описание изображения 2
|add-caption=true/false
|caption=Подпись
]]
|blur-amount=Число Рекомендуются значения от 1.5 до 5. Больше цифра = больше размытия!
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|start-url=Ссылка URL изображения ДО наведения.
|hover-url=Ссылка URL изображения ПОСЛЕ наведения.
|alt1=alt|alt1-text=Описание изображения 1
|alt2=alt|alt2-text=Описание изображения 2
|add-caption=true/false
|caption=Подпись
]]
Откат размытия с изображения при наведении
Нажмите для активации на мобильных устройствах
Код для Firefox предоставлен EstrellaYoshte!
slide-direction обозначает направление, ОТКУДА двигается размытие.
[[include 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/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|blur-amount=Число Рекомендуются значения от 5 до 10. Больше цифра = больше размытия!
|slide-direction=left/right/top/bottom Направление ОТКУДА будет откатываться размытие.
|float=true/false
|align=left/right
|speed=Число Скорость анимации в миллисекундах
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
Откат блока-плашки при наведении
Нажмите для активации на мобильных устройствах
Здесь slide-direction такой же.
Определяет направление ОТКУДА двигается блок-плашка.
Определяет направление ОТКУДА двигается блок-плашка.
[[include component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|slide-direction=left/right/top/bottom Направление ОТКУДА будет откатываться блок-плашка.
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|block-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|slide-direction=left/right/top/bottom Направление ОТКУДА будет откатываться блок-плашка.
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
Появление через слайдер
Стрелки на слайдере будут меняться
с чёрных на белые
в зависимости от slider-color!
с чёрных на белые
в зависимости от slider-color!
[[include component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения. из CSS.
|left-url=Ссылка URL для левого изображения.
|right-url=Ссылка URL для правого изображения.
|slider-start-percent=0-100 Отступ слева для слайдера, в %.
|slider-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|slider-circle-size=px/rem/vw/% Диаметр круга слайдера; работают любые единицы измерения из CSS.
|alt1=alt|alt1-text=Описание левого изображения
|alt2=alt|alt2-text=Описание правого изображения
|add-caption=true/false
|caption=Подпись
]]
|block-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения. из CSS.
|left-url=Ссылка URL для левого изображения.
|right-url=Ссылка URL для правого изображения.
|slider-start-percent=0-100 Отступ слева для слайдера, в %.
|slider-color=hex/rgb/hsl Сработают любые варианты определения цвета из CSS.
|slider-circle-size=px/rem/vw/% Диаметр круга слайдера; работают любые единицы измерения из CSS.
|alt1=alt|alt1-text=Описание левого изображения
|alt2=alt|alt2-text=Описание правого изображения
|add-caption=true/false
|caption=Подпись
]]
Проявление из фрактального шума при наведении
Нажмите для активации на мобильных устройствах
Маленькие размеры фрактала могут выглядеть очень неплохо.
Попробуйте!
[[include component:image-features-source |noise-reveal=--]
|fractal-size=1-999 Больше число = меньше фрактал.
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem vw/% НЕ СРАБОТАЮТ.
|background=color/url("")/gradient Здесь принимаются любые варианты свойства background из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|fractal-size=1-999 Больше число = меньше фрактал.
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem vw/% НЕ СРАБОТАЮТ.
|background=color/url("")/gradient Здесь принимаются любые варианты свойства background из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
Проявление из пикселей при наведении
Нажмите для активации на мобильных устройствах
Это сделано через iframe.
Так что лучше не использовать данный вариант больше одного раза на странице.
Так что лучше не использовать данный вариант больше одного раза на странице.
[[include component:image-features-source |pixel-reveal=--]
|pixel-res=Число Больше число = больше пиксели. (рекомендуются значения от 4 до 32)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem vw/% НЕ СРАБОТАЮТ.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|pixel-res=Число Больше число = больше пиксели. (рекомендуются значения от 4 до 32)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem vw/% НЕ СРАБОТАЮТ.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
УВЕЛИЧЕНИЯ ИЗОБРАЖЕНИЙ
Увеличение при наведении
Нажмите для активации на мобильных устройствах
enlarge-amount=6 означает, что изображение увеличится в 1,6 раз от изначального размера.enlarge-amount=20 означает 3 раза.[[include component:image-features-source |hover-enlarge=--]
|enlarge-amount=Число Больше число = больше увеличение. (Рекомендуются значения от 5 до 20)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|enlarge-amount=Число Больше число = больше увеличение. (Рекомендуются значения от 5 до 20)
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
Полноэкранный просмотр при удержании
Нажмите для активации на мобильных устройствах
speed отвечает за скорость
переноса изображения в центр экрана
при нажатии.
переноса изображения в центр экрана
при нажатии.
✖
[[include component:image-features-source |click-fullscreen=--]
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
|speed=Число Скорость анимации в миллисекундах
|float=true/false
|align=left/right
|width=px/rem/vw/% Ширина; работают любые единицы измерения из CSS.
|url=Ссылка
|alt=alt|alt-text=Описание изображения
|add-caption=true/false
|caption=Подпись
]]
версия страницы: 22, Последняя правка: 17 Фев. 2025, 12:27 (1 день назад)