Инструкция
(показать)
/start
Данная модификация превращает обычное изображение в формате jpg/png в шум. Не используя при этом устаревшие и тяжелые gif.
[СОВЕТ]
[ВАЖНО]
В некоторых браузерах режимы наложения работают не совсем корректно, поэтому тестируй страницу на всех устройствах. При необходимости выбери в поле с режимом наложения «normal».
- Вставь в форму ссылку на фон, укажи ширину фона в пикселях. Чем меньше значение — тем мельче будет зерно шума.
- Укажи прозрачность в процентах и выбери режим наложения.
- Выбери, нужно ли отображать шум на мобильном устройстве.
- Если нужно убрать шум для некоторых блоков — перечисли классы этих блоков в поле через запятую без точки в начале названия класса.
[СОВЕТ]
- Выбирай небольшие бесшовные изображения для шума. В таком случае можно будет получить шум весом в пару килобайт.
- Не знаешь, где взять шумные изображения — вбей в поисковик noise seamless texture. Или переходи на сайт, на котором можно навести шум.
[ВАЖНО]
В некоторых браузерах режимы наложения работают не совсем корректно, поэтому тестируй страницу на всех устройствах. При необходимости выбери в поле с режимом наложения «normal».
<!-- Code by Fedya [front-test.tilda.ws] -->
<style>:root{--app-height:100%}@media screen and (min-width:480px){.page__noise{position:fixed;display:flex;top:0;left:0;right:0;bottom:0;width:100%;height:100%;height:var(--app-height);background-image:url(https://static.tildacdn.com/tild3830-3138-4531-a133-346265356461/Mask_groups.jpg);background-size:170px;opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:9999}.page__noise--visible{opacity:.1; mix-blend-mode: normal;}class-1{position:relative;z-index:10000}}</style><script>if (window.matchMedia("(min-width: 480px)").matches){document.addEventListener('DOMContentLoaded',(evt)=>{document.body.insertAdjacentHTML('beforeend','<div class="page__noise"></div>');window.setInterval(fuzz,100);function fuzz(){document.querySelector('.page__noise').style.backgroundPosition=`${Math.floor(Math.random()*100)}% ${Math.floor(Math.random()*100)}%`}});window.addEventListener('load',(e)=>{document.querySelector('.page__noise').classList.add('page__noise--visible')});function appHeight(){const dc=document.documentElement;dc.style.setProperty('--app-height',`${window.innerHeight}px`)}appHeight();window.addEventListener('resize',appHeight)}</script>
/*
** Автор решения Федяева Екатерина Сергеевна [front-test.tilda.ws]
** Данное решение распространяется на условиях открытой лицензии.
** Допустимо использование решения на личных и коммерческих проектах.
** Запрещено изменение и продажа решения третьим лицам.
** По всем вопросам обращаться к автору: [telegram: @fedyaeva_kat]
*/
