Крутой эффект взломанного текста CSS + JS
 | |
| Интересный эффект, который идет виде взломанного текста, что выполнен при помощи HTML, CSS, Javascript, где при наведении начинают меняется значения. Крутой эффект взломанного текста смотрится просто великолепно, так как мы все равно получим название. Ведь когда клик наводим, то видим иллюзию, что подбираем специальный код, но через секунду мы видим название, к примеру "скачать здесь или перейти по этой ссылке" что разнообразие просто огромное. Здесь по сути задействован Javascript, и по минимум CSS, но как поняли, что здесь идет сам эффект. А где он будет, то вам решать, можно на кнопку поставить, или выставить на тематический сайт. Пример крутого взломанного текстового эффекта лучше всего подходит для разгадок иди загадок, что то в этом направление, этот эффект просто будет смотреться как он здесь должен быть. И здесь я точно могу с уверенностью сказать, лучше один раз посмотреть, чем его описывать, ниже ссылка идет на demo-страницу для просмотра.  Анимационный эффект эффект взломанного текста на CSSУстановка: HTML Код <h1 data-value="ZORNET.RU">ZORNET.RU</h1> CSS Код h1 { font-family: 'Space Mono', monospace; font-size: clamp(3rem, 10vw, 10rem); color: white; padding: 0rem clamp(1rem, 2vw, 3rem); border-radius: clamp(0.4rem, 0.75vw, 1rem); } h1:hover { background-color: white; color: black; } JS Код const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let interval = null; document.querySelector("h1").onmouseover = event => { let iteration = 0; clearInterval(interval); interval = setInterval(() => { event.target.innerText = event.target.innerText. split(""). map((letter, index) => { if (index < iteration) { return event.target.dataset.value[index]; } return letters[Math.floor(Math.random() * 26)]; }). join(""); if (iteration>= event.target.dataset.value.length) { clearInterval(interval); } iteration += 1 / 3; }, 30); }; Как можно понять, что в материале только представлен сам элемент эффекта, где как вы будете применить, это только ваше решение. Также под него можно поставить класс и сделать красивую кнопку или что то другое, чтоб смотрелось оригинально. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |