Создать более плавную анимацию на карусели? - PullRequest
Новая
       19

Создать более плавную анимацию на карусели?

0 голосов
/ 13 мая 2011

Я нахожусь в процессе создания темы Tumblr для карусели ЗДЕСЬ , но я очень разочарован анимацией.Что я могу добавить к этому: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">
</script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle
/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com  
/jquery.easing.1.1.1.js">      
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({ 
fx:    'scrollRight', 
speed: 'fast',
timeout: 0,
easeIn:  'bounceout', 
easeOut: 'backin', 
next:   '#next2', 
prev:   '#prev2'
});

function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log(  $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
    .append('<h3>' + this.alt + '</h3>');
}
</script>

Чтобы сделать анимацию карусели более плавной?

Ответы [ 3 ]

2 голосов
/ 13 мая 2011

Измените свои варианты, приятель. 

$('#s7').cycle({
    fx: 'scrollRight',
    speed: 1000,
    timeout: 0,
    next: '#next2',
    prev: '#prev2',
    easing: 'easeinout'
});
1 голос
/ 20 декабря 2012

У меня был хороший опыт определения моих изображений в качестве фоновых изображений в CSS, а не использования реальных тегов в HTML.Это значительно повысило плавность прокрутки с помощью карусели Bootstrap и Chrome.Разметка / CSS для этого будет выглядеть примерно так:

HTML: 

<div id="my-image">
</div>

CSS: 

#my-image {
  background:url("image.png") no-repeat 0 0;
}
0 голосов
/ 13 мая 2011

Гладкость (или ее отсутствие) подобной анимации во многом зависит от используемого браузера, а также от используемого компьютера (медленный компьютер = более громоздкая анимация).

Вы можете попробовать использоватьболее основанный на CSS3 подход (т.е. менее зависимый от JS), но он будет ограничен современными браузерами (в данном случае только webkit).

...