3D Video Maker
About this app
Create stunning 3D videos with customizable options, animations, and interactive elements. A fun and engaging 3D video making platform.
3D Video Maker 3D Video Maker Previous Scene Next Scene
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>3D Video Maker</title>
<meta name="description" content="Create stunning 3D videos with customizable options, animations, and interactive elements. A fun and engaging 3D video making platform.">
<meta name="keywords" content="3D video maker, video creation, animation, interactive videos, online tools">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let activeScene = 1;
const scenes = [
{color: "#ffcc00", message: "Welcome to 3D Video Maker!"},
{color: "#ff6699", message: "You can create amazing 3D videos!"},
{color: "#66ccff", message: "Add animations and effects!"},
{color: "#66ff66", message: "Share your creations with others!"}
];
function switchScene(direction) {
activeScene += direction;
if (activeScene < 1) activeScene = scenes.length;
if (activeScene > scenes.length) activeScene = 1;
updateScene();
}
function updateScene() {
const scene = scenes[activeScene - 1];
$("#scene").css("background-color", scene.color);
$("#scene-message").text(scene.message);
$("#scene-number").text(`Scene: ${activeScene}`);
}
$(document).ready(function() {
updateScene();
$("#next-btn").on("click", function() {
switchScene(1);
});
$("#prev-btn").on("click", function() {
switchScene(-1);
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #ffcc00, #ff6699);
font-family: Arial, sans-serif;
color: white;
}
#main-container {
text-align: center;
margin-top: 50px;
}
#scene {
border: 3px dashed white;
border-radius: 15px;
padding: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: background-color 0.5s ease;
}
.btn {
margin: 5px;
background-color: rgba(255, 255, 255, 0.3);
border: none;
color: white;
transition: background-color 0.3s;
}
.btn:hover {
background-color: rgba(255, 255, 255, 0.6);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>3D Video Maker</h1>
<div id="scene" class="scene">
<h2 id="scene-number"></h2>
<p id="scene-message"></p>
</div>
<button id="prev-btn" class="btn">Previous Scene</button>
<button id="next-btn" class="btn">Next Scene</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!