нет это какой-то глюк, все вроде поправил и теперь работает как надо.
#foto_index{
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-o-transition:all 3s ease;
opacity: 1;
background: url("/images/new/foto_index/01.jpg") no-repeat center;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
}
var mas = [
'/images/new/foto_index/01.jpg',
'/images/new/foto_index/IMG_0875.jpg',
'/images/new/foto_index/IMG_1043.jpg',
'/images/new/foto_index/IMG_1109.jpg',
'/images/new/foto_index/IMG_1077.jpg',
'/images/new/foto_index/IMG_0985.jpg'
], i=1;
function csaHead(){
if(i > (mas.length-1)){
document.getElementById('foto_index').style.backgroundImage="url('"+mas[0]+"')";
i=0;
}else{
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i++;
}
}
var intervalCsaHead = setInterval(csaHead,5000);
|
macik,
Последний вариант вашего скрипта можно упростить
var mas = [
'/images/new/foto_index/01.jpg',
'/images/new/foto_index/IMG_0875.jpg',
'/images/new/foto_index/IMG_1043.jpg',
'/images/new/foto_index/IMG_1109.jpg',
'/images/new/foto_index/IMG_1077.jpg',
'/images/new/foto_index/IMG_0985.jpg'
], i=1;
function csaHead(){
if(i > (mas.length-1)){
i=0;
}
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i++;
}
var intervalCsaHead = setInterval(csaHead,5000);
А насчет появления картинок - можно сделать первую прокрутку втемную и с нулевой задержкой. |
Цитата:
Вот тут http://d-fitness.com.ua/new/start я это гоняю ... |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
macik,
var mas = [
'/images/new/foto_index/01.jpg',
'/images/new/foto_index/IMG_0875.jpg',
'/images/new/foto_index/IMG_1043.jpg',
'/images/new/foto_index/IMG_1109.jpg',
'/images/new/foto_index/IMG_1077.jpg',
'/images/new/foto_index/IMG_0985.jpg'
], i=1;
function csaHead(){
if(i > (mas.length-1)){
i=0;
}
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i++;
setTimeout(csaHead,5000)
}
csaHead()
|
Я почитала и выходит что requestAnimationFrame(); самое оно! все остальное крутит loop и в фоновом режиме ... только хром умеет замедлять анимация если вкладка не активна.
|
Цитата:
Цитата:
|
Цитата:
|
Работает последний вариант
<style>
#foto_index{
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-o-transition:all 3s ease;
opacity: 1;
background: url("http://javascript.ru/cat/list/mobile.jpg") no-repeat center;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
}
</style>
<div id='foto_index'></div>
<script>
var mas = [
'http://javascript.ru/cat/list/donkey.gif',
'http://javascript.ru/cat/list/js.gif',
'http://javascript.ru/cat/list/project.jpg',
'http://javascript.ru/cat/list/appscript.png'
], i=1;
function csaHead(){
if(i > (mas.length-1)){
i=0;
}
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i++;
setTimeout(csaHead,5000)
}
csaHead()
</script>
|
Вроде работает, но у меня глючит время от времени ... пустой фон и весе
http://d-fitness.com.ua/new/start |
пробовал safari, faer, chrom ( mac os ) везде глюк. с первого разо пустые места. windows Chrom, глючит. IE11 Это вообще ШОК!
|
|
Цитата:
|
подчистил пробелы и уменьшил количество картинок. Вроде заработало
Больше всего мне кажется виноват transition:all 1s ease; Как только я увеличиваю время перехода, сразу начинаются глюки. |
глюк с не активным окном все равно присутствует ...
Кто подскажет код на основе requestAnimationFrame Я то у меня не получается ... |
macik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#foto_index{
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-o-transition:all 3s ease;
opacity: 1;
background: url("http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg") no-repeat center;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var mas = [
'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'
], i=0, a = performance.now();
function csaHead(b){
if(b - a > 5000) {
a = b;
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i = ++i % mas.length;
}
requestAnimationFrame(csaHead)
}
csaHead()
});
</script>
</head>
<body>
<div id='foto_index'></div>
</body>
</html>
|
Спасибо. Этот вариант лучше работает при возврате с фоновой работы ...
Но старт на холодную тоже плох. первый показ рваный без плавного перехода. |
Вообще как они сделали на сайте такой плавный переход ... http://ironfit.ancorathemes.com
Все что я тут попробовал имеет глюки ... только animate дает правильную анимацию но при этом не применим для div с перетеканием картинки в картинку ... Кто то знает как это реализовано в ironfit.ancorathemes.com ? |
Цитата:
Ноту проблема не в этом. Сейчас мне не нравится поведение всей скрипт на основании requestAnimationFrame, setTimeout и т. д. то поведение этой анимации не подходит. Она то играет то обрывает ... то еще как то ... |
requestAnimationFrame and preload images
macik,
вариант с предзагрузчиком от Rise,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#foto_index{
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-o-transition:all 3s ease;
opacity: 1;
background: url("http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg") no-repeat center;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var mas = [
'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'
], i=1, a = performance.now();
function csaHead(b){
if(b - a > 5000) {
a = b;
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i = ++i % mas.length;
}
requestAnimationFrame(csaHead)
}
function preload(images, callback) {
if (images.length) {
var image = new Image();
image.onload = image.onerror = function() {
preload(images, callback);
}
image.src = images.pop();
} else {
callback();
}
}
preload(mas.slice(0), function(){ requestAnimationFrame(csaHead)});
});
</script>
</head>
<body>
<div id='foto_index'></div>
</body>
</html>
|
Рони, я сейчас тестирую ... Вроде лучше.
UP Ну в Crom все работает отлично в Firefox анимации нет, только редкий перебор. в Safari старт работает хорошо, после ухода в фон, первый проход рвет потом опять все плавно. Есть идея что надо останавливать анимацию когда окно не активно. Можно это как то сделать? |
macik,
css анимация background - работает нормально только в хроме или фон можно анимировать нормально только в хроме. в остальных только сменой картинок. |
Цитата:
|
macik,
там один блок заменяет другой --- но алгоритм тотже что тут в посте №35 только вместо картинок блоки |
А можете подсказать как это сделать на блоках?
|
смена блоков с разным фоном с opacity
macik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.foto_index .bg{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
box-sizing: border-box;
transition: opacity .8s ease-in;
}
.foto_index .bg.show{
opacity: 1;
}
.foto_index{
width: 100%;
position: relative;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".foto_index"), function(el) {
var img = el.querySelectorAll(".bg"),
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="foto_index" data-pause="3000">
<div class="bg" style="background-image: url(http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg)"></div>
<div class="bg" style="background-image: url(http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg)"></div>
<div class="bg" style="background-image: url(http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"></div>
</div>
</body>
</html>
|
Спасибо!
Как же это у вас лихо получается!!! Вы просто супер! Я восхищаюсь такими, как Вы! PS поставил на тест, 5 минут теста в фоне, все ОК. |
шрифты почему-то при старте анимации становятся тонкими ... в сафари, хром и лис нормально ...
http://d-fitness.com.ua/new/start |
macik,
ie шепчет: Цитата:
|
| Часовой пояс GMT +3, время: 21:44. |