938e7018b8
- Convert 34 images (PNG/JPG) to WebP at quality 80 - Total savings: 21.6 MB → 2.8 MB (87% reduction) - Add <picture> elements with WebP source + original fallback - Add loading=lazy to all below-the-fold images - Update lightbox to serve WebP images with error fallback
113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
$(function () {
|
||
// Navbar scroll
|
||
$(window).on("scroll", function () {
|
||
if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
|
||
else $("#navbar").removeClass("scrolled");
|
||
});
|
||
|
||
// Hero animation on load
|
||
setTimeout(function () {
|
||
$("#heroContent").addClass("visible");
|
||
$("#heroBg").addClass("loaded");
|
||
}, 200);
|
||
|
||
// Scroll animations
|
||
function checkVisible() {
|
||
$(".fact, [data-animate]").each(function () {
|
||
var el = $(this);
|
||
var top = el.offset().top;
|
||
var windowBottom = $(window).scrollTop() + $(window).height();
|
||
if (windowBottom > top + 60) {
|
||
el.addClass("visible");
|
||
el.css({ opacity: 1, transform: "translateY(0)" });
|
||
}
|
||
});
|
||
}
|
||
$("[data-animate]").css({
|
||
opacity: 0,
|
||
transform: "translateY(30px)",
|
||
transition: "opacity 0.8s ease, transform 0.8s ease",
|
||
});
|
||
$(window).on("scroll", checkVisible);
|
||
checkVisible();
|
||
|
||
// Floor accordion
|
||
$(".floor-header").on("click", function () {
|
||
var item = $(this).closest(".floor-item");
|
||
var isOpen = item.hasClass("open");
|
||
$(".floor-item").removeClass("open");
|
||
$(".floor-body").slideUp(300);
|
||
if (!isOpen) {
|
||
item.addClass("open");
|
||
item.find(".floor-body").slideDown(300);
|
||
}
|
||
});
|
||
|
||
// Lightbox – gallery grid items
|
||
$(document).on("click", ".grid-item", function () {
|
||
var src = $(this).data("img") || $(this).find("img").attr("src");
|
||
$("#lightboxImg").on("error", function () {
|
||
// WebP fallback: try original format
|
||
var fallback = src.replace(/\.webp$/, src.endsWith('.webp') ? '.png' : '.jpg');
|
||
if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
|
||
});
|
||
$("#lightboxImg").attr("src", src);
|
||
$("#lightbox").addClass("open");
|
||
$("body").css("overflow", "hidden");
|
||
});
|
||
|
||
// Lightbox – floor plan images in Raumaufteilung
|
||
$(document).on("click", ".floor-plan img[data-img]", function () {
|
||
var src = $(this).data("img");
|
||
$("#lightboxImg").on("error", function () {
|
||
var fallback = src.replace(/\.webp$/, '.png');
|
||
if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
|
||
});
|
||
$("#lightboxImg").attr("src", src);
|
||
$("#lightbox").addClass("open");
|
||
$("body").css("overflow", "hidden");
|
||
});
|
||
$("#lightboxClose, #lightbox").on("click", function (e) {
|
||
if (e.target === this) {
|
||
$("#lightbox").removeClass("open");
|
||
$("body").css("overflow", "");
|
||
}
|
||
});
|
||
$(document).on("keydown", function (e) {
|
||
if (e.key === "Escape") {
|
||
$("#lightbox").removeClass("open");
|
||
$("body").css("overflow", "");
|
||
}
|
||
});
|
||
|
||
// Form submit – opens email client with pre-filled mailto: link
|
||
$("#contactForm").on("submit", function (e) {
|
||
e.preventDefault();
|
||
|
||
var fname = $("#fname").val().trim();
|
||
var lname = $("#lname").val().trim();
|
||
var email = $("#email").val().trim();
|
||
var phone = $("#phone").val().trim();
|
||
var interest = $("#interest").val();
|
||
var message = $("#message").val().trim();
|
||
|
||
var subject = "Kontaktanfrage: " + interest;
|
||
var body = "Von: " + fname + " " + lname + "\n";
|
||
body += "E-Mail: " + email + "\n";
|
||
if (phone) body += "Telefon: " + phone + "\n";
|
||
body += "Anliegen: " + interest + "\n\n";
|
||
body += message;
|
||
|
||
var mailto =
|
||
"mailto:mki@kies-media.de" +
|
||
"?subject=" + encodeURIComponent(subject) +
|
||
"&body=" + encodeURIComponent(body);
|
||
|
||
window.location.href = mailto;
|
||
|
||
// Show success message
|
||
$("#contactForm").hide();
|
||
$("#formSuccess").fadeIn(400);
|
||
});
|
||
});
|