I cannot actually do the animation thing. I tried to call the function but it is not working. As a self-learner, i couldn't ask anyone. So, yes. Pretty noob but couldn't find the answer anywhere on web.
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="main()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function main() {
var elem = document.getElementById("animate");
var posTop = elem.style.top;
var posLeft = elem.style.left;
function realAnimate(posTop,posLeft){
if (posTop<350){
for (let index = 0; index < posTop; index++) {
return posTop;
posTop == posLeft;
return posLeft;
realAnimate(posTop,posLeft);
}
}
else{
for (let index = 0; index > posTop; index--) {
return posTop;
posTop == posLeft;
return posLeft;
realAnimate(posTop,posLeft);
}
}
}
}
window.setInterval(main,0)
</script>
</body>
</html>
I am expecting to animate to and from the edges, that the cube has to travel.
just give a inline top and left style to the element so that the DOM will recognize any values. Because if you dont . The value for your element will be undefined
Try this:
function main(){
$('.animate').toggleClass('move');
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
.animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
top:0;
left:0;
transition:all 5s linear;
}
.move{
top:350px;
left:350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button onclick="main()">Click Me</button></p>
<div id ="container">
<div class ="animate"></div>
</div>
Related
I am creating a little game that should be like a 2d version of "guitar hero" (if you don't know what "guitar hero" is don't worry, it was just to give context). I have a red square creator function called squareCreator that adds each new square created a CSS class of .newMostLeftNote. Afterward, I want each one of those squares to fall down (like gravity) using the function fallingMostLeftNote. The problem is that the margin-top that function adds to the square generated by the squareCreator adds to every single square at the same time (even before the square is created), so a square could be created when the .newMostLeftNote CSS class has a margin-top of 700 and it appears way at the bottom.
How can I make it so that every square that falls, but starts falling after they appear?
Notice that in this image, every margin-top CSS property for every new generated square is exactly the same.
var mostLeftNoteMarginTop = 0;
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
$(".newMostLeftNote").css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
proc = setInterval(fallingMostLeftNote, 5);
.newMostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 400px;
position: absolute;
}
.mostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 300px;
position: absolute;
}
.middleNote {
height: 100px;
width: 100px;
background-color: blue;
margin-left: 600px;
position: absolute;
}
.mostRightNote {
height: 100px;
width: 100px;
background-color: green;
margin-left: 900px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Score: 0</h1>
<div class="middleNote"></div>
<div class="mostLeftNote"></div>
<div class="mostRightNote"></div>
<div class="scoreLineTop"></div>
<div class="scoreLineButtom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="main.js" charset="utf-8"></script>
</body>
Update
var squareQuantity = [];
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
squareQuantity.push(this.newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
squareQuantity[2].css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
Instead of using javascript to update your margin-top, you could use CSS animations. Each new square will animate independently.
Here's an example for your use case:
function addSquare() {
var squaresElement = document.getElementById("squares");
var squareElement = document.createElement("div");
squareElement.className = "square";
squaresElement.append(squareElement);
}
#squares {
display: flex;
}
.square {
height: 100px;
width: 100px;
margin-right: 10px;
background-color: red;
animation-name: fall;
animation-duration: 4s;
animation-timing-function: linear;
}
/* The animation code */
#keyframes fall {
from {margin-top: 0px;}
to {margin-top: 300px;}
}
<button onclick="addSquare()">Add square</button>
<div id="squares"></div>
My approach is giving a css variable while creating divs for transform delay. If you need more complex movements, you can use the same logic for animation instead of transform.
<div class="parent"></div>
.parent {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.lets-try {
flex: 1;
background: #000;
height: 60px;
margin-right: 5px;
margin-left: 5px;
transition: all 0.5s ease-in-out var(--delay);
}
.lets-try.is-falling {
margin-top: 100px;
}
let parent = document.querySelector(".parent");
let numOfSquares = 12;
for (let i = 0; i < numOfSquares ; i++) {
let delay = i * 0.2;
let div = document.createElement('div');
div.setAttribute('class', 'lets-try');
div.setAttribute('style', `--delay:${delay}s`);
parent.appendChild(div);
}
setTimeout(() => {
let items = document.querySelectorAll(".lets-try");
[...items].forEach(item => {
item.classList.add("is-falling")
})
}, 1)
I want to make the 'box' in the code move to the right and then go back to the left. I tried to use 2 setInterval but it didn't works (or maybe i don't know how to use 2 setInterval).
var box = document.getElementById("box");
var pos = 0;
var toRight = setInterval(move, 10);
function move() {
if (pos >= 150) {
clearInterval(toRight);
} else {
pos++;
box.style.left = pos + "px";
}
}
#container {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
<p id="demo"></p>
I tried so many ways and the code still doesn't run, can some one show me the way to make the 'box' move back from the right side. Thank you.
Your code was a good start, and #j08691's comment is the right direction to take it.
Use 1 interval function but keep track of which direction the box is moving and toggle it when desired.
let box = document.getElementById("box");
let pos = 0, right = true;
setInterval(() => {
pos += right * 2 - 1;
if (pos === 0 || pos === 150)
right = !right;
box.style.left = pos + "px";
}, 10);
#container {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
As an alternative you could also use css animations and skip the javascript part entirely:
#keyframes move {
from { left: 0; }
to { left: calc(100% - 50px); }
}
#container {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
animation: move 2s linear alternate infinite;
}
<div id="container">
<div id="box"></div>
</div>
<p id="demo"></p>
I need to have 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2.
<html>
<head>
<style>
body{
margin: 0;
}
#header{
height: 100px;
background: orange;
}
#body{
height: 10000px;
background: white;
}
#footer1{
height: 100px;
background: darkblue;
}
.footer-sticky{
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: pink;
}
#footer2{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="body"></div>
<div id="footer1" style="position:fixed;bottom: 0;right: 0;left: 0;background: black;height:50px;color:white;">footer1</div>
<div id="footer2" style="">footer2</div>
</body>
</html>
Program includes 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2.
Here's jsfiddle link
http://jsfiddle.net/dLe5cv4j/
add position: relative; to the body and insert this javascript at the end (or inside the page load event)
var f1 = document.getElementById("footer1");
var f2 = document.getElementById("footer2");
window.addEventListener("scroll", function(){
if (document.body.scrollTop + window.innerHeight >
document.body.scrollHeight - f2.clientHeight ) {
f1.style.position = "absolute";
f1.style.bottom = f2.clientHeight+"px";
}
else{
f1.style.position = "fixed";
f1.style.bottom = "0px";
}
});
Result: http://jsfiddle.net/Lkuy0ext/
Add in your styles may work you
#footer1
{
z-index: 1;
}
#footer2
{
position: relative;
z-index: 2;
}
#footer1{
margin-bottom:100px;
height: 100px;
background: darkblue;
}
edit and try.
I have this pure JavaScript carousel that i have found from another question asked from here (Im not taking ownership of this code).
I need to make the carousel show the first image, it is showing the second image currently, (My knowledge of JavaScript isn't that great, so i have tried all that i can).
(This is just for a project at collage.)
var firstval = 0;
function Carousel() {
firstval += 2;
parent = document.getElementById('container');
parent.style.left = "-" + firstval + "%";
if (!(firstval % 100)) {
setTimeout(Carousel, 3000);
firstval = 0;
var firstChild = parent.firstElementChild;
parent.appendChild(firstChild);
parent.style.left= 0;
return;
}
runCarousel = setTimeout(Carousel, 20);
}
Carousel();
#wrapper {
position: relative;
width: 100%;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#container {
position: absolute;
width: 100%;
height: 300px;
}
.child {
width: 100%;
height: 300px;
padding-top: 35px;
float: left;
text-align: center;
font-size: 60px;
}
#a {
background: #FF0000;
}
#b {
background: #FFFF00;
}
#c {
background: #00FFFF;
}
<div id="wrapper">
<div id="container">
<div id="a" class="child">a</div>
<div id="b" class="child">b</div>
<div id="c" class="child">c</div>
</div>
</div>
JSFIDDLE
Here is a very simple solution
Just add a timeout to your initial call of Carousel():
setTimeout(function(){
Carousel();
}, 3000);
Working fiddle: https://jsfiddle.net/wzkLjh8s/6/
I am trying to get 900 dots to fade in one after the other. My current code generates them from one single div and then assigns a number class to them.
$(document).ready(function(){
function generate() {
var circle = $('.circle');
var container = $('#container');
for (var i = 0; i <= 900; i++) {
circle.clone().attr('class', 'circle ' + i).appendTo(container);
}
}
generate();
});
<style>
#container {
width: 1250px;
margin:0 auto;
max-width:1770px;
height: 670px;
overflow:hidden;
background-color:pink;
position:relative;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color:#8AB5DC;
margin:10px;
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="container">
<div class="circle">
</div>
</div>
Does this work for you:
$(document).ready(function () {
function generate() {
var duration = 400;
var delayFactor = 40;
var circle = $('.circle');
var container = $('#container');
for (var i = 0; i <= 900; i++) {
circle.clone().attr('class', 'circle ' + i).appendTo(container).hide();
}
$('.circle').each(function (index) {
$(this).delay(index * delayFactor).fadeIn(duration);
});
}
generate();
});
#container {
width: 1250px;
margin:0 auto;
max-width:1770px;
height: 670px;
overflow:hidden;
background-color:pink;
position:relative;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color:#8AB5DC;
margin:10px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<div class="circle"></div>
</div>
Play with the duration and delayFactor values. Hope this helps.