Skip to content

M
makura-2025
Commit 0f645c4f by jhukal9@gmail.com
Options

minor change

parent 3c64254e
Showing with 82 additions and 66 deletions
assets/img/angle-right.svg
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L6 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 11L6 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.99998 0C4.82076 0 4.64156 0.0720282 4.50493 0.215782L0.205142 4.74168C-0.0683806 5.02959 -0.0683806 5.49637 0.205142 5.78416C0.478554 6.07195 0.921935 6.07195 1.19548 5.78416L4.99998 1.77939L8.80451 5.78402C9.07803 6.07181 9.52137 6.07181 9.79476 5.78402C10.0684 5.49623 10.0684 5.02945 9.79476 4.74154L5.49504 0.215642C5.35834 0.0718646 5.17914 0 4.99998 0Z" fill="#005AFF"/>
</svg>
assets/js/script.js
(function ($) {
gsap.registerPlugin(ScrollTrigger);
/** INTERSECTION OBSERVER FOR SLIDE UP ANIMATION STARTS HERE */
$(function () {
const observer = new IntersectionObserver(
......@@ -28,7 +27,7 @@
let $card = $(this);
let rectTop = $card[0].getBoundingClientRect().top;
if (rectTop < $(window).height() * 0.9) {
if (rectTop < $(window).height() * 0.95) {
$card.addClass("visible");
}
});
......@@ -105,7 +104,83 @@
/** MAKURA LATEST FAQ EXPAND COLLAPSE ENDS HERE */
/** HORIZONTAL SCROLL SLIDER START HERE */
$(function () {});
$(function () {
gsap.registerPlugin(ScrollTrigger);
var gallery = $(".template-gallery");
if (gallery) {
// const galleryWrapper = gsap.utils.toArray(".tg-items");
const pinWrap = $(".tg-items");
let pinWrapWidth;
let horizontalScrollLength;
function refresh() {
pinWrapWidth = pinWrap[0].scrollWidth + 540;
horizontalScrollLength = pinWrapWidth - window.innerWidth;
}
// Calculate initial dimensions
refresh();
// Pinning and horizontal scrolling
gsap.to(pinWrap, {
scrollTrigger: {
scrub: true,
trigger: gallery,
pin: gallery,
start: "center center",
end: () => `+=${pinWrapWidth}`,
invalidateOnRefresh: true,
},
x: () => -horizontalScrollLength,
ease: "none",
});
ScrollTrigger.addEventListener("refreshInit", refresh);
console.log({
pinWrap,
pinWrapWidth,
horizontalScrollLength,
});
}
// Horizontal Scroll Galleries
// if (document.getElementById("portfolio")) {
// const horizontalSections = gsap.utils.toArray(".horiz-gallery-wrapper");
// horizontalSections.forEach(function (sec, i) {
// const pinWrap = sec.querySelector(".horiz-gallery-strip");
// let pinWrapWidth;
// let horizontalScrollLength;
// function refresh() {
// pinWrapWidth = pinWrap.scrollWidth;
// horizontalScrollLength = pinWrapWidth - window.innerWidth;
// }
// // Calculate initial dimensions
// refresh();
// // Pinning and horizontal scrolling
// gsap.to(pinWrap, {
// scrollTrigger: {
// scrub: true,
// trigger: sec,
// pin: sec,
// start: "center center",
// end: () => `+=${pinWrapWidth}`,
// invalidateOnRefresh: true,
// },
// x: () => -horizontalScrollLength,
// ease: "none",
// });
// // Refresh dimensions on window resize
// ScrollTrigger.addEventListener("refreshInit", refresh);
// });
// }
});
/** HORIZONTAL SCROLL SLIDER ENDS HERE */
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER START HERE */
......
footer.php
......@@ -246,65 +246,7 @@
</div>
</div>
<div class="download-popup">
<div class="dp-content-box">
<div class="top-title section-title d-flex justify-content-between align-items-start">
<div class="title">
<h2>Get Your Free SEO Audit Delivered to Your Inbox</h2>
<p class="d-none d-md-block">Fill out the form, and we'll send you a detailed SEO audit directly to your email,
helping you improve your
website's performance.
</p>
</div>
<button type="button" class="close-download-popup">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/x-mark.svg" alt="">
</button>
</div>
<div class="form-content-box">
<div class="row">
<div class="col-sm-6">
<div class="input-field">
<label>Full Name</label>
<input type="text" placeholder="Enter your Full Name ">
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<label>Phone Number (Optional)</label>
<input type="text" placeholder="Enter your Phone Number">
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<label>Enter your Email Address</label>
<input type="text" placeholder="Enter your Email Address ">
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<label>Company Name</label>
<input type="text" placeholder="Enter the Name of your Company">
</div>
</div>
<div class="col">
<div class="input-field">
<label>Message (optional)</label>
<textarea rows="3" placeholder="Enter the message you want us to send"></textarea>
</div>
</div>
</div>
<div class="submit-field ">
<input type="submit" value="Submit">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M-6.11959e-07 9L12.17 9L6.58 14.59L8 16L16 8L8 6.99382e-07L6.59 1.41L12.17 7L-7.86805e-07 7L-6.11959e-07 9Z"
fill="white" />
</svg>
</div>
</div>
</div>
</div>
<a href="#" class="custom-overlay"></a>
<?php wp_footer() ?>
......
template-parts/industry/template-layout-gallery.php
<section class="template-gallery makura-new mb-120">
<div class="container">
<div class="section-title">
<div class="section-title slide-up-delay">
<h3>Layout of this Template</h3>
<p>Optimize your website effortlessly with powerful insights and analytics.</p>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment