Форум

akkond · #1 (**permalink**) 22.03.2015, 22:53

Здравствуйте! Есть анимация, выполненная средствами html-тега marquee

<marquee width=980 height=100 behavior="alternate" direction="up" scrolldelay=60 scrollamount=1><img src="http://kulinaria1955.ru/templates/New/images/img_3.jpg"></marquee>

но как надо работает только в браузерах Internet Explorer и Firefox.
Chrome и Opera запускают анимацию с нижней границы, и доходя до верхней границы блока, картинка начинает жутко мерцать. Подскажите пожалуйста как реализовать этот код при помощи jQuery.

рони · #2 (**permalink**) 22.03.2015, 23:10

akkond,
css3

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:980px;
    height:100px;
    overflow: hidden;
    position: relative;
  }
  img{
    position: absolute;
    top:0;
   -webkit-animation: up 5s ease-in-out infinite;
	-moz-animation: up 5s ease-in-out infinite;
	-o-animation: up 5s ease-in-out infinite;
	animation: up 5s ease-in-out infinite;

  }
  @keyframes up {
	50% {
		 top: -120px;
	}
}
@-webkit-keyframes up {
	50% {
		 top: -120px;
	}
}


  </style>
</head>

<body>
<div><img src="http://kulinaria1955.ru/templates/New/images/img_3.jpg"></div>

</body>

</html>

akkond · #3 (**permalink**) 22.03.2015, 23:37

Спасибо большое, рони! Очень помогли.

Форум

Справочник

Discord чат

Курсы javascript