Leave effect smoother and random

Asked

Viewed 150 times

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 I make it smoother and more random, if you observe, it is always going on an equal diagonal, on the issue of softness, notice that it is half 'square' when changing direction is very dry and breaks the cool effect..

So, how can I make it smoother and more random? I’ve been through everything but I can’t make progress.

css
  • 1

    What do you mean by "Blur", an impression of speed when moving?

  • blur is a blur effect, I will remove it from the post, because his problem was not working in all browsers (in some they got very bad), but I was able to fix.

  • 1

    I know what Blur is, rsrs, my doubt was just how to apply it, but how will you get it out...

  • ah yes kkk, would just apply it in div, but already applied :p

  • If my answer answered your question, mark it as correct, please.

2 answers

2


See if this is what you 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>
<div class="fundo"></div>

  • I’ll take a look, and leave my taste, thank you! :)

  • 1

    I edited the answer leaving the softer effect limiting the random of 60 a 50 and 55 a 45 , changing the animation time and eliminating the animation lines of css.

1

Follow an example using Blur as you described.

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 am applying Blur at the beginning of the animation and shooting the Blur using .promise().

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.