Фразы из трансформирующихся слов на CSS3, SVG и Javascript
Очень прикольный эффект. Буквы будто становятся жидкостью и слова плавно трансформируются друг в друга
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#container { position: absolute; margin: auto; width: 100vw; height: 80pt; top: 0; bottom: 0; /* This filter is a lot of the magic, try commenting it out to see how the morphing works! */ filter: url(#threshold) blur(0.6px); } #text1, #text2 { position: absolute; width: 100%; display: inline-block; font-family: 'Raleway', sans-serif; font-size: 80pt; text-align: center; user-select: none; } |
2#: Следующий код поместите в то место страницы, где должна быть трансформирующаяся фраза:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<div id="container"> <span id="text1"></span> <span id="text2"></span> </div> <svg id="filters"> <defs> <filter id="threshold"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140" /> </filter> </defs> </svg> <script type="text/javascript"> /* This pen cleverly utilizes SVG filters to create a "Morphing Text" effect. Essentially, it layers 2 text elements on top of each other, and blurs them depending on which text element should be more visible. Once the blurring is applied, both texts are fed through a threshold filter together, which produces the "gooey" effect. Check the CSS - Comment the #container rule's filter out to see how the blurring works! */ const elts = { text1: document.getElementById("text1"), text2: document.getElementById("text2") }; // The strings to morph between. You can change these to anything you want! const texts = [ "Добро", "пожаловать", "на", "проект", "imapo.ru"]; const morphTime = 1; const cooldownTime = 0.25; let textIndex = texts.length - 1; let time = new Date(); let morph = 0; let cooldown = cooldownTime; elts.text1.textContent = texts[textIndex % texts.length]; elts.text2.textContent = texts[(textIndex + 1) % texts.length]; function doMorph() { morph -= cooldown; cooldown = 0; let fraction = morph / morphTime; if (fraction > 1) { cooldown = cooldownTime; fraction = 1; } setMorph(fraction); } // A lot of the magic happens here, this is what applies the blur filter to the text. function setMorph(fraction) { // fraction = Math.cos(fraction * Math.PI) / -2 + .5; elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`; elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`; fraction = 1 - fraction; elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`; elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`; elts.text1.textContent = texts[textIndex % texts.length]; elts.text2.textContent = texts[(textIndex + 1) % texts.length]; } function doCooldown() { morph = 0; elts.text2.style.filter = ""; elts.text2.style.opacity = "100%"; elts.text1.style.filter = ""; elts.text1.style.opacity = "0%"; } // Animation loop, which is called every frame. function animate() { requestAnimationFrame(animate); let newTime = new Date(); let shouldIncrementIndex = cooldown > 0; let dt = (newTime - time) / 1000; time = newTime; cooldown -= dt; if (cooldown <= 0) { if (shouldIncrementIndex) { textIndex++; } doMorph(); } else { doCooldown(); } } // Start the animation. animate(); </script> |
