Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2019, 11:18
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 62

Плавно изменить цвета
Есть страничка, нужно что бы плавно изменялись цвета у элементов, с темного на более светлые и назад к темным, с определённым интервалом, например в 1000милисекунд. Для простоты взял один див с фоном и бордер и два спана, для всего указал только по пять цветов для простоты.

<style>
div.g { background: #e1e1e1; border: 1px solid #cacaca;} /* background #dbdbdb; #d5d5d5; #cfcfcf; #c9c9c9; border #c4c4c4; #bebebe; #b8b8b8; #b2b2b2; */
span.a { color: #009900; } /* #00a500; #00b400; #00c300; #00d200; */
span.b { color: #0000ff; } /* #1e1eff; #3c3cff; #5a5aff; #7878ff; */
</style>
<div class="g">
<span class="a">test</span><br>
<span class="b">test</span><br>
</div>


Или если возможно как реализовать, что бы можно было указать начальный и конечный цвета, количство оттенков градиента и интервал с которым цвета меняются, возможно ли реализовать подобное?
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2019, 11:31
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,751

Лучше обойтись без скриптов.
https://developer.mozilla.org/ru/doc...CSS/transition
https://developer.mozilla.org/ru/doc..._CSS_animatciy
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2019, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,442

m~r.Nemo,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:100px;
    height:100px;
    -webkit-animation: color 5s ease-in-out infinite;
	-moz-animation: color 5s ease-in-out infinite;
	-o-animation: color 5s ease-in-out infinite;
	animation: color 5s ease-in-out infinite;
  }

  @keyframes color {
      0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }

}
@-webkit-keyframes color {
  0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }
}


  </style>
</head>

<body>
<div></div>

</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2019, 12:02
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 62

А разве все браузеры поддерживают? Иногда без скриптов не обойтись...
Ответить с цитированием
  #5 (permalink)  
Старый 09.01.2019, 12:19
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 62

Конечно предпочтительнее что бы скрипт определил 50-100 оттенков градиента, вручную это немалый кусок работы, определить все оттенки для десятка-двух элементов...
Ответить с цитированием
  #6 (permalink)  
Старый 09.01.2019, 14:34
Аватар для AntonMs
Кандидат Javascript-наук
Отправить личное сообщение для AntonMs Посмотреть профиль Найти все сообщения от AntonMs
 
Регистрация: 25.01.2015
Сообщений: 147

Я бы так сделал если через скрип.
var color = ["FF0000", "FFA500", "FFFF00", "008000", "0000FF", "000080", "800080", "..."];
for (let index = 0; index < color.length; index++) {
    //а тут с каждой итерацией применяй новый цвет c нужной задержкой. 
}
Ответить с цитированием
  #7 (permalink)  
Старый 09.01.2019, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,442

m~r.Nemo,
https://javascript.ru/forum/jquery/5...tml#post355108
Ответить с цитированием
  #8 (permalink)  
Старый 11.01.2019, 15:48
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 62

рони, я не про это имел ввиду, к примеру есть блочный элемент (див) высотой 1пиксель и шириной 60-100, задан фон градиентом, возможно ли узнать код цвета в каждой точке?
Ответить с цитированием
  #9 (permalink)  
Старый 11.01.2019, 16:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,442

m~r.Nemo,
напрямую метода не знаю.
http://qaru.site/questions/93665/jav...r-mouse-cursor
Ответить с цитированием
  #10 (permalink)  
Старый 11.01.2019, 19:59
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 62

рони,
ясно, в принципе с css-анимацией разобрался, это то что мне надо, но остался вопрос как реализовать анимацию на яваскрипт, типа

Сообщение от рони Посмотреть сообщение
m~r.Nemo,
<style>
span.U_003A { color: #9c9c9c; }
#clock.x  span.U_003A { color: #333399; }
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
 var date = new Date();
 var hour=date.getHours();
 var minute=date.getMinutes();
 var sec=date.getSeconds();
 var day=date.getDate();
 var month=date.getMonth();
 var year=date.getFullYear();
 var weekday=date.getDay();
 var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
 var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
только для текста фона и т д если есть не два цвета а все необходимые оттенки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как плавно изменить значение css-свойства? ogurchik Элементы интерфейса 7 24.06.2015 17:09
Как получить значение цвета из color picker razorg1991 jQuery 1 06.10.2014 09:06
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Плавно скрыть текст, изменить его и плавно показать gh321 jQuery 3 13.11.2013 16:38
Изменения цвета картинки stieve Общие вопросы Javascript 40 23.11.2010 19:47