html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h2>HTML: Bouncing Text and Sliding Image</h2>
<p>You can make the content bounce back and forth by setting the value of the property behavior to "alternate" in HTML Marquee element.</p>
<div>
</div>
<p id="slide">
<marquee width="100%" scrolldelay="10" behavior="alternate">
"Wow! I am sliding!"
</marquee>
</p>
<div id="2">
<marquee width="100%" scrolldelay="10" behavior="alternate">
(<script> document.write("By Ali SAFARI on "+new Date("May 8, 2019"). toLocaleDateString()); </script>)
</marquee>
</div>
<marquee behavior="scroll" direction="left">
<img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="100" height="80" alt="Swimming fish" />
</marquee>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
div {
width: 40px;
height: 60px;
background-color:lightblue;
transition: width 2s;
-webkit-transition: width, height, 4s;
-moz-transition: width, height, 4s;
}
div:hover {
width: 100vw;
height:60px;
background-color:pink;
}
#2{
width: 100px;
height: 50px;
background-color:lightblue;
position:absolute;
top:10px;
}
#slide{
font-size:16px;
position:relative;
bottom:40px;
color:purple;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run