Я пытаюсь создать фоновый анимацию с jQuery, который изменяется от одного градиента к другому. Я знаю, что вы можете использовать функцию .animate() для изменения сплошных цветов фона, но это также можно сделать для градиентов?jQuery анимация div цвет фона градиент?
Вот хороший пример из некоторых старых комментариев в формате Digg. Я ищу, чтобы сделать что-то вроде этого анимации от зеленого до желтого
оживляющего фон непосредственно практически невозможно с JQuery, по крайней мере, я не мог придумать способа. Существует способ, хотя с этим:
-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;
Это гарантирует, что существует переход. Можно, например, сделать в CSS:
.background_animation_element{
-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;
background: rgb(71,234,46);
background: -moz-linear-gradient(top, rgba(71,234,46,1) 0%, rgba(63,63,63,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
background: -webkit-linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
background: -o-linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
background: -ms-linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
background: linear-gradient(top, rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f',GradientType=0);
}
.background_animation_element.yellow{
background: rgb(247,247,49);
background: -moz-linear-gradient(top, rgba(247,247,49,1) 0%, rgba(63,63,63,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,49,1)), color-stop(100%,rgba(63,63,63,1)));
background: -webkit-linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
background: linear-gradient(top, rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f',GradientType=0);
}
И, используя JQuery, либо добавить или удалить желтый класс:
$('.background_animation_element').addClass('yellow');
Это обеспечило бы постепенный переход благодаря свойству длительности перехода в Файл CSS.
Я действительно думал об этом, но я не уверен, что jQuery будет по-прежнему использовать css-переходы при динамическом добавлении класса. – Jake
О да, это так.Я на самом деле делаю это на некоторых моих проектах. Это не jQuery, хотя это делает переходы. – arik
Так что я просто наткнулся на это с аналогичной проблемой, но я не могу заставить ее работать. Я взял ответ @ arik-so и положил его [здесь] (http://jsfiddle.net/PottyMonster/geXgH/) Переход происходит мгновенно, почти так же, как переход между градиентами не поддерживается. Я отредактировал это, и он отлично работает с насыщенным фоном. –
Мне тоже это нужно, я искал его в Google. Но не нашел решения, поэтому я решил это. Я с этим грязным способом, но работал :) Это мой код:
interval = 0;
gradient_percent = 0;
interval_value = 5;
var interval_gradient = setInterval(function(){
if(interval == 10) clearInterval(interval_gradient);
gradient_percent += interval_value;
$('.slider-text').css('background', 'linear-gradient(to right, #373535 '+gradient_percent+'%,rgba(0,0,0,0) 100%)');
++interval;
}, 50);
оживляющий фон с JQuery, безусловно, возможно, как показано в этом CodePen (не мое творение, но очень ловкий): http://codepen.io/quasimondo/pen/lDdrF
В примере CodePen используются некоторые слабые битхиттинг и другие трюки для определения цветов, но он просто определяет функцию (updateGradient), которая изменяет CSS фона, а затем завертывает его в setInterval.
Большой вынос из updateGradient является следующее:
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"),
to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
Тогда просто установить цветовые переменные динамически, и вы подливку.
Могу ли я использовать несколько цветов в атрибутах from() to() для обработки более сложных градиентов (т. Е. Радиальных)? –
Попробуйте это отлично работает -
div{
display:block;
width:500px;
height:250px;
background: linear-gradient(270deg, #509591, #7bc446, #c0de9e, #b9dca4);
background-size: 800% 800%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}<div></div>источник - https://www.gradient-animator.com/
Вы можете попробовать Backgroundor, это JQuery плагин для grandient анимации.
Просто так просто напишите $('#yourDivId').backgroundor();, и он будет работать! он получил множество вариантов, таких как изменение степени градиента во время анимации.
См. Это ** [JQuery background animate] (http://stackoverflow.com/questions/4701156/jquery-background-animate) ** и ** [JQuery цвет фона не работает] (http: // stackoverflow .com/questions/1694295/jquery-background-color-animate-not-working) ** –