Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 24.12.2016
Сообщений: 2

Не отображается фон при анимации

24.12.2016, 21:07. Показов 1057. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет!

Буду очень благодарен, если поможете разобраться!

Сначала опишу свою задумку для ясности, а потом суть проблемы.

Есть div, у которого background залит картинкой, в этом же div стоит img с точно такой же картинкой, только черно-белой. По задумке, при прокрутке страницы до нужного блока, срабатывает фунуция и картинка постепенно заливается цветом, этого я достиг с помощью noColor.style.clip="rect("+У+"px, auto, auto, 0px)"

Теперь к проблеме:

Залил файлы на сервер, открываю через chrome, все работает, img получает меньшую область видимости, а за ним такая же, но цветная картинка, но вот если обновить страницу, то при изменении области видимости img, за ним уже открывается белый фон. Такая же проблема и в Opera, а вот в FireFox все работает и после обновления страницы. И еще странно то, что если запускаю страничку со своего компа, то во всех браузерах все работает нормально, сколько бы раз не обнавлял страницу.

Заранее благодарен за советы!
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
24.12.2016, 21:07
Ответы с готовыми решениями:

Не отображается фон при печати
Всем Привет. Вот возникла такая проблема, что при печати и предварительном просмотре у HTML таблицы не отображается фон. Хотя к кнопке...

При запуске приложения отображается задний фон
Добрый вечер, форумчане. Пиши с такой проблемой, сделал формочку для отображения данных Grid'a с кнопками, нажимаю на кнопку Run, форма...

Фон страницы не отображается при подключении через css
всем привет. такая проблема:не ставится фон на страницу. причем если писать в тэге body картинка появляется, а в css не хочет код формы:...

3
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
25.12.2016, 02:36
Нужен код
0
0 / 0 / 0
Регистрация: 24.12.2016
Сообщений: 2
25.12.2016, 16:24  [ТС]
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
</div>
<div id="first">
<p id="color"><b>ПОЛУЧИТЕ КРЕДИТ НА ЯРКИХ УСЛОВИЯХ!</b></p>
 <form id="forma1" action="application.php" method="POST">                                       
  <input id="in1" type="text" placeholder="Введите Ваше имя" name="clientname" required><br>    
   <input id="in2" type="text" placeholder="Введите Ваш телефон" name="clientphone" required><br>
    <input id="bt1" type="submit" value="ОСТАВИТЬ ЗАЯВКУ">
 </form>                                       
<img src="img/toun3.jpg" id="noColor">
<p id="quetion"><b></b></p>
<p id="motiv"><b>ИЛИ...</b></p>                                                                      
</div>
В CSS указал только стили div
CSS
1
#first{background-image: url(img/ColorCity.jpg); background-size: 100% 100%; border-radius: 0px; margin-left: 0px; margin-bottom: 3%;}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
//первые три строки нужны для эффекта появления текста по буквам
var array="Вам больше по душе серое однообразие?"
var array2="Вам больше по душе серое однообразие?"
var array3="Вы предпочитаете яркие краски?"
var Y=0
var o=0
var z=0
var c=0 
var ligher=0
var ligher2=1
var ligher3=1
var goRight=0
 
window.addEventListener('scroll', Stext)
function Stext(){
scrollingWindow=window.pageYOffset || document.documentElement.scrollTop
if(first.offsetTop-scrollingWindow<=150){window.removeEventListener('scroll', Stext); write()}
}
 
//функция печатает первую строку
function write(){                                                                                                              
quetion.innerHTML+=array[o]
quetion.style.left=(first.offsetWidth-quetion.offsetWidth)/2+"px"
o++
timer534=setTimeout('write()', 120)
if(o>=array.length){clearTimeout(timer534); light();}
}
 
//после того как первая строка напечатана, проявляется текст "ИЛИ"
function light(){
motiv.style.opacity=ligher;
ligher+=0.02
id16=setTimeout('light()',47)
if(ligher>=1){clearTimeout(id16); setTimeout('del()', 1000)}           
}
 
