Домой / Для сайта / Разное / Текстовая маска с использованием snap.svg
Текстовая маска с использованием snap.svg

Текстовая маска с использованием snap.svg

Пример создания анимационной текстовой маски с использованием библиотеки 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();


Пример создания анимационной текстовой маски с использованием библиотеки snap.svg. Для тех кто забыл или не знает, Snap.svg —  это библиотека JavaScript, которая призвана помогать веб-разработчикам поставлять расширенные возможности SVG в интернет. Данная библиотека в состоянии загружать, анимировать, и даже создавать SVG графику прямо в браузере. Snap был создан Дмитрием Барановским, который также создал Рафаэля, но в отличие от него, данная  библиотека сделана для поддержки большинства современных браузеров. HTML CSS body { font-family: 'Chango', cursive; background: #dedede; } #svg { height: 200px; width: 800px; display: block; position: absolute; top: 0; left: 0; right: 0;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.88 ( 2 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*