복붙노트

[JQUERY] 정지는 GIF 애니메이션 온로드, 마우스 오버에 활성화를 시작합니다

JQUERY

정지는 GIF 애니메이션 온로드, 마우스 오버에 활성화를 시작합니다

해결법

  1. 1.아니, 당신은 이미지의 애니메이션을 제어 할 수 없습니다.

    아니, 당신은 이미지의 애니메이션을 제어 할 수 없습니다.

    당신이 아니라 각 이미지, 애니메이션, 다른 하나의 두 가지 버전이 필요합니다. 호버에 쉽게 한 이미지에서 다른 이미지로 변경할 수 있습니다.

    예:

    $(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

    시간이 흐를하고, 가능성이 변경됩니다. kritzikatzi 이미지의 두 가지 버전이 유일한 옵션이 아닙니다 가지고, 지적으로, 당신은 분명히 애니메이션의 첫 번째 프레임의 복사본을 생성하기 위해 캔버스 요소를 사용할 수 있습니다. 이 모든 브라우저에서 작동하지 않습니다, 예를 들어 IE 8은 캔버스 요소를 지원하지 않습니다.

  2. 2.나는이 대답은 늦게 실현,하지만 난이 문제에 오히려 간단한 우아하고 효과적인 솔루션을 발견하고 필요 여기에 게시 할 느꼈다.

    나는이 대답은 늦게 실현,하지만 난이 문제에 오히려 간단한 우아하고 효과적인 솔루션을 발견하고 필요 여기에 게시 할 느꼈다.

    그러나 나는 명확하게 할 필요가 느끼는 한 가지이, 마우스 오버에 GIF 애니메이션을 시작로 마우스를 일시 정지하고 다시 마우스를 움직일 때 계속하지 않는다는 것입니다. 즉, 불행하게도, GIF를 함께 할 불가능하다. (이 이미지의 캐릭터와 함께 할 수있는 GIF처럼 다른 후 하나를 표시하지만, 시간이 소요 될 것입니다 스크립트에 떨어져 당신의 GIF를의 모든 프레임을 복용하고 모든 URL을 복사)

    어떻게 내 솔루션이하는 일은 마우스 커서를 가져다 대면 이동 시작과 같은 이미지의 외모를 만들 수 있습니다. 당신은 당신의 GIF 이미지의 첫 번째 프레임을 만든 다음 웹 페이지에 해당 이미지를 넣어 마우스 오버에 GIF와 이미지를 교체하고 이동을 시작 것 같습니다. 그것은로 마우스 재설정합니다.

    그냥 HTML의 헤드 섹션에서이 스크립트를 삽입 :

    $(document).ready(function()
{
    $("#imgAnimate").hover(
        function()
        {
            $(this).attr("src", "GIF URL HERE");
        },
        function()
        {
            $(this).attr("src", "STATIC IMAGE URL HERE");
        });
});

    그리고 애니메이션을 적용 할 이미지의 img 태그에이 코드를 넣어.

    id="imgAnimate"

    이 이미지가 이동을 시작처럼 보일 것이다, 그래서 이것은, 마우스 오버에있는 GIF를로드합니다. (지프는 랜덤 프레임을 시작할 것이기 때문에 더 GIF 다음에 정지 화상의 전환이 고르지 않기 때문에 지프 온로드로드보다)

    하나 개 이상의 이미지를 바로 스크립트 함수를 작성 다시 :

    <script type="text/javascript">

var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";

$(document).ready(function() {

  $(".img-animate").each(function () {

     $(this).hover(
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
        },
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));  
        }
     );

  });

});
</script>

</head>
<body>

<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >

</body>

    그 코드 블록은 정적 이미지와 호버,로드를 표시하고 GIF의를 표시합니다 (당신이 나에게 준 정보를 기반으로) 작동하는 웹 페이지입니다. 당신이해야 할 모든 URL이 정적 이미지의 삽입이다.

  3. 3.나는 freezeframe.js 플러그인 jQuery를 당신을 위해 유용하게 사용할 수있다 생각합니다. freezeframe.js는 jQuery를 플러그인에 자동으로 GIF를 다시 시작에 애니메이션에 마우스를 가져가 일시 정지됩니다.

    나는 freezeframe.js 플러그인 jQuery를 당신을 위해 유용하게 사용할 수있다 생각합니다. freezeframe.js는 jQuery를 플러그인에 자동으로 GIF를 다시 시작에 애니메이션에 마우스를 가져가 일시 정지됩니다.

    난 당신이 쉽게 대신 페이지로드 작동하도록 그것을 적용 할 수 있습니다 같아요.

  4. 4.가장 좋은 방법은 당신이 그것을 중지 할 때와 GIF를 대체 정지 이미지가 아마입니다.

    가장 좋은 방법은 당신이 그것을 중지 할 때와 GIF를 대체 정지 이미지가 아마입니다.

    <img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >

$(window).load(function() {
  $(".anim").src("stillimage.gif");
});

$(".anim").mouseover(function {
  $(this).src("animatedimage.gif");
});

$(".anim").mouseout(function {
  $(this).src("stillimage.gif");
});

    당신은 아마 당신이 각 이미지에 할당 할 수있는 정지에 대한 경로 및 애니메이션 GIF를 포함하는 두 배열을 갖고 싶어.

  5. 5.당신은 당신이 필름과 같은 단계에 표시하는 긴 스트라이프를함으로써이 문제를 해결할 수 있습니다. 그럼 당신은 어떤 프레임에 필름을 중지 할 수 있습니다. 아래의 예 (http://jsfiddle.net/HPXq4/9/에서 바이올린 가능) :

    당신은 당신이 필름과 같은 단계에 표시하는 긴 스트라이프를함으로써이 문제를 해결할 수 있습니다. 그럼 당신은 어떤 프레임에 필름을 중지 할 수 있습니다. 아래의 예 (http://jsfiddle.net/HPXq4/9/에서 바이올린 가능) :

    마크 업 :

     <div class="thumbnail-wrapper">
     <img src="blah.jpg">
 </div>

    CSS를 :

    .thumbnail-wrapper{
   width:190px;
   height:100px;
   overflow:hidden;
   position:absolute;
}
.thumbnail-wrapper img{
   position:relative;
   top:0;
}

    JS :

    var gifTimer;
var currentGifId=null;
var step = 100; //height of a thumbnail
$('.thumbnail-wrapper img').hover(
   function(){
      currentGifId = $(this)
      gifTimer = setInterval(playGif,500);
   },
   function(){
       clearInterval(gifTimer);
       currentGifId=null;
   }
);

var playGif = function(){
   var top = parseInt(currentGifId.css('top'))-step;
   var max = currentGifId.height();
   console.log(top,max)
   if(max+top<=0){
     console.log('reset')
     top=0;
   }
   currentGifId.css('top',top);
}

    분명,이 훨씬 더 최적화 할 수 있습니다,하지만 난 가독성을 위해이 예제를 단순화

  6. 6.GIF 이미지의 애니메이션을 다시 시작하기 위해, 당신은 코드를 사용할 수 있습니다 :

    GIF 이미지의 애니메이션을 다시 시작하기 위해, 당신은 코드를 사용할 수 있습니다 :

    $('#img_gif').attr('src','file.gif?' + Math.random());

  7. 7.여기에 작업 해결책을 발견 : https://codepen.io/hoanghals/pen/dZrWLZ

    여기에 작업 해결책을 발견 : https://codepen.io/hoanghals/pen/dZrWLZ

    여기 JS :

    var gifElements = document.querySelectorAll('img.gif');

for(var e in gifElements) {

var element = gifElements[e];

if(element.nodeName == 'IMG') {

    var supergif = new SuperGif({
        gif: element,
        progressbar_height: 0,
        auto_play: false,
    });

    var controlElement = document.createElement("div");
    controlElement.className = "gifcontrol loading g"+e;

    supergif.load((function(controlElement) {
        controlElement.className = "gifcontrol paused";
        var playing = false;
        controlElement.addEventListener("click", function(){
            if(playing) {
                this.pause();
                playing = false;
                controlElement.className = "gifcontrol paused";
            } else {
                this.play();
                playing = true;
                controlElement.className = "gifcontrol playing";
            }
        }.bind(this, controlElement));

    }.bind(supergif))(controlElement));

    var canvas = supergif.get_canvas();     
    controlElement.style.width = canvas.width+"px";
    controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
    var containerElement = canvas.parentNode;
    containerElement.appendChild(controlElement);

 }
}

  8. 8.마크 크레이머의의 더 우아한 버전은 다음을 수행하는 것입니다 :

    마크 크레이머의의 더 우아한 버전은 다음을 수행하는 것입니다 :

    function animateImg(id, gifSrc){
  var $el = $(id),
    staticSrc = $el.attr('src');
  $el.hover(
    function(){
      $(this).attr("src", gifSrc);
    },
    function(){
      $(this).attr("src", staticSrc);
    });
}

$(document).ready(function(){
  animateImg('#id1', 'gif/gif1.gif');
  animateImg('#id2', 'gif/gif2.gif');
});

    또는 더 나은 사용 데이터 속성에 다음과 같습니다

    $(document).ready(function(){
  $('.animated-img').each(function(){
    var $el = $(this),
      staticSrc = $el.attr('src'),
      gifSrc = $el.data('gifSrc');
    $el.hover(
      function(){
        $(this).attr("src", gifSrc);
      },
      function(){
        $(this).attr("src", staticSrc);
      });
  });
});

    그리고 IMG 엘 뭔가 같을 것이다 :

    <img class="animated-img" src=".../img.jpg" data-gif-src=".../gif.gif" />

    참고 :이 코드는 안된하지만 잘 작동합니다.

  9. 9.내가 알고 것과 하나의 방법이있다.

    내가 알고 것과 하나의 방법이있다.

    2 개 이미지, 첫 번째 프레임 (또는 무엇이든 당신이 원하는) 지프의 실제 GIF와 먼저 JPEG 되세요.

    장소에 JPEG로 페이지를로드와 마우스를 통해 GIF와 JPEG를 대체합니다. 당신은 당신이 원하는 경우 GIF를 미리로드 또는 큰 크기의 경우 GIF로드 후와 JPEG를 대체하는 동안 로딩을 표시 할 수 있습니다.

    당신이 중지 프레임에서 재생을 다시 시작 한 후, 이상 마우스의 GIF 놀이를 밖으로 마우스를 중지하고 같이 양방향 선형 원하는 경우,이 자바 스크립트 + GIF 콤보 수행 할 수 없습니다.

  10. 10.이 같은 접미사를 추가 :

    이 같은 접미사를 추가 :

    $('#img_gif').attr('src','file.gif?' + Math.random());

    브라우저는 새로운 이미지를 사용자가 페이지에 액세스 할 때마다 다운로드하도록 강요한다. 또한 클라이언트 캐시를 신속하게 충전 될 수있다.

    여기에 내가 크롬 49, 파이어 폭스 (45) 테스트에서 대체 솔루션을 다음과 같습니다. 는 CSS 스타일 시트에서이 같은 '없음'으로 표시 속성을 설정합니다 :

    #img_gif{
  display:'none';
}

    문 삽입 '.ready $ (문서)'는 외부 :

    $ (창) .load (함수 () {$ ( '#의 img_gif')) (보여준다;.});

    사용자가 페이지에 액세스 할 때마다, 애니메이션은 모든 요소의 전체 부하 후 시작됩니다. 이것은 내가 GIF 및 HTML5 애니메이션을 sincronize 할 수있는 유일한 방법입니다.

    점에 유의하시기 바랍니다: 있는 GIF 애니메이션 ( "F5"를 눌러 같은) 페이지를 새로 고침 한 후 다시 시작되지 않습니다. 은 "$ (문서) .ready"문은 "$ (창) .load"동일한 효과를 생성하지 않습니다. 속성 "가시성" "디스플레이"의 같은 효과를 생성하지 않습니다.

  11. 11.관련 대답은, 당신은 GIF의 재생 횟수를 지정할 수 있습니다. 아래 GIF는 그와 연관된 3 플레이 (10초 타이머 30 제 2의 재생 총)을 갖는다. 30 초 페이지로드 경과 한 후에는 "0시 1분"에서 멈 춥니 다.

    관련 대답은, 당신은 GIF의 재생 횟수를 지정할 수 있습니다. 아래 GIF는 그와 연관된 3 플레이 (10초 타이머 30 제 2의 재생 총)을 갖는다. 30 초 페이지로드 경과 한 후에는 "0시 1분"에서 멈 춥니 다.

    3 플레이 백을 다시 시작 페이지를 새로 고침

    당신은 GIF 자체를 수정해야합니다. 쉬운 도구는 GIF이 재생 https://ezgif.com/loop-count을 수정 여기를 찾을 수 있습니다.

    랜딩 페이지에 대한 조치의 단일 루프 재생 GIF의 예를 보려면, 하나의 재생 GIF https://git-lfs.github.com/를 사용하여이 사이트를 체크 아웃

  12. 12.CSS 필터는 크롬에서 재생에서 GIF를 중지 할 수 있습니다

    CSS 필터는 크롬에서 재생에서 GIF를 중지 할 수 있습니다

    단지 추가

    filter: blur(0.001px);

    당신의 img 태그에 다음 GIF 크롬 성능 문제를 통해 부하에 얼어 붙었다 :)

  13. 13.이 대답은 일을했다 https://codepen.io/hoanghals/pen/dZrWLZ에서 HTML / CSS / 자바 스크립트 콤보를 지적 Sourabh,의에 구축합니다. 나는 이것을 시도, 나는 내 사이트에 시도 CSS와 자바 스크립트를 포함하는 완전한 웹 페이지를 만들었다. CodePens가 사라지는하는 습관을 가지고, 나는 여기에서 그것을 보여하기로 결정했다. 또한 하나 개의 요구를 할 수있는 최소를 설명하기 위해 단순화 제거 - 투 - 필수 버전을 표시하고 있습니다.

    이 대답은 일을했다 https://codepen.io/hoanghals/pen/dZrWLZ에서 HTML / CSS / 자바 스크립트 콤보를 지적 Sourabh,의에 구축합니다. 나는 이것을 시도, 나는 내 사이트에 시도 CSS와 자바 스크립트를 포함하는 완전한 웹 페이지를 만들었다. CodePens가 사라지는하는 습관을 가지고, 나는 여기에서 그것을 보여하기로 결정했다. 또한 하나 개의 요구를 할 수있는 최소를 설명하기 위해 단순화 제거 - 투 - 필수 버전을 표시하고 있습니다.

    또한 한 가지주의해야합니다. 자바 스크립트 Sourabh 복사물 상기 링크에서의 코드는 자바 스크립트 생성자 SuperGif 지칭 (). 나는 Sourabh 그 설명 생각하지 않으며, 어느 쪽도 CodePen는하지 않습니다. 쉬운 검색이하는 BuzzFeed에 정의되어 있음을 보여 주었다 / https://github.com/buzzfeed/libgif-js#readme에서 다운로드 할 수 있습니다 libgif-JS. 빨간색 화살표가 아래로 가리키고 있는지 제어를위한 봐 후 녹색 "코드"버튼을 클릭합니다. (N.B. 당신은 빨간색 화살표 표시되지 않습니다. 내가 어디 있는지 방법을 보여주는입니다)

    메뉴는 zip 파일을 다운로드하는 등 다양한 옵션을 제공 나타납니다. 그것을 다운로드하고 당신의 HTML 디렉토리 나 그 하위 디렉토리에 압축을 풉니 다.

    다음으로, 나는 내가 만든 그 두 페이지를 보여 드리겠습니다. 먼저 CodePen로부터 유도된다. 두 번째는 필수, 그리고 쇼에 당신이 SuperGif를 사용하기 위해 필요한 최소한의 박탈된다.

    그래서 여기에 첫 번째 페이지의 전체 HTML, CSS, 자바 스크립트입니다. HTML의 머리에서 zip 파일에서 필요한 파일입니다 libgif.js에 대한 링크입니다. 그런 다음, HTML의 몸은 고양이 사진에 대한 몇 가지 텍스트로 시작하고, https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif에서 애니메이션 고양이 GIF에 대한 링크를 다음과 같습니다.

    그런 다음 몇 가지 CSS를 계속합니다. CodePen는 모르는 사람을 위해, CSS로 전처리되어야한다 SCSS를 사용합니다. 그래서 코드에 무엇이 아래 정품 CSS, 즉 일을했습니다.

    마지막으로, 자바 스크립트가있다.

    <html>
