Ripple in html UniLabel or UniImage...

thiagopedro · April 29, 2018

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.)

mhmda · April 29, 2018

Hi,

You are mixing a lot of things: html, .js code, .js files, css all in same place !!

You have to separate thing and put them in the right place.

This may help you http://forums.unigui.com/index.php?/topic/7934-animate-controls-using-greensock-gsap-library/?hl=gsap

Sign In

Ripple in html UniLabel or UniImage...

Recommended Posts

thiagopedro

Link to comment

Share on other sites

mhmda

Link to comment

Share on other sites

Join the conversation

Browse

Activity