//данная функция удаляет первую строку по буквам  
function del(){
cor=quetion.innerHTML.replace(array2[z],' ')
quetion.innerHTML=cor
quetion.style.left=(first.offsetWidth-quetion.offsetWidth)/2+"px"
z++         
timer537=setTimeout('del()',47)
if(z>array2.length){clearTimeout(timer537); setTimeout('write2()', 500)}
}           
 
//эта функция печатает новую строку по буквам
function write2(){
quetion.innerHTML+=array3[c]
quetion.style.left=(first.offsetWidth-quetion.offsetWidth)/2+"px"
c++
timer539=setTimeout('write2()', 120)
if(c>=array3.length){clearTimeout(timer539); setTimeout('boau()',500)}
}
 
//в этой функции как раз стирается не цветная картинка и исчезает напечатанный текст
function boau(){
noColor.style.clip="rect("+Y+"px, auto, auto, 0px)"; Y+=2;
if(port>=quetion.offsetTop/2){quetion.style.opacity=ligher2; ligher2-=0.05; 
 if(ligher2<=0){quetion.style.display='none'}
}
if(Y>=motiv.offsetTop/1.5){motiv.style.opacity=ligher3; ligher3-=0.05}
TimerId1=setTimeout("boau()",47)  
  if(Y>noColor.offsetHeight){clearTimeout(TimerId1); formPlus(); formPlus2()}}
 
//последние две функции отвечают за появление текста и формы обратной связи         
function formPlus(){
stopForm=(document.documentElement.offsetWidth-color.offsetWidth)/2
color.style.display="block"
color.style.left=color.offsetLeft+10+"px"
t111=setTimeout('formPlus()',41,67)
if(color.offsetLeft>=stopForm){clearTimeout(t111)}
}
 
function formPlus2(){
goRight+=5
forma1.style.display="block"
forma1.style.left=forma1.offsetLeft-goRight+"px"
t112=setTimeout('formPlus2()',41,67)
if(goRight>=20){clearTimeout(t112)}
}
P.S. JS начал изучать самостоятельно и совсем не давно, поэтому просьба не пинать за не логичные названия функций, переменных и таймеров, а так же за глобальные переменные

Спасибо!

Добавлено через 5 часов 1 минуту
Пробуя как-то решить проблему, добавил к <div id="first"> border и вуа-ля, при обновлении страницы и в хроме и в опере все заработало, но этот вопрос меня очень мучает, почему без border и с локального компьютера во всех браузерах все нормально, а если открывать страницу с сайта, то в фаерфокс все работает хорошо что с бордюром что без него, в то время как в остальных браузерах при первой загрузке все как надо, а при обновлении страницы белый фон, но вот если добавить бордюр, то и во всех остальных браузерах все начинает работать хорошо? Может кто-сможет осветить этот момент? И есть ли какие-нибудь другие варианты кроме как добавлять бордюр? Спасибо!
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
26.12.2016, 00:58
Цитата Сообщение от farler Посмотреть сообщение
Есть div, у которого background залит картинкой, в этом же div стоит img с точно такой же картинкой, только черно-белой. По задумке, при прокрутке страницы до нужного блока, срабатывает фунуция и картинка постепенно заливается цветом, этого я достиг с помощью noColor.style.clip="rect("+У+"px, auto, auto, 0px)"
Я бы решил задачу размещением двух img одного под другой и использовав css-transition для opacity, "а не вот это вот всё"...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
26.12.2016, 00:58
Помогаю со студенческими работами здесь

Как сделать прозрачный фон GIF анимации без белого контура
Добрый день! При изготовлении GIF анимации и уменьшения до размера 32 на 34 края анимации белого цвета что совсем изменяет внешний вид...

Не отображается фон
Есть простейший код. На странице задано фоновое изображение. В визуальном редакторе оно отображается, а при дебаге в браузере не хочет. В...

Не отображается фон
Помогите пожалуйста, у меня при просмотре страницы в браузере не отображается фон страницы если использую представление. P.S. страница с...

Не отображается фон
Доброе утро. Пишу змейку на JS, добавил фон, а на странице в браузере его не видно. В чем проблема? Спасибо const canvas =...

Не отображается фон
Не отображается фон на всю область просмотра... да в принципе он вообще не отображается Картинку прилагаю. Код: &lt;!DOCTYPE HTML...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru