Marquee CSS3

Veronica Auretta · 4 Dic 2015

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 · 4 Dic 2015

A me non si blocca! Si ferma solo se si ci va sopra con mouse

Veronica Auretta · 5 Dic 2015

Max 1 ha scritto:
A me non si blocca! Si ferma solo se si ci va sopra con mouse

allora sarà un problema del contenitore... perché qui ho 'semplificato' il codice, ma si trova in un ulteriore div... che però non ha nulla di speciale se non le dimensioni e il bordo ):

Max 1 · 5 Dic 2015

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 · 6 Dic 2015

@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 · 6 Dic 2015

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 · 6 Dic 2015

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>

Veronica Auretta · 11 Dic 2015

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;
}

Cerca

Cerca

Marquee CSS3

Veronica Auretta

Nuovo Utente

Max 1

Super Moderatore

Veronica Auretta

Nuovo Utente

Max 1

Super Moderatore

marino51

Utente Attivo

Max 1

Super Moderatore

marino51

Utente Attivo

Veronica Auretta

Nuovo Utente

Discussioni simili