I'm trying to place 2 canvases ontop of eachother, whilst at the same time having them centered like this, but I suspect that one canvas is out of frame.
CSS:
body { background-color: #000000; text-align: center; margin: 0px; padding: 0px; width:100%; height:100%; }
* { margin:0; padding:0; }
canvas { display:block; padding: 0; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
cnv1 { z-index: 2; }
cnv2 { z-index: 1; }
HTML:
<canvas id="cnv1">U no do HTML5, fix.</canvas>
<canvas id="cnv2">U no do HTML5, fix.</canvas>
Javascript:
var cnv = document.getElementById('cnv1')
var ctx = cnv.getContext('2d');
var cnv2 = document.getElementById('cnv2')
var ctx2 = cnv2.getContext('2d');
If I now try to write things like
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText('images loaded and ready to go', 180, 45);
then that won't show up. but writing to ctx2 will.
OK, so turns out it was just me being tired. I just forgot to add # to the cnv1 & cnv2 parts of the css:
#cnv1 { z-index: 2; }
#cnv2 { z-index: 1; }
It works as intended now. Thank you all for your time.
Is it something like this you want? The back layer and front layer now overlap.
Only thing I had to do for it was to reverse the order in which they appear in the html.
I have no idea why the z-index didn't work/wasn't obeyed. But reversing their order of appearance worked good.
var cnv = document.getElementById('cnv1')
var ctx = cnv.getContext('2d');
var cnv2 = document.getElementById('cnv2')
var ctx2 = cnv2.getContext('2d');
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText('images loaded and ready to go', 25, 95);
ctx2.save();
//ctx2.globalAlpha = 0.5;
ctx2.clearRect(0,0,ctx2.width,ctx2.height);
ctx2.fillStyle="#eeeeee";
ctx2.fillRect(0,0,50,200);
ctx2.fillRect(50,50,50,150);
ctx2.fillRect(100,0,25,200);
ctx2.fillRect(150,50,50,150);
ctx2.fillStyle="#202020";
ctx2.fillText('Gotham City.', 20, 128);
body {
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
width:100%;
height:100%; }
* {
margin:0;
padding:0;
}
canvas {
display:block;
padding: 0;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:transparent;
}
#cnv1 {
z-index: 2;
}
#cnv2 {
z-index: 1;
}
<canvas id="cnv2">U no do HTML5, fix.</canvas>
<canvas id="cnv1">U no do HTML5, fix.</canvas>
Related
I was trying to make a quality-of-life script for a game, until i noticed that the buttons i had inserted didnt work. after a bit of searching i had found out that the website had 2 body tags. and that my button was being placed in the second one, rather than the first. is there a way to put an element in the first tag?
I really couldn't think of any possible solution to this.
this is my code so far:
document.onkeydown = function (e) {
console.log(e);
if ( e.key === "p") {
asd();
}
};
var element = document.createElement('style');
element.innerText = style;
document.head.appendChild(element);
const sda = document.createElement("div");
sda.class = "dropdown";
const fasd = document.createElement("button");
fasd.class = "dropbtn";
sda.appendChild(fasd);
const sdf = document.createElement("div");
sdf.id = "myDropdown";
sdf.class = "dropdown-content";
const a1 = document.createElement("a");
const a2 = document.createElement("a");
fasd.appendChild(sdf);
sdf.appendChild(a1);
sdf.appendChild(a2);
const gfd = document.getElementsByTagName("BODY")[0];
gfd.appendChild(sda);
const pol = document.createTextNode("Taking Over");
a1.appendChild(pol);
function asd() {
var audio1 = new Audio('https://cdn.discordapp.com/attachments/967213871267971072/1027416621318414406/8mb.video-Vf9-wfenD0dA.m4a');
audio1.play();
};
/*para.onclick = asd();
document.body.appendChild(para); */
var style = `
#pas {
position: absolute;
top: 0;
left: 0;
font-size: 25px;
color: #ff0000;
font-family: Roboto;
}
#canvas {
background-image: linear-gradient( 358.4deg, rgba(249,151,119,1) -2.1%, rgba(98,58,162,1) 90% );
}
.startMenu {
color: #000;
}
.startMenuHolder changelogHolder {
opacity: 0;
}
.startMenuHolder linkHolder {
opacity: 0;
}
#html {
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 230px;
width: 230px;
align-items: flex-start;
display: flex;
flex-direction: column;
}
#canvas {
position: absolute;
}
#holdingmusicstuff {
position: absolute;
top: 0;
left: 0;
width: 320px;
height: 320px;
}
.musics {
position: relative;
top: 0;
left: 0;
width: 20px;
height: 35px;
padding: 0;
margin: 0;
}
.dropdown {
position: absolute;
top: 0;
left: 0;
}
`;
var canves = document.getElementsByTagName("canvas");
document.body.appendChild(canves)
canves.id = "canves";
Any help or advice is appreciated!
I think this works:
let firstBodyTag = document.getElementsByTagName("BODY")[0];
I used to just use the 'document.body', I was unaware that the html have two body tags... Make sure you are not creating two body tags by accident. Either way, the code above should create the pointer you look for.
I have a customized seekbar for my HTML5 video player. But I need to highlight some predefined portions of the seekbar, say seconds 2-5 and 7-8. How can I do that?
Basically, I need it to be something like this:
Here is my simple code so far:
<!DOCTYPE html>
<html>
<head>
<style>
.body{
background-color:black;
}
.video-player {
position: relative;
width: 66%;
height: 66%;
}
.video-player img {
width: 100%;
height: 100%;
}
.video-player video {
position: fixed;
top: 0;
left: 0;
min-width: 66%;
min-height: 66%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
.video-player .controls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-player .controls .progress-bar {
position: absolute;
margin-left: 28%;
bottom: 10%;
color: orange;
font-size: 12px;
width: 40%;
height: 8%;
border: none;
background: #434343;
border-radius: 9px;
vertical-align: middle;
cursor: pointer;
}
.video-player .controls progress::-moz-progress-bar {
color: orange;
background: #434343;
}
.video-player .controls progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.video-player .controls progress[value]::-webkit-progress-value {
background-color: orange;
}
video#backgroundvid {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="video-player">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<img src="top2.png" style="object-fit:cover" alt="" id="backgroundvid">
<div class="controls">
<progress class="progress-bar" style="object-fit:cover; z-index=10000" min="0" max="100" value="0">0% played</progress>
</div>
</div>
<script>
const player = document.querySelector('.video-player');
const video = player.querySelector('video');
const progressBar = player.querySelector('.progress-bar');
video.addEventListener('timeupdate', updateProgressBar, false);
progressBar.addEventListener('click', seek);
function updateProgressBar() {
var percentage = Math.floor((100 / video.duration) * video.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + '% played';
}
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
video.currentTime = percent * video.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
</script>
</body>
</html>
You can use a canvas that you will superimpose on top of your progress-bar,
Then you will have just to draw the markers in this canvas.
Just making slight changes in the html (adding an id to the progress-bar id="progress-bar"):
<progress id="progress-bar" class="progress-bar" style="object-fit:cover; z-index=10000" min="0" max="100" value="0">0% played</progress>
Adding the CSS to style place the canvas (same CSS property than your progress-bar)
#markers{
position: absolute;
bottom: 10%;
margin-left: 28%;
border-radius: 9px;
pointer-events: none;
}
Note the pointer-events: none; If you don't put it, you can't have access to the control of your progress-bar.
And so, the javascript to create & insert the canvas, and then place the markers on it.
// We need the metadata 'duration', so we wrap the code in an event listener to be sure we execute our code when the metadata is loaded
video.addEventListener('loadedmetadata', function () {
// Get the dimension of the progress-bar
const progressbar = document.getElementById('progress-bar');
const widthProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("width");
const heightProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("height");
// Create the canvas
const canvas = document.createElement('canvas');
const w = canvas.width = parseFloat(widthProgressBar);
const h = canvas.height = parseFloat(heightProgressBar);
canvas.id = 'markers';
const progressBar = document.getElementById("progress-bar");
// Insert the canvas in the DOM
progressBar.parentNode.insertBefore(canvas, progressBar.nextSibling)
// Define the context
const ctx = canvas.getContext('2d');
// Calcul how many px will represent 1s
const videoDuration = video.duration;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
// Define the markers
const markers = {
'marker1': [2, 5],
'marker2': [7, 8]
};
// Function to draw the markers
function setMarkers(markers, ratioPxSec, height) {
for (marker in markers) {
let x = markers[marker][0] * ratioPxSec; // Start x position of the marker
let y = 0; // Start y position of the marker
let w = (markers[marker][1] - markers[marker][0]) * ratioPxSec; // Width of the marker
let h = parseFloat(height); // Height of the marker
ctx.fillStyle = "#7f3302"; // Set the color of the marker
ctx.fillRect(x, y, w, h); // Draw a rectangle
}
}
setMarkers(markers, ratioPxBySeconds, h); // Call the function
});
const player = document.querySelector('.video-player');
const video = player.querySelector('video');
const progressBar = player.querySelector('.progress-bar');
video.addEventListener('timeupdate', updateProgressBar, false);
progressBar.addEventListener('click', seek);
function updateProgressBar() {
var percentage = Math.floor((100 / video.duration) * video.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + '% played';
}
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
video.currentTime = percent * video.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
// We need the metadata 'duration', so we wrap the code in an event listener to be sure we execute our code when the metadata is loaded
video.addEventListener('loadedmetadata', function() {
// Get the dimension of the progress-bar
const progressbar = document.getElementById('progress-bar');
const widthProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("width");
const heightProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("height");
// Create the canvas
const canvas = document.createElement('canvas');
const w = canvas.width = parseFloat(widthProgressBar);
const h = canvas.height = parseFloat(heightProgressBar);
canvas.id = 'markers';
const progressBar = document.getElementById("progress-bar");
// Insert the canvas in the DOM
progressBar.parentNode.insertBefore(canvas, progressBar.nextSibling)
// Define the context
const ctx = canvas.getContext('2d');
// Calcul how many px will represent 1s
const videoDuration = video.duration;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
// Define the markers
const markers = {
'marker1': [2, 5],
'marker2': [7, 8]
};
// Function to draw the markers
function setMarkers(markers, ratioPxSec, height) {
for (marker in markers) {
let x = markers[marker][0] * ratioPxSec; // Start x position of the marker
let y = 0; // Start y position of the marker
let w = (markers[marker][1] - markers[marker][0]) * ratioPxSec; // Width of the marker
let h = parseFloat(height); // Height of the marker
ctx.fillStyle = "rgb(127, 51, 2, 0.9)"; // Set the color of the marker
ctx.fillRect(x, y, w, h); // Draw a rectangle
}
}
setMarkers(markers, ratioPxBySeconds, h); // Call the function
// Calculate the new dimensions & redraw
function resize(){
const progressBar = document.getElementById('progress-bar');
const w = canvas.width = progressBar.clientWidth;
const h = canvas.height = progressBar.clientHeight;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
setMarkers(markers, ratioPxBySeconds, h);
}
// On page resize, call the resize() function
window.addEventListener("resize", resize, false);
});
body {
background-color: black;
}
.video-player {
position: relative;
width: 66%;
height: 66%;
}
.video-player img {
width: 100%;
height: 100%;
}
.video-player video {
position: fixed;
top: 0;
left: 0;
min-width: 66%;
min-height: 66%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
.video-player .controls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-player .controls .progress-bar {
position: absolute;
margin-left: 28%;
bottom: 10%;
color: orange;
font-size: 12px;
width: 40%;
height: 8%;
border: none;
background: #434343;
border-radius: 9px;
vertical-align: middle;
cursor: pointer;
}
#markers {
position: absolute;
bottom: 10%;
margin-left: 28%;
border-radius: 9px;
pointer-events: none;
}
.video-player .controls progress::-moz-progress-bar {
color: orange;
background: #434343;
}
.video-player .controls progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.video-player .controls progress[value]::-webkit-progress-value {
background-color: orange;
}
video#backgroundvid {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
<div class="video-player">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="" id="backgroundvid">
<div class="controls">
<progress id="progress-bar" class="progress-bar" style="object-fit:cover; z-index=10000" min="0" max="100" value="0">0% played</progress>
</div>
</div>
Edit:
Added a resize() function to update the markers when the screen resize
(typically, it will happen when you put the video in full screen)
// Calculate the new dimensions & redraw
function resize(){
const progressBar = document.getElementById('progress-bar');
const w = canvas.width = progressBar.clientWidth;
const h = canvas.height = progressBar.clientHeight;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
setMarkers(markers, ratioPxBySeconds, h);
}
// On page resize, call the resize() function
window.addEventListener("resize", resize, false);
I'm using a small script to follow the cursor with a div element.
This script makes the element strictly follow the cursor.
What I'm trying to do is to add some kind of duration to the process of "following" the cursor. I tried CSS transitions but the animation always ended up breaking. Can somebody please help me with this?
Let's say mouse is somewhere, and then it changes position by around 100px. I want to specify the duration like if i was using CSS... But the thing is that I can not use any transitions but only some javascript magic instead...
document.body.addEventListener("mousemove", function(e) {
var curX = e.clientX;
var curY = e.clientY;
document.querySelector('mouse').style.left = curX - 10 + 'px';
document.querySelector('mouse').style.top = curY - 10 + 'px';
});
body {
background: #333;
height: 500px;
width: 500px;
}
mouse {
display: block;
position: fixed;
height: 20px;
width: 20px;
background: #fff;
border-radius: 50%;
}
<body>
<mouse></mouse>
</body>
I was wondering how to add a transition without using the CSS but I'm not the most advanced when it comes to JavaScript.
[edit] : I don't wanna use window.setTimeout.
[edit 2] : I wanted to use transition: 0.1s; but as I said it broke the effect when user moved the mouse too quickly.
There's a whole bunch of ways to do this, as you can see in the other answers, each with its own "feel". I'm just adding one more, where the dot approaches the cursor by a percentage of the remaining distance.
let curX = 0, curY = 0, elemX = null, elemY = null;
document.body.addEventListener("mousemove", function(e) {
curX = e.clientX;
curY = e.clientY;
if (elemX === null) [ elemX, elemY ] = [ curX, curY ];
});
let amt = 0.1; // higher amount = faster tracking = quicker transition
let elem = document.querySelector('mouse');
let frame = () => {
requestAnimationFrame(frame);
elemX = (elemX * (1 - amt)) + (curX * amt);
elemY = (elemY * (1 - amt)) + (curY * amt);
elem.style.left = `${elemX}px`;
elem.style.top = `${elemY}px`;
};
frame();
body {
position: absolute;
background: #333;
left: 0; top: 0; margin: 0; padding: 0;
height: 100%;
width: 100%;
}
mouse {
display: block;
position: absolute;
height: 20px; margin-left: -10px;
width: 20px; margin-top: -10px;
background: #fff;
border-radius: 50%;
}
<body>
<mouse></mouse>
</body>
You can use setTimeout() function, to introduce a delay:
document.body.addEventListener("mousemove", function(e) {
var delay=250 //Setting the delay to quarter of a second
setTimeout(()=>{
var curX = e.clientX;
var curY = e.clientY;
document.querySelector('mouse').style.left = curX - 10 + 'px';
document.querySelector('mouse').style.top = curY - 10 + 'px';
},delay)
});
body {
background: #333;
height: 500px;
width: 500px;
}
mouse {
display: block;
position: fixed;
height: 20px;
width: 20px;
background: #fff;
border-radius: 50%;
}
<body>
<mouse></mouse>
</body>
Or, to avoid trailing, use an interval and move the cursor to the correct direction (change ratio to set the speed ratio):
var curX,curY
document.body.addEventListener("mousemove", function(e) {
curX = e.clientX;
curY = e.clientY;
});
setInterval(()=>{
var ratio=5
var x=document.querySelector('mouse').offsetLeft+10
var y=document.querySelector('mouse').offsetTop+10
document.querySelector('mouse').style.left=((curX-x)/ratio)+x-10+"px"
document.querySelector('mouse').style.top=((curY-y)/ratio)+y-10+"px"
},16)
body {
background: #333;
height: 500px;
width: 500px;
}
mouse {
display: block;
position: fixed;
height: 20px;
width: 20px;
background: #fff;
border-radius: 50%;
}
<body>
<mouse></mouse>
</body>
I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }
.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}
<div class="circle"></div>
I have seen many websites recently that are incorporating the scrolling from section to section like fullpage.js and I am trying to achieve this on only one section of a page, like this page wedding party app.Does anyone know how I could achieve this? I've had no luck in finding something that can help me recreate the snapping section with the iPhone.... I will be making my own animations.
this is very easy
html
<div id="skrollr-wrapper">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
css
body {
padding: 0;
margin: 0;
background: #fff fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat;
}
#skrollr-wrapper {
/* make sure the boxes stay in place while you
scroll by wrapping them in this fixed div: */
width:100%;
height:100%;
position:fixed;
overflow: hidden;
}
#skrollr-wrapper div {
position: absolute;
overflow: hidden;
text-align: center;
}
#box1 {
background: blue;
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
}
#box2 {
background: red;
height: 100px;
width: 100%;
margin-top: 50px;
}
jquery
// setSkrollr function extracted from https://www.pingdom.com/2013/
var setSkrollr = function($el, data) {
for (var i = 0, l = data.length; i < l; i++) {
var d = data[i],
px = d[0];
css = d[1];
$el.attr('data-' + px, css);
}
}
jQuery(function($) {
setSkrollr($('#box1'), [[0, 'width:100%'], [1500, 'width:0%']]);
setSkrollr($('#box2'), [[0, 'transform:translateX(-100%)'], [750, 'transform:translateX(100%)'], [1500, 'transform:translateX(-100%)']]);
skrollr.init({
smoothScrolling: false
});
});