diff --git a/src/parallax-css-testpage/particles.js b/src/parallax-css-testpage/particles.js
index e9db1870a7bba9b80fda53483daa20d453ffe6ad..b7dd7f68ba67ceb5f94eec0b11b0d439477eccc2 100644
--- a/src/parallax-css-testpage/particles.js
+++ b/src/parallax-css-testpage/particles.js
@@ -1,29 +1,27 @@
 /*
- *  Particle.js
+ *  Particles.js
  */
 
 
-//
-//  Config
-//
-
-
-const Fps = 16
-
-
 //
 //  Helper
 //
 
 
 // Variables needed for fps calculation.
-const FpsInterval = 1000 / Fps
-let   Then = Date.now() // Argh.. Global, mutable, variable..!
+let Then = Date.now() // Argh.. Global, mutable, variable..!
 
 function randomValue(min, max) {
     return (Math.random() * (+max - +min) + +min)
 }
 
+function initCanvas(id) {
+    const canvas = document.getElementById(id)
+    const ctx = canvas.getContext('2d')
+    ctx.canvas.width = window.innerWidth
+    ctx.canvas.height = window.innerHeight
+    return ctx
+}
 
 
 //
@@ -31,7 +29,6 @@ function randomValue(min, max) {
 //
 
 
-
 function Point2D(x, y) {
     return { x, y }
 }
@@ -55,33 +52,57 @@ function Particle({ position, direction, size, color }) {
 }
 
 
-
 //
 //  Transformations | Actions
 //
 
 
-
 function Update(canvas, particle) {
-    // Animate the movement of the particle
+    // Animate the pulse effect of the particle
     //
-    const isRightEdge =
+    const isMaxSize = particle.size.value >= particle.size.bound.max
+    const isMinSize = particle.size.value <= particle.size.bound.min
+    const updateSizeStep =
+        Object.assign({}, particle, {
+            size: Object.assign({}, particle.size, {
+                direction:
+                    (isMaxSize || isMinSize)
+                      ? particle.size.direction * -1
+                      : particle.size.direction
+            })
+        })
+    const updateSize =
+        Object.assign({}, updateSizeStep, {
+            size: Object.assign({}, updateSizeStep.size, {
+                value:
+                    // Todo: Animate puls effect with the help of Math.sin()
+                    updateSizeStep.size.value + updateSizeStep.size.step * updateSizeStep.size.direction,
+            })
+        })
+
+    // Animate the movement of the particle
+    // 
+    const sizeOffset = particle.size.value * 0.5
+    const xCenter    = particle.position.x - sizeOffset
+    const yCenter    = particle.position.y - sizeOffset
+    const isRightEdge  =
         (particle.position.x + particle.size.value >= canvas.width)
     const isLeftEdge   = (particle.position.x <= 0)
-    const isBottomEdge =
-        (particle.position.y + particle.size.value >= canvas.height)
-    const isTopEdge    = (particle.position.y <= 0)
+    const isTopEdge    = (yCenter <= 0)
+    const isBottomEdge = (yCenter >= canvas.height)
+    const scrollOffset = window.pageYOffset
 
     const updateDirection =
-        Object.assign({}, particle, {
+        Object.assign({}, updateSize, {
             direction:
                 Point2D(
                     (isRightEdge || isLeftEdge)
-                        ? particle.direction.x * -1
-                        : particle.direction.x,
-                    (isTopEdge || isBottomEdge)
-                        ? particle.direction.y * -1
-                        : particle.direction.y
+                        ? updateSize.direction.x * -1
+                        : updateSize.direction.x,
+                    // (isTopEdge || isBottomEdge)
+                    //     ? particle.direction.y * -1
+                    //     : particle.direction.y
+                    updateSize.direction.y
                 )
         })
     const updatePosition =
@@ -89,33 +110,16 @@ function Update(canvas, particle) {
             position:
                 Point2D(
                     updateDirection.position.x + updateDirection.direction.x,
-                    updateDirection.position.y + updateDirection.direction.y,
+                    (isTopEdge)
+                        ? (canvas.height - 1) + updateDirection.direction.y
+                        : (isBottomEdge)
+                            ? sizeOffset + 1
+                            : updateDirection.position.y + updateDirection.direction.y,
                 )
         })
 
-    // Animate the pulse effect of the particle
-    //
-    const isMaxSize = updatePosition.size.value >= updatePosition.size.bound.max
-    const isMinSize = updatePosition.size.value <= updatePosition.size.bound.min
-    const updateSizeStep =
-        Object.assign({}, updatePosition, {
-            size: Object.assign({}, updatePosition.size, {
-                direction:
-                    (isMaxSize || isMinSize)
-                      ? updatePosition.size.direction * -1
-                      : updatePosition.size.direction
-            })
-        })
-    const updateSize =
-        Object.assign({}, updateSizeStep, {
-            size: Object.assign({}, updateSizeStep.size, {
-                value:
-                    // Todo: Animate puls effect with the help of Math.sin()
-                    updateSizeStep.size.value + updateSizeStep.size.step * updateSizeStep.size.direction,
-            })
-        })
-
-    const updatedParticle = Particle(updateSize)
+ 
+    const updatedParticle = Particle(updatePosition)
     return updatedParticle
 }
 
@@ -140,44 +144,44 @@ function Render(ctx, particles) {
     )
 }
 
-function Animate(ctx, particles) {
-    // Update particle positions and register for the next 
-    // frame to render. 
+function Animate(ctx, fpsInterval, particles) {
+    // Update particle positions and register for the next frame
+    // to render. 
     requestAnimationFrame(() => {
         const updatedParticles = 
             particles.map(function (p) {
                 return Update(ctx.canvas, p)
             })
-        Animate(ctx, updatedParticles)
+        Animate(ctx, fpsInterval, updatedParticles)
     }) 
 
-
     // Render particles to canvas
     const now = Date.now()
     const elapsed = now - Then
-    if (elapsed > FpsInterval) {
-        Then = now - (elapsed % FpsInterval)
+    if (elapsed > fpsInterval) {
+        Then = now - (elapsed % fpsInterval)
         Clear(ctx)
         Render(ctx, particles)  
     }
 }
 
- 
 
 //
 //  Api
 //
 
 
-
-function Particles({ canvasId, amount, color, size, lifespan }) {
+function Particles({ canvasId, fps, amount, color, size, lifespan, speed }) {
     // Init the canvas for rendering.
-    const canvas = document.getElementById(canvasId)
-    const ctx = canvas.getContext('2d')
-    ctx.canvas.width = window.innerWidth
-    ctx.canvas.height = window.innerHeight
+    //
+    const ctx = initCanvas(canvasId)
+    if (!ctx) {
+        console.error("Particles: Can't find Canvas ", canvasId)
+        return
+    }
 
-    // Generate random particles
+    // Generate some particles
+    //
     const particles =
         Array.from(
             { length: amount },
@@ -189,24 +193,27 @@ function Particles({ canvasId, amount, color, size, lifespan }) {
                     ),
                 direction:
                     RandomPoint2D(
-                        MinMax(-0.2, 0.2),
-                        MinMax(-0.2, 0.2)
+                        MinMax(-speed, speed),
+                        MinMax(-speed, speed)
                     ),
                 size: {
                     value: randomValue(-size, size),
                     bound: MinMax(-size, size),
-                    step: size / ((lifespan) / Fps),
+                    step: size / ((lifespan) / fps),
                     direction:
                         (randomValue(0, 100) < 50)
                             ? -1
-                            : +1
+                            : +1,
                 },
                 color
             })
         )
      
+    // Prepare Animation and animate
+    const fpsInterval = 1000 / fps
     Then = Date.now()
-    Animate(ctx, particles)
+    Animate(ctx, fpsInterval, particles)
+    return
 }
 
 
diff --git a/src/parallax-css-testpage/template.html b/src/parallax-css-testpage/template.html
index c0a11ab14a9b02d5d67231a5850487e7be4c18b9..07d3ad9bf235f05d0f72908db02a038de24c92ba 100644
--- a/src/parallax-css-testpage/template.html
+++ b/src/parallax-css-testpage/template.html
@@ -26,8 +26,9 @@
         <div class="static full-bg bg-image"></div>
         <div class="static full-bg vcr-overlay"></div>
         <div class="static full-bg grid"></div>
-        <canvas id="particles" class="static full-bg particles"></canvas>
+        <canvas id="bg-particles" class="static full-bg particles"></canvas>
         <div class="static full-bg vignette"></div>
+        <canvas id="fg-particles" class="static full-bg particles"></canvas>
     </div>
 
     <div class="perspective overflow">
@@ -39,7 +40,7 @@
             <!-- <div class="layer z-6 scroll-bg bg-pixels"></div> -->
 
             <div id="content" class="content">
-                <h1>This is a Parallax Scroll Example</h1>
+                <h1 id='scrollAnchor'>This is a Parallax Scroll Example</h1>
                 <p>Paragraph 1</p>
                 <p>Paragraph 2</p>
                 <p>Paragraph 3</p>
@@ -76,20 +77,34 @@
                 <p>Paragraph 5</p>
             </div>
 
-
         </div>
     </div>
 
 
     <script>
         var bgParticles = {
-            canvasId: 'particles',
-            amount: 75,
+            canvasId: 'bg-particles',
+            fps: 14,
+            amount: 100,
             color: 'white',
-            size: 7,
+            size: 5,
+            speed: 0.2,
+            depth: -8,
             lifespan: 4000 // in milliseconds
         }
         Particles(bgParticles)
+
+        var fgParticles = {
+            canvasId: 'fg-particles',
+            fps: 20,
+            amount: 20,
+            color: 'white',
+            size: 30,
+            speed: 0.5,
+            depth: 2,
+            lifespan: 4000 // in milliseconds
+        }
+        Particles(fgParticles)
     </script>
 
 </body>