HTML Code For Adding Line In Footer from below =
<hr />
Css Code for not having underline in text when having a link=
a {
text-decoration: none !important;
}
-----------------------------------------------------------------------------------------
For direct clickable calls - tel:+919833049999
For direct WhatsApp - https://wa.me/918888016464
For direct clickable Emails - mailto:example@email.com
-----------------------------------------------------------------------------------------
Right / Left Floating Images CSS code:
selector {
position: relative;
animation: floatLeftRight 6s ease-in-out infinite;
display: inline-block;
will-change: transform;
}
@keyframes floatLeftRight {
0% {
transform: translateX(0);
}
50% {
transform: translateX(15px);
}
100% {
transform: translateX(0);
}
}
-----------------------------------------------------------------------------------------
Up/ Down Floating Images CSS code:
selector {
position: relative;
animation: floatUpDown 6s ease-in-out infinite;
display: inline-block;
will-change: transform;
}
@keyframes floatUpDown {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0);
}
}
-----------------------------------------------------------------------------------------
Down / Up Floating Images CSS code:
selector {
position: relative;
animation: floatDownUp 6s ease-in-out infinite;
display: inline-block;
will-change: transform;
}
@keyframes floatDownUp {
0% {
transform: translateY(0);
}
50% {
transform: translateY(15px); /* Moves down instead of up */
}
100% {
transform: translateY(0);
}
}
-----------------------------------------------------------------------------------------
CSS code for showing image on Mouse hover (add image below header and add CSS classes in all heading as text and in all images as img-one. Then add below code on 1st heading):
/* Default (Laptop / Desktop) */
.img-one {
display: none;
position: absolute;
transform: translateX(125%) translateY(-50%);
top: 50%;
right: 80%;
z-index: 10;
width: 520px; /* big image for laptop */
max-width: none;
}
.text:hover ~ .img-one {
display: block;
position: absolute;
z-index: 1;
cursor: pointer;
transition: all 0.5s ease-in;
}
.img-one:hover {
transition: all 0.5s ease;
}
.text:hover {
cursor: pointer;
transition: all 0.5s ease-in;
}
.text:hover ~ .text-hover {
color: #FFFFFF !important;
}
/* Mobile Fix */
@media (max-width: 768px) {
.img-one {
right: auto; /* reset right */
left: 50%; /* center horizontally */
transform: translateX(-50%) translateY(-50%);
top: 50%;
width: 250px; /* smaller image */
}
}
-----------------------------------------------------------------------------------------
CSS Code for Image Video sequence on scroll:
<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<script>
$( document ).ready(function() {
console.clear();
$('video').addClass('video-background');
const video = document.querySelector(".video-background");
let src = video.currentSrc || video.src;
console.log(video, src);
/* Make sure the video is 'activated' on iOS */
function once(el, event, fn, opts) {
var onceFn = function (e) {
el.removeEventListener(event, onceFn);
fn.apply(this, arguments);
};
el.addEventListener(event, onceFn, opts);
return onceFn;
}
once(document.documentElement, "touchstart", function (e) {
video.play();
video.pause();
});
gsap.registerPlugin(ScrollTrigger);
let tl = gsap.timeline({
defaults: { duration: 1 },
scrollTrigger: {
trigger: "#container",
start: "top top",
end: "bottom bottom",
scrub: true
}
});
once(video, "loadedmetadata", () => {
tl.fromTo(
video,
{
currentTime: 0
},
{
currentTime: video.duration || 1
}
);
});
/*!
* © This code was written by Nicolai Palmkvist.
* For more information, visit my Elementor Youtube channel: https://www.youtube.com/@nicopalmkvist
*/
setTimeout(function () {
if (window["fetch"]) {
fetch(src)
.then((response) => response.blob())
.then((response) => {
var blobURL = URL.createObjectURL(response);
var t = video.currentTime;
once(document.documentElement, "touchstart", function (e) {
video.play();
video.pause();
});
video.setAttribute("src", blobURL);
video.currentTime = t + 0.01;
});
}
}, 1000);
});
</script>
-----------------------------------------------------------------------------------------
Smoothscroll Code - (Add code in HTML widget at the bottom of all pages on website)
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>
<script>
const lenis = new Lenis({
duration: 3.2, // Scroll duration
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Easing function for smooth transitions
direction: 'vertical', // Scroll direction: vertical or horizontal
gestureDirection: 'vertical', // Gesture direction: vertical, horizontal, or both
smooth: true, // Enable smooth scrolling
mouseMultiplier: 5, // Mouse scroll speed multiplier
smoothTouch: false, // Disable smooth scrolling for touch devices
touchMultiplier: 2, // Touch scroll speed multiplier
infinite: false, // Disable infinite scroll
});
// Optional: Listen to scroll events
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
console.log({ scroll, limit, velocity, direction, progress });
});
// Animation frame loop function
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>
Also add this if smooth scroll is laggy
<style>
html {
scroll-behavior: auto !important; /* Disables default smooth scrolling */
}
</style>