blog/
Анимация для IG с помощью JavaScript и AfterEffects
Рассказываю про то, как делал анимированный постер для бесплатных курсов по AutoCAD и Archicad (https://dmtrvk.ru/study/project/). Код — ниже. А вот тут вы можете посмотреть, как он работает.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function drawLine(ctx, begin, end, stroke = 'black', width = 1, dashed = []) {
if (stroke) {
ctx.strokeStyle = stroke;
}
if (dashed) {
ctx.setLineDash(dashed);
}
if (width) {
ctx.lineWidth = width;
}
ctx.beginPath();
ctx.moveTo(...begin);
ctx.lineTo(...end);
ctx.stroke();
}
$(function() {
let times = 1;
// console.log(x1, ", ", y1, ", ", x2, ". ", x2, ", ", y2, ".");
function ass() {
const canvas = document.querySelector('#canvas');
for (i = 0; i <= 10 * (times / 100); i++) {
x1 = Math.floor(Math.random() * canvas.width);
y1 = Math.floor(Math.random() * canvas.height);
x2 = Math.floor(Math.random() * canvas.width);
y2 = Math.floor(Math.random() * canvas.height);
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
if (Math.random() * 100 > 50) {
drawLine(ctx, [x1, y1], [x2, y2], 'black', 2 * times / 100, [20, 7]);
} else {
color2 = 'white';
if (times > 200) { color2 = 'black'; }
drawLine(ctx, [x1, y1], [x2, y2], color2, 2 * times / 100);
}
}
}
times++;
console.log(times);
if (times > 1500) {
clearInterval(intervalID);
}
}
let intervalID = setInterval(ass, 50);
});
</script>
</head>
<body>
<canvas id="canvas" height="1080" width="1080">
</canvas>
</body>
</html>Может быть интересно:
- Скрипт для выбора победителя в инстаграме (из лайков)
- Скрипт для выбора победителя в инстаграме (из комментариев)
- Как разыграть бесплатные места на курсе вёрстки для архитекторов (JS+Instagram)
- Calculate inclination of a roof valley with Python
- Урок — Буквы от больших к маленьким в InDesign
░