در این آموزش جذاب، یاد میگیرید که چگونه ویدئو در پسزمینه وبسایت خود را با اسکرول صفحه در المنتور کنترل کنید! به عبارت دیگر، با اسکرول کردن به پایین یا بالا، ویدئو به طور خودکار به جلو یا عقب پخش میشود و تجربهای بصری و تعاملی برای کاربران شما ایجاد میکند. این افکت جذاب که با استفاده از کتابخانههای قدرتمند jQuery و GSAP و پلاگین ScrollTrigger پیادهسازی میشود، به شما امکان میدهد تا بدون نیاز به کدنویسی پیچیده، وبسایت خود را پویاتر و چشمنوازتر کنید. با دنبال کردن این آموزش، میتوانید این تکنیک را به راحتی در صفحات ساخته شده با المنتور پیادهسازی کنید و بازدیدکنندگان وبسایتتان را شگفتزده کنید.
کد استفاده شده در آموزش پخش ویدئو با اسکرول در المنتور
<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>
دانلود ویدئو هندوانه استفاده شده در آموزش