<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 PercentTutorial.
* For more information, visit my Tutorial Youtube channel: https://www.youtube.com/@PercentTutorial
*/
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>
Percent-Tutorial-Position-CSS.zip
57.3 KB
Learn CSS Position in 5 Min - Template File
Percent-Tutorial-Animation-CSS.zip
1.5 MB
Create Fancy Scrolling Animations Used on Apple Forgot Password - Template File
Percent-Tutorial-Popup-HTML-CSS.zip
1.5 MB
Create a Popup With Just 2 LINES Of Code (No Libraries Needed) - Template File
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>PercentTutorial</title>
</head>
<body>
<style>
h1 {
font-family: tahoma;
color: red;
}
</style>
<main>
<h1>Text To Speech</h1>
<input type="text" id="input">
<button onclick="speak()">Speak</button>
</main>
<script>
function speak() {
const text = document.getElementById("input").value;
const utterance = new SpeechSynthesisUtterance(text);
const voices = speechSynthesis.getVoices();
utterance.voice = voices[0];
speechSynthesis.speak(utterance);
}
</script>
</body>
</html>
Percent-Tutorial-Download-Button-Animation.zip
5.1 KB
Download Button Animation - Template File