Skip to content

Commit

Permalink
ideamatrics-roboticArm-video-animation update
Browse files Browse the repository at this point in the history
  • Loading branch information
digvijay164 committed Oct 23, 2024
1 parent 40e1b85 commit c53ff2c
Show file tree
Hide file tree
Showing 202 changed files with 111 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 107 additions & 0 deletions ideamatrics-animation/ideamatrics-video-animation/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-full">
<div class="parent relative top-0 left-0 w-full h-[200vh]">
<div class="canv w-full sticky top-0 left-0 h-screen">
<canvas class="w-full h-screen" id="frame"></canvas>
</div>
</div>
</div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>

<script>
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
const frames = {
currentIndex: 1,
maxIndex: 200,
};
let imageLoaded = 0;
const images = [];

function loadImages(index) {
if (index >= 0 && index <= frames.maxIndex) {
const img = images[index];
// console.log(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const scaleX = canvas.width / img.width;
const scaleY = canvas.height / img.height;
const scale = Math.max(scaleX, scaleY);

const newWidth = img.width * scale;
const newheight = img.height * scale;

const offsetX = (canvas.width - newWidth) / 2;
const offsetY = (canvas.height - newheight) / 2;

context.clearRect(0, 0, canvas.width, canvas.height);
context.imageSmoothingEnabled = true;
context.imageSmoothingQuality = "high";
context.drawImage(img, offsetX, offsetY, newWidth, newheight);
frames.currentIndex = index;
}
}

function preLoadImages() {
for (var i = 0; i <= frames.maxIndex; i++) {
const imageUrl = `imgs/frame_${i.toString().padStart(4, "0")}.jpeg`;
// console.log(imageUrl);
const img = new Image();
img.src = imageUrl;
// console.log(img);
img.onload = () => {
imageLoaded += 1;
if (imageLoaded === frames.maxIndex) {
console.log(`Total images loaded : ${imageLoaded}`);
loadImages(frames.currentIndex);
startAnimation();
}
};
images.push(img);
}
// console.log(images)
}
preLoadImages();

function startAnimation() {
var tl = gsap.timeline({
scrollTrigger: {
trigger: ".parent",
start: "top top",
scrub: 4,
},
});

tl.to(frames, {
currentIndex: frames.maxIndex,
onUpdate: () => {
loadImages(Math.floor(frames.currentIndex));
},
});
}

</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.elementor-heading-title.elementor-size-default {
position: fixed;
background-color: red;
}

0 comments on commit c53ff2c

Please sign in to comment.