Two effects with javascript in one image

1

I want to put two effects with javascript in an image. the First would make the image appear to appear once and from there it would be glowing frequently. Is it possible?

<div id="logo"> 
                  <a href="index.html">

                      <img  id="efeitoluz"  src="https://cdn1.iconfinder.com/data/icons/ninja-things-1/720/ninja-background-256.png"alt="Demo" width="256" height="256" align="top" alt="Marca da W6 116x152"  /> 

                      </a> </div>

Javascript

 $(window).load(function() {                
                  var colorsArray = new Array('#FBFAFA','#FBFAFA','#FBFAFA','#FBFAFA');
                  var colorInd = 0;
                  var directionArray = new Array('y');
                  var directionInd = 0;

                  $("#efeitoluz").shiningImage({
                      color: '#FBFAFA',
                      onLoopComplete: function()
                      {
                          colorInd++;
                          if (colorInd == colorsArray.length) {colorInd = 0;}

                          if (directionInd == directionArray.length) {directionInd = 0;}

                          $("#efeitoluz").data('shiningImage').settings.color = colorsArray[colorInd];
                          $("#efeitoluz").data('shiningImage').settings.direction = directionArray[directionInd];
                      },
                      opacity : 300
                  });

              });




;(function($, window, document) {
  var animation = 'tile';
  var effect = '';
  var options = {};
  var lastChecked;
  var lastChecked2;

  function animate()
  {
    if($.isEmptyObject(options))
      $('.code').text("$('.efeitoentrada').animate('" + animation + "');");
    else
      $('.code').text("$('.efeitoentrada').animate('" + animation + "', " + JSON.stringify(options, null, 2) +  ");");
    $('.efeitoentrada').animate(animation, options);
  }

  function update()
  {
    var isCombine = $('.combine').is(':checked');
  }

  function click()
  {
    var element = $('.' + $(this).attr('for'));
    var animationId = element.attr('id');
    $('.option-' + animationId).toggleClass('disable');
    if(!element.is(':checked'))
    {
      if(element.parents('.effect').length > 0)
        lastChecked = animationId;
      else
        lastChecked2 = animationId;
    }
  }

  function addButton(key, container)
  {
    var checkbox = $('<input type="checkbox" class="animation-check"/>');
    checkbox.attr('id', container + key).attr('animation', key);
    var label = $('<label class="animation input"></label>');
    label.text(key).attr('for', container + key).click(click);
    $('.' + container).append(checkbox).append(label);
  }

  $(document).ready(function() {
    for(var key in $.animations)
    {
      if(key == 'fn' || key == 'tile')
        continue;
      addButton(key, 'effects');
      addButton(key, 'alternates');
    }

    $('.submit').click(animate);
    $('body').on('change', 'input,select', update);

    var img = $('.efeitoentrada')[0];
    if(img.complete || img.readyState === 4)
     blind();


    else
      $('.efeitoentrada').bind('load', blind);


    $('.blind').click(blind);


  });

  function blind() 
  {
    options = {
      duration: 4000,
      rows: 50,
      sequent: false,
      effect: 'slideFromDown'

    };
    animate();
  }


})(jQuery, window, document);
    
asked by anonymous 01.06.2016 / 21:45

1 answer

3

You can do this using only css:

HTML:

<img src="image.jpg">

CSS:

img{
  -webkit-animation: fade 2s 0s 1, bright 1s 2s infinite alternate;
}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes bright {
    from {-webkit-filter: brightness(1);}
    to {-webkit-filter: brightness(3);}
}

Structure:

-webkit-animation: [animation name] [duration] [delay] [number of iterations]

Remembering that:

-webkit-animation = animation
-webkit-filter = filter

Example working .

Info about CSS animations

Info on CSS filters

EDIT

Example using tile animation as suggested in comments.

    
01.06.2016 / 23:15