Leave a smoother, random effect

Navigation
2

I have the following effect: 

.fundo
{ 
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
width:500px;
height: 300px;
border: 1px solid #ddd;
background: #fff url("https://lh3.googleusercontent.com/-RTxvEA_h-QE/VL0rqFeJUOI/AAAAAAAAAFA/FnwV5m9cSM0/w1920-h1200/BingWallpaper-2015-01-18.jpg") 50% 50%;
animation: anima-fundo 20s ease 1s infinite alternate;
-webkit-animation: anima-fundo 20s ease 1s infinite alternate;
-moz-animation: anima-fundo 20s ease 1s infinite alternate;
transition: 8s all;
-webkit-transition: 8s all;
-moz-transition: 8s all; }

@keyframes anima-fundo {
   0%   { background-position: 50% 50% }
   25%  { background-position: 55% 55% }
   50%  { background-position: 60% 45% }
   75%  { background-position: 40% 30% }
   100% { background-position: 60% 40% }
}

@-webkit-keyframes anima-fundo {
   0%   { background-position: 50% 50% }
   25%  { background-position: 55% 55% }
   50%  { background-position: 60% 45% }
   75%  { background-position: 40% 30% }
   100% { background-position: 60% 40% }
}

@-moz-keyframes anima-fundo {
   0%   { background-position: 50% 50% }
   25%  { background-position: 55% 55% }
   50%  { background-position: 60% 45% }
   75%  { background-position: 40% 30% }
   100% { background-position: 60% 40% }
}
<div class="fundo"></div>

I wanted to know how to leave it more smooth and random, if you observe, it is always going on an equal diagonal, in the softness, notice that it is half 'square' when change of direction is very dry and breaks the legal effect.

So how do you make it softer and random? I already 'fuçei' in everything there but I could not make progress.

    
asked by anonymous 29.12.2015 / 16:20

2 answers

2

See if that's what I wanted, the randomness I got with JQuery. 

setInterval(function(){
    var random1 = (Math.floor(Math.random()*(60-50))+50);
    var random2 = (Math.floor(Math.random()*(55-45))+45);
    $('.fundo').animate({
  
        'background-position-x': random1 + "%",
        'background-position-y': random2 + "%"
  
    },  2500)
}, 100)
.fundo {
  width: 500px;
  height: 300px;
  border: 1px solid #ddd;
  background: #fff url("https://lh3.googleusercontent.com/-RTxvEA_h-QE/VL0rqFeJUOI/AAAAAAAAAFA/FnwV5m9cSM0/w1920-h1200/BingWallpaper-2015-01-18.jpg") 50% 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="fundo"></div>
    
29.12.2015 / 16:44
1

Here is an example using blur as you described it. 

var timer1;
$(document).ready(function(){



    timer1 = setInterval(function(){
        var rnd1 = (Math.floor(Math.random()*100)+1);
        var rnd2 = (Math.floor(Math.random()*100)+1);

        //Aplica o blur na imagem
        $('.fundo').css("-webkit-filter", "blur(2px)");

        //Anima imagem
        $('.fundo').animate({
          'background-position-x': rnd1 + "%",
          'background-position-y': rnd2 + "%"
        },1500);

        //Verifica o termino da animacao com promisse().
        $('.fundo').promise().done(function() {
            $('.fundo').css("-webkit-filter", "blur(0px)");
        });

     },2000);

});

You can see this example working here . I'm applying the blur at the beginning of the animation and shot the blur using .promisse () .

    
29.12.2015 / 17:05
Line break when typing entries how to select only 1 record of each id