HomeworkLib
Question

This is an HTML and javascript code that I tried to replicate form this video but...

This is an HTML and javascript code that I tried to replicate form this video but it wouldn't work for me for some reason can you help me fix this issue. thanks,

https://youtu.be/F7C30e7gR2Y

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cicle Animation in js</title>
<style>
body
{
height: auto;
margin: 0;
}
#ocean
{
position: absolute;
width: 100%;
min-height: 100%;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, 50, 150)),
color-stop(0.50, rgb(0, 150, 255));
}
.wave
{
background: blue ;
display: inline-block;
height: 60%;
width: 10px;
position: absolute;
-webkit-animation-name:dotstuff;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinte;
-webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes dotstuff
{
0%
{
height: 60%;
}
50%
{
height: 40%
}
100%
{
height: 40%
}
}
</style>
</head>
<body>
<div id= "ocean"></div>
<script>
var ocean = document.getElementById("ocean"),
wavewidth= 10,
wavecount=Math.floor(window.innerWidth/wavewidth),
docFrag = document.createDocumentFragment();
for(var 1 = 0; < wavecount; i++){
var wave = document.createElement("div")
wave.className += "wave";
docFrag.appendChild(wave);
wave.style.left = i * wavewidth + "px";
wave.style.webkitAnimaationDelay = (i/100 + "s");
}
ocean.appendChild(docFrag);
</script>
</body>
</html>
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Program -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>cicle Animation in js</title>

<style>

body

{

height: auto;

margin: 0;

}

/* added background color to ocean div */

#ocean

{

background: blue;

position: absolute;

width: 100%;

min-height: 100%;

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(rgb(0, 50, 150)),

color-stop(0.50, rgb(0, 150, 255)));

}

.wave

{

background: #a8e3ff ;

display: inline-block;

height: 60%;

width: 10px;

position: absolute;

-webkit-animation-name:dotstuff;

-webkit-animation-duration:3s;

-webkit-animation-iteration-count:infinte;

/* corrected webkit-transition-timing-function thing in css*/

-webkit-transition-timing-function:ease-in-out;

}

@-webkit-keyframes dotstuff

{

0%

{

height: 60%;

}

50%

{

height: 40%

}

100%

{/* height should be 60% for 100% */

height: 60%

}

}

</style>

</head>

<body>

<div id= "ocean"></div>

<script>

var ocean = document.getElementById("ocean"),

wavewidth= 10,

wavecount=Math.floor(window.innerWidth/wavewidth),

docFrag = document.createDocumentFragment();

/* instead of 1 their should i for iterating loop */

for(var i = 0; i< wavecount; i++){

var wave = document.createElement("div")

wave.className += "wave";

docFrag.appendChild(wave);

wave.style.left = i * wavewidth + "px";

/* corrected webkitAnimationDelay spelling */

wave.style.webkitAnimationDelay = (i/100 + "s");

}

ocean.appendChild(docFrag);

</script>

</body>

</html>

Screenshots-

0 0
Add a comment
Know the answer?
Add Answer to:
This is an HTML and javascript code that I tried to replicate form this video but...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title>    </head>    <!-- body tag -->     <body>             <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;           ...

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Social</title>    </head>    <!-- body tag --> <body>                 <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;            background-color:...

  • HTML and css using notepad++ WHen you run the code, you will see a horizontal menue...

    HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px;...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • could you please show me what I am doing wrong in the Javascript code below. <html>...

    could you please show me what I am doing wrong in the Javascript code below. <html>   <head> <meta charset="UTF-8"> <title></title> <style> #mytext { color: white; text-align: center; } </style> <script> var words = "The cat sat on the mat"; document.writeln("id='mytext"+ words '); </script>   </head>   <body>   </body> </html>

  • This question relates to JavaScript. Could you please show me how to get my code below...

    This question relates to JavaScript. Could you please show me how to get my code below working. Please keep it simple. The code has a green square image.  When it is clicked the function generates a random number from 1-3. If the number generated is '1' then the green square is replaced by a picture of a tree. Please keep it as simple as possible because I am new to coding. Thanks. <html> <head>              <title></title>        <script>...

  • Trying to understand java script.. The code provided prints out a game board of cells that...

    Trying to understand java script.. The code provided prints out a game board of cells that are 10 x 10.   I currnetly have it printed out so that it will print out pink squares. how can i create a click even on any of the pink squares that when they are clicked it will turn the square black...   then any square that is black when it is clicked it will change back to the color pink html/js code and css...

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT