Marquee CSS3

V

Veronica Auretta

Nuovo Utente
21 Apr 2015
25
0
0
Salve, sto provando a fare un testo scorrevole in CSS3 usando questo codice:

Codice: 
<style type="text/css">

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: 15s linear 0s normal none infinite running marquee;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}
</style>

<div style="overflow:hidden; height:200px;">
<p class="marquee"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nibh velit. Sed lacinia vitae quam sit amet vehicula. Morbi ut velit egestas, aliquet felis non, suscipit erat. Vestibulum venenatis quis quam et pellentesque. Sed vel neque lacinia, mollis mi sed, pulvinar metus. Cras luctus sem quis nisi accumsan luctus. Sed euismod nibh ac mauris ornare, sodales porttitor eros aliquam massa nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nibh velit. Sed lacinia vitae quam sit amet vehicula. Morbi ut velit egestas, aliquet felis non, suscipit erat. Vestibulum venenatis quis quam et pellentesque. Sed vel neque lacinia, mollis mi sed, pulvinar metus. Cras luctus sem quis nisi accumsan luctus. Sed euismod nibh ac mauris ornare, sodales porttitor eros aliquam massa nunc. 
</p>
</div>

il problema è che arrivato ad un certo punto lo scorrimento si blocca e riparte d'accapo senza arrivare alla fine del testo, non riesco a capire quale sia il problema...
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
A me non si blocca! Si ferma solo se si ci va sopra con mouse
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Insomma non so cosa dirti! Quel codice a me funziona bene, se c'è un problema in un'altro pezzo di codice che non ci fai vedere come possiamo risponderti?
 
marino51

marino51

Utente Attivo
28 Feb 2013
3.204
207
63
Lombardia
@Max1
ciao max, l'ho provato con ie11 ed è un "gatto di marmo", non si sposta di un pixel,
vuoi essere così gentile da postare il codice completo che a te funziona ?
in realtà ho confrontato con una mia versione funzionante e trovo che mancano alcune definizioni ma ... forse superflue
ciao
Marino
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Codice: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: 15s linear 0s normal none infinite running marquee;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}
</style>
</head>

<body>
<div style="overflow:hidden; height:200px;">
<p class="marquee"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nibh velit. Sed lacinia vitae quam sit amet vehicula. Morbi ut velit egestas, aliquet felis non, suscipit erat. Vestibulum venenatis quis quam et pellentesque. Sed vel neque lacinia, mollis mi sed, pulvinar metus. Cras luctus sem quis nisi accumsan luctus. Sed euismod nibh ac mauris ornare, sodales porttitor eros aliquam massa nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nibh velit. Sed lacinia vitae quam sit amet vehicula. Morbi ut velit egestas, aliquet felis non, suscipit erat. Vestibulum venenatis quis quam et pellentesque. Sed vel neque lacinia, mollis mi sed, pulvinar metus. Cras luctus sem quis nisi accumsan luctus. Sed euismod nibh ac mauris ornare, sodales porttitor eros aliquam massa nunc. 
</p>
</div>
</body>
</html>
Funziona con Chrome e con FF, con IE 10 e 11 non funziona perchè questi hanno un BUG con @keyframes
 
marino51

marino51

Utente Attivo
28 Feb 2013
3.204
207
63
Lombardia
riporto quanto disponibile nella mia "cassetta degli attrezzi",
credo funzioni con tutti i browser,
può essere cambiato l'orientamento, molto facilmente, sostituendo a "top" i corrispettivi, "bottom", "left" e "right"
non è mio, ma l'ho ripreso molto tempo fa senza segnarmi il sito di provenienza
se può andare bene, qui il codice
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>marquee</title>
<style>

.marquee-up
{
	height: 40px;

	overflow: hidden;
	position: relative;
}

.marquee-up div
{
	display: block;
	width: 200%;
	height: 40px;

	position: absolute;
	overflow: hidden;

	-webkit-animation: marquee-up 4s linear infinite;
	-moz-animation: marquee-up 4s linear infinite;
	-ms-animation: marquee-up 4s linear infinite;
	-o-animation: marquee-up 4s linear infinite;
	animation: marquee-up 4s linear infinite;
}

.marquee span
{
	float: left;
	width: 50%;
}

.marquee-up div:hover
{
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}

@-webkit-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

@-moz-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}
@-ms-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

@-o-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

@keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

</style>
</head>
<body>

<div class="marquee-up">
<div>
<span>You spin me right round, baby. Like a record, baby.</span><br>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>

</body>
</html>
 
V

Veronica Auretta

