Jump to content

Ripple in html UniLabel or UniImage...


thiagopedro

Recommended Posts

Tentei carregar de diversas formas, mas ainda não consigo sucesso na animação, do código abaixo: (I've tried loading in a number of ways, but I still can not succeed in animation, from the code below:)

<html>

  <head>
    <style>
      .ripples-wrapper {
        position: relative;
        display: inline-block;
      }

      .ripples-wrapper img {
        display: block;
        visibility: hidden;
        /* Hidden, but keep place */
      }

      .ripples-img {
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
      }

    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.4.2/jquery.ripples.js"></script>  
  </head>

  <body>

    <img class="ripples-image" src="http://bloximages.newyork1.vip.townnews.com/wisconsin.golf/content/tncms/assets/v3/editorial/1/23/1233a6ba-d0d8-11e5-9a3c-fbcece8553f7/56bcafd946c28.image.jpg?resize=400%2C400" alt="StackOverflow logo" />
    <script type="text/javascript">
      $(window).load(function() {
        $('img.ripples-image').each(function() {
          $image = $(this);
          $image.wrap('<div class="ripples-wrapper"></div>').after('<div class="ripples-img" style="background-image:url(\'' + $image.attr('src') + '\')"></div>');
        });

        // Set effect
        $('.ripples-img').ripples();
      });

    </script>
  </body>

</html>

Tentei direto para UniLabel (Html), mas não funcionou a animação. (I tried straight to UniLabel (Html), but did not work the animation.)

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...