Areya
/
basic-business-template
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

.

master
Gustavo Luigi 2024-01-11 18:28:09 -03:00
parent 7c2771ad33
commit 6071d7f7cb
1 changed files with 35 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
content/index.blade.php
View File

@ -1,10 +1,7 @@
@inject('type', 'Type') @inject('type', 'Type')
@extends('template.'.config('settings.template').'.content.master') @extends('template.'.config('settings.template').'.content.master')
@section('content') @section('content')


<style> <style>

.block { .block {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -13,8 +10,6 @@
font-size: 16px; font-size: 16px;
} }




.img-parallax { .img-parallax {
width: 100vmax; width: 100vmax;
z-index: -1; z-index: -1;
@ -29,9 +24,9 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="block" style="height: 100%;"> <div class="block" style="height: 100%;">
<img src="{{$cover}}" data-speed="-1" class="img-parallax" alt="{{config('settings.name')}} Cover" /> <!--<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="d-none d-lg-flex" style="margin-top: 10%; margin-bottom: 8%;">
@ -52,45 +47,42 @@


</div> </div>





<script> <script>
$('.img-parallax').each(function() { $('.img-parallax').each(function() {
var $image = $(this); var $image = $(this);
var $imageParent = $(this).parent(); var $imageParent = $(this).parent().parent().parent();


function parallaxImg () { function parallaxImg () {
var speed = $image.data('speed'); var speed = $image.data('speed');
var imageY = $imageParent.offset().top; var imageY = $imageParent.offset().top;
var winY = $(this).scrollTop(); var winY = $(this).scrollTop();
var winH = $(this).height(); var winH = $(this).height();
var parentH = $imageParent.innerHeight(); var parentH = $imageParent.innerHeight();
// The next pixel to show on screen // The next pixel to show on screen
var winBottom = winY + winH; var winBottom = winY + winH;


// If block is shown on screen // If block is shown on screen
if (winBottom > imageY && winY < imageY + parentH) { if (winBottom > imageY && winY < imageY + parentH) {
// Number of pixels shown after block appear // Number of pixels shown after block appear
var imgBottom = ((winBottom - imageY) * speed); var imgBottom = ((winBottom - imageY) * speed);
// Max number of pixels until block disappear // Max number of pixels until block disappear
var imgTop = winH + parentH; var imgTop = winH + parentH;
// Percentage between start showing until disappearing // Percentage between start showing until disappearing
var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50)); var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
} }


$image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' }); $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
} }


$(document).on({ $(document).on({
scroll: function () { scroll: function () {
parallaxImg(); parallaxImg();
}, ready: function () { }, ready: function () {
parallaxImg(); parallaxImg();
} }
}); });
}); });
</script> </script>


<div class="card text-bg-dark border-0 d-lg-none" style="border-radius:0; box-shadow:none;"> <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" /> <x-img src="{{$cover}}" style="object-fit:cover; aspect-ratio:3/1;" class="img-fluid shadow-lg" alt="{{config('settings.name')}} Cover" />
@ -169,7 +161,7 @@
@if($leistungen->isNotEmpty()) @if($leistungen->isNotEmpty())
<section> <section>
<div class="container"> <div class="container">
<diw class="row"> <div class="row">


<div class="col-12"> <div class="col-12">
<h2 id="leistungen" class="mb-4">Leistungen</h2> <h2 id="leistungen" class="mb-4">Leistungen</h2>
@ -211,7 +203,7 @@
@endif @endif




</diw> </div>
</div> </div>
</section> </section>