Простой снегопад с параллакс эффектом на HTML5
|
1 2 3 4 5 6 7 8 9 10 |
#canvas-5 { width: 100%; padding: 0; display: block; margin: 0 auto; outline: none; position: absolute; top: 0px; z-index: -1; } |
|
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 |
<script type="text/javascript" src="/js/processing.min.js"></script> <script type="text/processing" data-processing-target="canvas-5"> ArrayList<Particle> snow; int snowLength = 300; class Particle { float x, y, speed, size; Particle() { x = random(width + 1); y = random(height + 1); speed = random(0.5, 3.0); size = random(2.0, 10.0); } void update() { if (y + speed >= height) { x = random(width + 1); y = 0; } else y += speed; fill(255); ellipse(x, y, size, size); } } void setup() { size(1200, 1200); noStroke(); smooth(); snow = new ArrayList<Particle>(); createParticles(); } void draw() { background(#394F79); for (Particle s : snow) s.update(); drawLandscape(); } void createParticles() { for (int i = 0; i < snowLength; i++) snow.add(new Particle()); } void drawLandscape() { rect(0, height-10, width, 10); } </script> <canvas id="canvas-5"></canvas> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
