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')
@extends('template.'.config('settings.template').'.content.master')
@section('content')


<style>

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



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

<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%;">
@ -52,45 +47,42 @@

</div>




<script>
$('.img-parallax').each(function() {
var $image = $(this);
var $imageParent = $(this).parent();
$('.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;
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));
}
// 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 + '%)' });
}
$image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
}

$(document).on({
scroll: function () {
parallaxImg();
}, ready: function () {
parallaxImg();
}
});
});
</script>
$(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" />
@ -169,7 +161,7 @@
@if($leistungen->isNotEmpty())
<section>
<div class="container">
<diw class="row">
<div class="row">

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


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