<head>
<script src="libgif-js-master/libgif.js"></script> 
</head>

<body>

<div style="width: 600px; margin: auto; text-align: center; font-family: arial">
  <p>
And so, the unwritten law of the internet, that any 
experiment involving video/images must involve cats in 
one way or another, reared its head again. When would 
the internet's fascination with cats come to an end? 
Never. The answer is "Never".
</p> 
  <img src='https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif' class='gif' />
</div>

<style>
img.gif {
  visibility: hidden;
}

.jsgif {
  position: relative;
}

.gifcontrol {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: background 0.25s ease-in-out;
  z-index: 100;
}
.gifcontrol:after {
  transition: background 0.25s ease-in-out;
  position: absolute;
  content: "";
  display: block;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}
.gifcontrol.loading {
  background: rgba(255, 255, 255, 0.75);
}
.gifcontrol.loading:after {
  background: #FF9900;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.gifcontrol.playing {
  /* Only show the 'stop' button on hover */
}
.gifcontrol.playing:after {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  border-left: 20px solid #FF9900;
  border-right: 20px solid #FF9900;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
}
.gifcontrol.playing:hover:after {
  opacity: 1;
}
.gifcontrol.paused {
  background: rgba(255, 255, 255, 0.5);
}
.gifcontrol.paused:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #ff9900;
}
</style>

<script>
var gifElements = document.querySelectorAll('img.gif');

for(var e in gifElements) {
  
    var element = gifElements[e];
    
    if(element.nodeName == 'IMG') {
    
        var supergif = new SuperGif({
            gif: element,
            progressbar_height: 0,
            auto_play: false,
        });

        var controlElement = document.createElement("div");
        controlElement.className = "gifcontrol loading g"+e;

        supergif.load((function(controlElement) {
            controlElement.className = "gifcontrol paused";
            var playing = false;
            controlElement.addEventListener("click", function(){
                if(playing) {
                    this.pause();
                    playing = false;
                    controlElement.className = "gifcontrol paused";
                } else {
                    this.play();
                    playing = true;
                    controlElement.className = "gifcontrol playing";
                }
            }.bind(this, controlElement));
        
        }.bind(supergif))(controlElement));
    
        var canvas = supergif.get_canvas();     
        controlElement.style.width = canvas.width+"px";
        controlElement.style.height = canvas.height+"px";
    controlElement.style.left = canvas.offsetLeft+"px";
        var containerElement = canvas.parentNode;
        containerElement.appendChild(controlElement);
    
  }
}
</script>

</body>
</html>

    내 웹 사이트에 페이지를 넣어를 표시 할 때 상단이처럼 보였다 :

    나는 분홍색 버튼을 누를 때 페이지가이로 변경하고, GIF는 애니메이션을 시작했다. (고양이 바퀴의 물이 수도꼭지에서 떨어지는.)

    이를 위해, 여기에 두 번째, 간단한 페이지입니다. 첫 번째는 달리,이 모양을 변경하는 멋진 재생 / 일시 정지 제어가없는 : 그것은 단지 두 개의 버튼이 있습니다. 유일한 코드는 버튼 관련이없는, 그리고 버튼 사이에 공간을 삽입하는 중 비활성화하는 것입니다 즉 필수적이지 않습니다.

    <html>

<head>
<script src="libgif-js-master/libgif.js"></script>
</head>

<body>

<button type="button" onclick="play()"
        id="play_button"
        style="margin-right:9px;"
>
Play
</button>
      
<button type="button" onclick="pause()"
        id="pause_button"
>
Pause
</button>

<img src="https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif" 
     id="gif" 
/>

<script>
var gif_element = document.getElementById( "gif" );
    
var supergif = new SuperGif( {
             gif: gif_element,
                          progressbar_height: 0,
                          auto_play: false
               } );

supergif.load();

function play()
{
  var play_button = document.getElementById( "play_button" );
  play_button.disabled = true;

  var pause_button = document.getElementById( "pause_button" );
  pause_button.disabled = false;
 
  supergif.play();
}

function pause()
{
  var play_button = document.getElementById( "play_button" );
  play_button.disabled = false;

  var pause_button = document.getElementById( "pause_button" );
  pause_button.disabled = true;

  supergif.pause();
}

pause_button.disabled = true;
</script>

</body>
</html>

    libgif-JS에서이 플러스 example.html 파일은 사람이 시작하기에 충분합니다.

    14. from https://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 사용하여 IFrame을의 DOM을 노출?  (0) 2020.10.15
[JQUERY] 키를 입력 시뮬레이션 JQuery와 (또는 순수 JS)의 테스트를 누르면  (0) 2020.10.15
[JQUERY] 하나 개의 어레이에 병합이 JSON / 자바 스크립트 배열  (0) 2020.10.15
[JQUERY] 어떻게 배열의 요소의 모든 항목의 인덱스를 찾는 방법은?  (0) 2020.10.15
[JQUERY] 부모 자식 상대적으로 요소의 인덱스를 가져옵니다  (0) 2020.10.15
,

티스토리툴바