Пример создания анимационной текстовой маски с использованием библиотеки snap.svg.
Для тех кто забыл или не знает, Snap.svg — это библиотека JavaScript, которая призвана помогать веб-разработчикам поставлять расширенные возможности SVG в интернет.
Данная библиотека в состоянии загружать, анимировать, и даже создавать SVG графику прямо в браузере. Snap был создан Дмитрием Барановским, который также создал Рафаэля, но в отличие от него, данная библиотека сделана для поддержки большинства современных браузеров.
ДемоHTML
<svg id="svg"></svg>
CSS
body { font-family: 'Chango', cursive; background: #dedede; } #svg { height: 200px; width: 800px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
JS
var s = Snap('#svg'), circles = [], bg = s.rect(0, 0, 800, 200); bg.attr({ 'fill': '#fff' }); var circleGroup = s.group(bg); // create 200 circles for(var i=0; i<200; i++) { var size = Math.random()*5 + 3, cx = Math.random()*800, cy = Math.random()*200, opacity = Math.random(), fill = '#9d77da', counter = Math.random()*360; circ = s.circle(cx, cy, size); circ.attr({ 'fill': fill, 'fill-opacity': opacity }); circ.data('xOffset', cx); circ.data('cx', cx); circ.data('yOffset', cy); circ.data('cy', cy); circ.data('counter', counter); circles.push(circ); circleGroup.add(circ); } var increase = Math.PI * 2 /40, text = s.text(10, 130, "SNAPSVG"); text.attr({ 'font-size': 120, 'fill': '#fff' }); circleGroup.attr({ mask: text }); function draw() { for(var i=0, l=circles.length; i<l; i++) { var circ = circles[i]; if(circ.data('cy') < 0) { circ.data('cy', 200); } else { circ.data('cy', (circ.data('cy')-2)); } circ.data('cx', (circ.data('xOffset') + (50*(Math.sin( circ.data('counter')) / 5)))); circ.attr({ cx: circ.data('cx'), cy: circ.data('cy') }); circ.data('counter', circ.data('counter')+increase); } } function animate() { draw(); window.requestAnimationFrame(animate); } animate();
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!