Animacja MARQUEE

0

Witam,
mam pewnien problem z animacją "MARQUEE", chce zrobić panel na którym znajdują się zdjęcia i tak żeby w kółko przechodziły przez strone, lecz gdy dodaje zdjęcia moja strona też się powiększa. Tu część kodu tej strony:

<marquee behavior="scroll" scrollamount="2" scrolldelay="3">
<table>
<tr>
	<td> <img src="1.jpg" width ="270" height="210"/> </td>	<td> <img src="2.jpg" width ="270" height="210"/> </td> 
	<td> <img src="3.jpg" width ="270" height="210"/> </td> <td> <img src="4.jpg" width ="270" height="210"/> </td> 
	<td> <img src="5.jpg" width ="270" height="210"/> </td> <td> <img src="6.jpg" width ="270" height="210"/> </td> 
	<td> <img src="7.jpg" width ="270" height="210"/> </td> <td> <img src="8.jpg" width ="270" height="210"/> </td> 
	<td> <img src="9.jpg" width ="270" height="210"/> </td> <td> <img src="10.jpg" width ="270" height="210"/> </td> 
</tr>
</table>
</marquee>

Dodam załącznik na którym będzie pokazany problem,spójrzcie no dolny pasek przewijania. Chciałbym żeby strona pozostała normalnych rozmiarów a zdjęcia się przewijały, bardzo proszę o pomoc.

0

Nie rób tego w ten sposób.... Użyj css

.marquee{
   animation: marquee 15s linear infinite;
}
.marquee:hover{
   animation-play-state: paused
}
0

Zrobiłem tak jak napisałeś, ale coś nie wyszło, w pliku mam coś takiego a w css dałem ten kod co ty napisałeś, ale zdjęcia tylko się wyświetliły.

<div class="marquee" />
<img src="1.jpg" width ="270" height="210"/>
<img src="2.jpg" width ="270" height="210"/>
<img src="3.jpg" width ="270" height="210"/>
<img src="4.jpg" width ="270" height="210"/>
<img src="5.jpg" width ="270" height="210"/>
<img src="6.jpg" width ="270" height="210"/>
<img src="7.jpg" width ="270" height="210"/>
<img src="8.jpg" width ="270" height="210"/>
<img src="9.jpg" width ="270" height="210"/>
<img src="10.jpg" width ="270" height="210"/>
</div>

Pewnie coś źle zrobiłem ale nie wiem co

0

<div class="marquee" /> - zamknąłeś nieprawidłowo div i to w nieprawidłowym miejscu. Usuń slash i będzie grało.

0

Zrobiłem to lecz niestety dalej, zdjęcia są po prostu wyświetlane.

0

a co z keyframes??? jest dodane???

tutaj dzialajacy przyklad => http://jsfiddle.net/F5jC9/

w fiddlu jest skromny plik js (http://leaverou.github.io/prefixfree/prefixfree.js) by nie bawic sie prefixami:)

0

Dalej nie działa, wstawiam kod, zobaczcie co jest nie tak:

<!doctype html>
<html>
<head>
<title>Projekt szkolny</title>
<meta charset=UTF-8" /> 
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>

<center>
<a href="file:///C:/Users/T/Downloads/projekt/main.html"><img src="home.png"/></a>
<a href="file:///C:/Users/T/Downloads/projekt/main.html"><img src="galeria.png"/></a>
<a href="file:///C:/Users/T/Downloads/projekt/main.html"><img src="cytaty.png"/></a>
</center>

<p class="marquee" >
  <span>
	<img src="1.jpg" width ="270" height="210"/>
	<img src="2.jpg" width ="270" height="210"/>
	<img src="3.jpg" width ="270" height="210"/>
	<img src="4.jpg" width ="270" height="210"/>
	<img src="5.jpg" width ="270" height="210"/>
	<img src="6.jpg" width ="270" height="210"/>
	<img src="7.jpg" width ="270" height="210"/>
	<img src="8.jpg" width ="270" height="210"/>
	<img src="9.jpg" width ="270" height="210"/>
	<img src="10.jpg" width ="270" height="210"/>
  </span>
</p>

</body>
</html>

CSS:

.napis2{
position: relative; left: -10px; top: 160px;
}
.home2{
position: absolute; left: 621px; top: 240px;
}
.home2:hover{
}
.marquee {
    width: 450px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 15s linear infinite;
}
.marquee span:hover {
    animation-play-state: paused
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Bardzo proszę o pomoc, to jest bardzo ważne dla mnie.
napis2, home sa z innego pliku, nie zwracajcie na nie uwagi.

0

jak juz kopiujesz to kopiuj z glowa bo nizej napisalem ze dolaczylem plik javascript, bo normalnie transformy i keyframesy sa z prefixami i nie wszedzie pojda

0

No ok, ale ja mam to zrobić tylko przy pomoc HTML i CSS to jak to zrobić by dobrze działał ?

Mógłby ktoś napisać ten kod, może być przy użyciu JS. Bardzo prosze.

0 
<!doctype html>
<html>
<head>
<title>Projekt szkolny</title>
<meta charset=UTF-8" /> 

<style>
.napis2{
position: relative; left: -10px; top: 160px;
}
.home2{
position: absolute; left: 621px; top: 240px;
}
.home2:hover{
}
.marquee {
    width: 450px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
 
.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 15s linear infinite;
}
.marquee span:hover {
    animation-play-state: paused
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>
</head>

<body>

<center>
<a href="file:///C:/Users/T/Downloads/projekt/main.html"><img src="home.png"/></a>
<a href="file:///C:/Users/T/Downloads/projekt/main.html"><img src="galeria.png"/></a>
<a href="file:///C:/Users/T/Downloads/projekt/main.html"><img src="cytaty.png"/></a>
</center>
 
<p class="marquee" >
  <span>
    <img src="1.jpg" width ="270" height="210"/>
    <img src="2.jpg" width ="270" height="210"/>
    <img src="3.jpg" width ="270" height="210"/>
    <img src="4.jpg" width ="270" height="210"/>
    <img src="5.jpg" width ="270" height="210"/>
    <img src="6.jpg" width ="270" height="210"/>
    <img src="7.jpg" width ="270" height="210"/>
    <img src="8.jpg" width ="270" height="210"/>
    <img src="9.jpg" width ="270" height="210"/>
    <img src="10.jpg" width ="270" height="210"/>
  </span>
</p>
 
</body>
</html>

Zmień przeglądarkę z internet explorera na coś nowszego :)Ponieważ jak będziesz chciał użyć stylów z CSS3 nie wszystkie działają. U mnie ten kod poszedł bez problemów.

0

Używam "Google Chrome" i niestety nie działa.

1 użytkowników online, w tym zalogowanych: 0, gości: 1