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)
- Урок — Буквы от больших к маленьким в InDesign
- Calculate inclination of a roof valley with Python
▝