Landcraftspirits scripts

<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 27) {
$('body').addClass('sticky');
} else {
$('body').removeClass('sticky');
}
});
</script>
<script>
var autoPlayVideo = document.getElementById("VideoID");
autoPlayVideo.oncanplaythrough = function() {
autoPlayVideo.muted = true;
autoPlayVideo.play();
autoPlayVideo.pause();
autoPlayVideo.play();
}
</script>
<script>
$('.p-detail-inner-header').insertBefore('.p-detail');
$('<p style="text-align:center;"><a href="/where-to-buy/" class="btn btn-primary">Where to buy</a></p>').insertAfter('#description');

</script>

<script>
$('.parallax_wrapper').insertAfter('#header');
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const parallaxContainer = document.querySelector('.parallax_container');
const imageAbove = parallaxContainer.querySelector('.image_above');
const imageBelow = parallaxContainer.querySelector('.image_below');

// Function to set container height based on image below
function setContainerHeight() {
const imageBelowHeight = imageBelow.offsetHeight;
parallaxContainer.style.height = `${imageBelowHeight}px`;
}

// Set container height initially and after images have loaded
setContainerHeight();
window.addEventListener('resize', setContainerHeight);
imageBelow.addEventListener('load', setContainerHeight);

function moveImages(e) {
const mouseX = e.clientX;
const mouseY = e.clientY;
const containerWidth = parallaxContainer.offsetWidth;
const containerHeight = parallaxContainer.offsetHeight;

// Horizontal movement (percentage of container width)
const moveX = (mouseX / containerWidth - 0.5) * 20; // 20 is the sensitivity factor

// Vertical movement (percentage of container height)
const moveY = (mouseY / containerHeight - 0.5) * 0; // 20 is the sensitivity factor

// Apply max movement limits
// Horizontal movement limits (percentage of container width)
const maxMoveXAbove = Math.min(moveX * -0.75, 0.05); // 0.05 is the maximum movement limit (5% of container width)
const maxMoveXBelow = Math.min(moveX * -1, 0.1); // 0.1 is the maximum movement limit (10% of container width)

// Vertical movement limits (percentage of container height)
const maxMoveYAbove = Math.min(moveY * -0.5, 0.5); // 0.5 is the maximum movement limit (50% of container height)
const maxMoveYBelow = Math.min(moveY * -1, 1); // 1 is the maximum movement limit (100% of container height)

// Apply transform to images
imageAbove.style.transform = `translate(${maxMoveXAbove}%, ${maxMoveYAbove}%)`;
imageBelow.style.transform = `translate(${maxMoveXBelow}%, ${maxMoveYBelow}%)`;
}

// Move images on mousemove
parallaxContainer.addEventListener('mousemove', moveImages);

// Smoothly reset images when mouse leaves the container
parallaxContainer.addEventListener('mouseleave', function() {
imageAbove.style.transition = 'transform 0.4s ease-out'; // Apply transition property
imageBelow.style.transition = 'transform 0.4s ease-out'; // Apply transition property
imageAbove.style.transform = 'translate(0%, 0)';
imageBelow.style.transform = 'translate(0%, 0)';

// Reset transition property after the transition completes
setTimeout(() => {
imageAbove.style.transition = '';
imageBelow.style.transition = '';
}, 400); // Adjust time according to transition duration
});
});
</script>