millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

refactor: Change blur image to be implemented in CSS

Browse source
This commit is contained in:
Thomas A. Christensen II 2024-11-07 08:38:34 -06:00
parent ca49a6a315
commit 1a6519fafb
Signed by: millironx
GPG key ID: B7044A3432851F64
3 changed files with 2 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/scroll-effect.js
View file

@ -1,5 +1,5 @@
$(window).on("scroll", function (e) { $(window).on("scroll", function (e) {
oVal = $(window).scrollTop() / 170; oVal = $(window).scrollTop() / 75;
$(".blur").css("opacity", oVal); $(".blurred-container .img-src").css("filter", "blur(" + oVal + "px)");
}); });
$("#motto").fitText(); $("#motto").fitText();

4
assets/styles/mix-twbs.scss
View file

@ -48,10 +48,6 @@ $peek-height: 25rem;
background-position: center center; background-position: center center;
} }
.blur {
opacity: 0;
}
.list-main { .list-main {
position: relative; position: relative;
background-color: #fff; background-color: #fff;

5
layouts/partials/scrolling-image-header.html
View file

@ -7,14 +7,9 @@
</div> </div>
{{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }} {{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
{{ $mainimg := resources.Get $imgsrc }} {{ $mainimg := resources.Get $imgsrc }}
{{ $blurimg := $mainimg.Filter (images.GaussianBlur 100) }}
<div <div
class="img-src" class="img-src"
style="background-image: url('{{ $mainimg.RelPermalink }}');" style="background-image: url('{{ $mainimg.RelPermalink }}');"
></div> ></div>
<div
class="img-src blur"
style="background-image: url('{{ $blurimg.RelPermalink }}');"
></div>
</div> </div>
<br /> <br />