Цитата:
P.S.: Чем и оправдывается сложность анимации в ней… P.P.S.: И является тестом: Являетесь ли Вы читателем самого популярного журнала и компьютера нашего поколения… |
Цитата:
P.S. Плавную смену картинок - другим на заметку - я додумался сам как сделать: беру дополнительный див, приклепляю к нему фон. А второй див сверху по скрипту Paguo-86PK - и фон то появляется, то исчезает, меняя свои картинки. В итоге получилось примерно что хотелось: фоновые картинки плавно появляются и исчезают. Единственное, хочется, чтобы была пауза когда картинка уже появилась, а не была непрерывная смена картинок. |
Более аккуратный вариант
<style>
.ghost_thumb {
height :120px;
}
.ghost_thumb img {
position :absolute;
}
</style>
<script>
var Ghosting = function(ghosts) {
var Thumbs = [];
function Slider() {
Thumbs.forEach(function(thumb) {
var gap = thumb.pause + thumb.fading;
thumb.phase = (thumb.phase + 1) % (gap * thumb.slides.length);
var phase = thumb.phase % gap;
var index = (thumb.phase - phase) / gap;
var next = (index + 1) % thumb.slides.length;
if(phase >= thumb.pause)
thumb.slides[index].style.opacity = 1.0 - (phase - thumb.pause) / thumb.fading,
thumb.slides[next].style.opacity = 0.0 + (phase - thumb.pause) / thumb.fading;
});
setTimeout(Slider.bind(this), 10);
}
ghosts.forEach(function(thumb) {
var props = thumb.split(/\s+/);
var el = document.getElementById(props[0]);
if(el) {
var imgs = el.getElementsByTagName("img");
if(imgs.length) {
Thumbs.push({
frame : el,
slides : imgs,
fading : props[1],
pause : props[2],
phase : 0
});
for(var i = 0; i < imgs.length; ++ i)
imgs[i].style.opacity = 0;
}
}
Slider();
});
}
</script>
<body onload='Ghosting(["Gallery_two 25 3","Gallery_three 15 9"])'>
<p>Плавность - 25, Пауза - 3</p>
<div id=Gallery_two class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
</div>
<p>Плавность - 15, Пауза - 9</p>
<div id=Gallery_three class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
<img src='http://javascript.ru/forum/image.php?u=3602&dateline=1489262044' />
</div>
</body>
|
смена картинок с opacity эффектом
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 350px;
height: 170px;
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
}
.carousel img.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = el.querySelectorAll("img"),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
!function g() {
img[i].classList.remove("show");
i = ++i % len;
img[i].classList.add("show");
window.setTimeout(g, p)
}()
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000">
<img src="http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg" alt="">
<img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" alt="">
<img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" alt="">
<img src="http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg" alt="">
</div>
<div class="carousel vertical" data-pause="1000">
<img src="https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13" alt="">
<img src="http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png" alt="">
<img src="http://rugirlz.com/pics/hv_dp20088034.jpg" alt="">
<img src="https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13" alt="">
</div>
</body>
</html>
|
Спасибо, Рони и Радио-86РК, вам уже плюсики сайт не дает ставить. Другие за меня поставят! :) )))
Вы немного отклонились от темы и от моего задания: менять нужно именно фоновые картинки. Я по этой поисковой фразе из Гугла сюда и пришел. Хороший скрипт по смене картинок у меня есть, а вот к фоновым картинкам он не подошел...потому и начал искать))). В любом случае всем спасибо за помощь, по другим вопросам я сам также "за лайки" помогал людям на форумах! ))) P.S. Как я понимаю, в последний двух постах с кодом нужно добавить "document.getElementById(" там где надо, чтобы была именно фоновая картинка, а не img. А где это надо - кому надо найдет))) |
смена фона с opacity эффектом
e-partner,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 350px;
height: 170px;
position: relative;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
background-size: 350px 170px;
}
.carousel.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
background-size: 170px 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = JSON.parse(el.dataset.src),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
function g() {
i = ++i % len;
el.style.backgroundImage = "url(" + img[i] + ")";
el.classList.add("show");
window.setTimeout(k, p)
}
g();
function k() {
el.classList.remove("show");
window.setTimeout(g, 800)
}
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000"
data-src='["http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"]'>
</div>
<div class="carousel vertical" data-pause="5000" data-src='[
"https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13",
"http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png",
"http://rugirlz.com/pics/hv_dp20088034.jpg",
"https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13"]'>
</div>
</body>
</html>
|
Цитата:
Использовали css3-трюки, с которыми я вообще поленился некогда разбираться ещё при начале распространения html5 и svg.;) P.S.: Сейчас нужно разобраться с собственным DVR-плагином. А то преждний писал впопыхах, тяп-ляп и как попало, чтобы попрактиваться со Squirrel на досуге…:blink: Теперь расплачиваюсь и пишу всё заново:write: И спотыкаюсь всюду. Ползу медленнее черепахи:D |
| Часовой пояс GMT +3, время: 13:57. |