From 993a93a5f0df5ed4e52ad6bbe080ba98a0e18314 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Thu, 11 Jan 2024 22:44:44 -0300
Subject: [PATCH] parallax with img component

---
 content/index.blade.php | 86 +++++++++++++++++++----------------------
 1 file changed, 40 insertions(+), 46 deletions(-)

diff --git a/content/index.blade.php b/content/index.blade.php
index 04a46c4..341c3bb 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -1,6 +1,6 @@
 @inject('type', 'Type')
 @extends('template.'.config('settings.template').'.content.master')
-@section('content')
+@section('head')
     <style>
         .block {
             width: 100%;
@@ -20,14 +20,11 @@
             pointer-events: none;
         }
     </style>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-
+@stop
+@section('content')
     <div class="block" style="height: 100%;">
         <!--<img src="{{$cover}}" data-speed="-1" class="img-parallax" alt="{{config('settings.name')}} Cover" />-->
-
-        <x-img src="{{$cover}}" data-speed="-1" class="img-parallax" alt="{{config('settings.name')}} Cover" />
-
+        <x-img src="{{$cover}}" data-speed="-1" class="img-parallax" alt="{{config('settings.name')}} Cover"/>
 
         <div class="d-none d-lg-flex" style="margin-top: 10%; margin-bottom: 8%;">
             <div class="p-3 rounded container" style="width: 45vw;  background: rgba(255, 255, 255, 0.2);
@@ -44,46 +41,8 @@
                 </p>
             </div>
         </div>
-
     </div>
 
-    <script>
-        $('.img-parallax').each(function() {
-            var $image = $(this);
-            var $imageParent = $(this).parent().parent();
-
-            function parallaxImg () {
-                var speed = $image.data('speed');
-                var imageY = $imageParent.offset().top;
-                var winY = $(this).scrollTop();
-                var winH = $(this).height();
-                var parentH = $imageParent.innerHeight();
-                // The next pixel to show on screen
-                var winBottom = winY + winH;
-
-                // If block is shown on screen
-                if (winBottom > imageY && winY < imageY + parentH) {
-                    // Number of pixels shown after block appear
-                    var imgBottom = ((winBottom - imageY) * speed);
-                    // Max number of pixels until block disappear
-                    var imgTop = winH + parentH;
-                    // Percentage between start showing until disappearing
-                    var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
-                }
-
-                $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
-            }
-
-            $(document).on({
-                scroll: function () {
-                    parallaxImg();
-                }, ready: function () {
-                    parallaxImg();
-                }
-            });
-        });
-    </script>
-
     <div class="card text-bg-dark border-0 d-lg-none" style="border-radius:0; box-shadow:none;">
         <x-img src="{{$cover}}" style="object-fit:cover; aspect-ratio:3/1;" class="img-fluid shadow-lg" alt="{{config('settings.name')}} Cover" />
         <div class="card-img-overlay d-none d-lg-flex align-items-center" styles="border-radius:0; background: radial-gradient(rgba(0,0,0,.5) 20%,rgba(0,0,0,.1)); box-shadow:inset 0 0 3px 1px rgba(0,0,0,.1), inset 0 0 25px 2px rgba(0,0,0,.2);">
@@ -417,5 +376,40 @@
     </section>
 
 @stop
-    @section('scripts')
+
+@section('scripts')
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            $('.img-parallax').each(function() {
+                var $image = $(this);
+                var $imageParent = $(this).parent().parent().parent();
+
+                function parallaxImg () {
+                    var speed = $image.data('speed');
+                    var imageY = $imageParent.offset().top;
+                    var winY = $(this).scrollTop();
+                    var winH = $(this).height();
+                    var parentH = $imageParent.innerHeight();
+                    // The next pixel to show on screen
+                    var winBottom = winY + winH;
+
+                    // If block is shown on screen
+                    if (winBottom > imageY && winY < imageY + parentH) {
+                        // Number of pixels shown after block appear
+                        var imgBottom = ((winBottom - imageY) * speed);
+                        // Max number of pixels until block disappear
+                        var imgTop = winH + parentH;
+                        // Percentage between start showing until disappearing
+                        var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
+                    }
+
+                    $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
+                }
+
+                $(document).on({ scroll: function () { parallaxImg(); } });
+
+                parallaxImg();
+            });
+        });
+    </script>
 @stop