Nuovo Utente
21 Apr 2015
25
0
0
Allora ho provato il codice di marino51, ma persiste lo stesso problema (in un altro sito!) quindi c'è sicuramente qualcosa che sbaglio. Incollo tutto il codice interessato. Il testo arriva più o meno a tre quarti del totale e ricomincia d'accapo, ma non ricomincia dal basso apparendo lentamente verso l'alto, ma parte già al centro e continua a salire :S

Codice: 
<div class="meteo" style="height:200px;">
<div class="titolo_notizie"><h1> Notizie </h1></div>
   <div class="marquee-up">
   <div style="text-align:center; height:170px; padding:3px;">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros leo, imperdiet ac porta at, pellentesque id sapien. Sed et pretium sem. Vestibulum vestibulum massa nec lectus lacinia, nec consequat eros gravida. Nullam sed eleifend mauris. Sed libero neque, maximus ut ligula non, commodo congue nisi. In iaculis aliquet sapien, id tincidunt nisi sollicitudin eu. Vivamus ut ligula sit amet nulla fringilla luctus. Nunc in odio est. Quisque ac nisl id ipsum malesuada feugiat. Vestibulum metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros leo, imperdiet ac porta at, pellentesque id sapien. Sed et pretium sem. Vestibulum vestibulum massa nec lectus lacinia, nec consequat eros gravida. Nullam sed eleifend mauris. Sed libero neque, maximus ut ligula non, commodo congue nisi. In iaculis aliquet sapien, id tincidunt nisi sollicitudin eu. Vivamus ut ligula sit amet nulla fringilla luctus. Nunc in odio est. Quisque ac nisl id ipsum malesuada feugiat. Vestibulum metus. 
    </span>
    </div>
    </div></div>

il css lo includo a parte, però eccolo per averlo sott'occhio.

Codice: 
.marquee-up
{
	height: 270px;

	overflow: hidden;
	position: relative;
}

.marquee-up div
{
	display: block;
	width:200%;
        height: 270px;
        
	position: absolute;
	overflow: hidden;

	-webkit-animation: marquee-up 4s linear infinite;
	-moz-animation: marquee-up 4s linear infinite;
	-ms-animation: marquee-up 4s linear infinite;
	-o-animation: marquee-up 4s linear infinite;
	animation: marquee-up 4s linear infinite;
}

.marquee span
{
	float: center;
	width: 50%;
}

.marquee-up div:hover
{
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}

@-webkit-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

@-moz-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}
@-ms-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

@-o-keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

@keyframes marquee-up
{
	0% { top: 0; }
	100% { top: -100%; }
}

div.titolo_notizie {
    color: #271c00;
}

div.meteo {
    background-color: #ada283;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 1px 1px 4px #271c00 inset, -1px -1px 4px #271c00 inset, 1px -1px 4px #271c00 inset, -1px 1px 4px #271c00 inset;
    color: #271c00;
    margin-bottom: 10px;
}
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
P Marquee WordPress 2
Web Designer BBCode Marquee su vBulletin CMS (Content Management System) 0
Web Designer Marquee: Testi e Immagini in movimento in MyBB CMS (Content Management System) 0
novello88 Marquee in HTML HTML e CSS 1
J Vertical Marquee Javascript 0
G Asp e Marquee Classic ASP 4
A marquee HTML e CSS 1
A problema marquee HTML e CSS 2
C Marquee verticale che si ferma onmouseover HTML e CSS 8
C Marquee verticale HTML e CSS 3
I [CSS3]Problema slideshow multiple HTML e CSS 2
momeraths CSS3 Gradients HTML e CSS 2
xone [Offro] Realizzazione template html5 css3 creati da zero Offerte e Richieste di Lavoro e/o Collaborazione 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
M Maschere di Immagini in CSS3 ovvero: questo sconosciuto HTML e CSS 1
R Transizione immagine css3 HTML e CSS 1
A Controllare l'animazione di una skills bar realizzata con i keyframes css3 Javascript 1
M Animate Transition css3 HTML e CSS 1
novello88 [css3] animated position HTML e CSS 0
A Menu css3 HTML e CSS 1
K Transition CSS3 menu a comparsa HTML e CSS 1
zighy JM css3 image effect plugin..chi li conosce,come si usano? HTML e CSS 6
K Nascondere i css3 ai vecchi broswer usando @media HTML e CSS 0
voldemort HTML5 e CSS3: ancora troppo presto? HTML e CSS 3
B [VENDO] Libri web design nuovi, usciti negli ultimi mesi. (wordpress e html5/css3) Altri Annunci 0
J Super Cool and Great Button Resources and Tutorials with CSS3 Javascript 0
MarcoGrazia [CSS3] Bottoni arrotondati e non con gradiente HTML e CSS 0
SolidSnake4 info css3 HTML e CSS 1
SolidSnake4 css3 webfont HTML e CSS 1

Discussioni simili

Alto Basso