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

parallax with img component

master
Gustavo Luigi 2024-01-11 22:44:44 -03:00
parent c692c036e3
commit 993a93a5f0
1 changed files with 40 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
content/index.blade.php
View File

@ -1,6 +1,6 @@
@inject('type', 'Type') @inject('type', 'Type')
@extends('template.'.config('settings.template').'.content.master') @extends('template.'.config('settings.template').'.content.master')
@section('content') @section('head')
<style> <style>
.block { .block {
width: 100%; width: 100%;
@ -20,15 +20,12 @@
pointer-events: none; pointer-events: none;
} }
</style> </style>

@stop
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> @section('content')

<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%;">
<div class="p-3 rounded container" style="width: 45vw; background: rgba(255, 255, 255, 0.2); <div class="p-3 rounded container" style="width: 45vw; background: rgba(255, 255, 255, 0.2);
border-radius: 16px; border-radius: 16px;
@ -44,46 +41,8 @@
</p> </p>
</div> </div>
</div> </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;"> <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" />
<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);"> <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> </section>


@stop @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 @stop