javascript - How do I make a video played using stack of pictures in react or gatsby

Question

Here is the implementation: http://aaronporter.co/

I know this is a silly question, but it really blows my mind when I see that effect, and when I inspect it uses pictures, it makes sense since it enables to reverse the pictures that are being animated based on what is clicked.

Can anyone help me to figure out how to do it in reactjs ?

Here it is the soruce code of the html :

<div class="block content text-align-center scene_element">
            <span class="logo">A<span class="collapse"><i>a</i><i>r</i><i>o</i><i>n</i></span>.</span>
        </div>
    </div>


                                        <script type='text/javascript' src='http://aaronporter.co/wp-includes/js/wp-embed.min.js?ver=4.4.24'></script>


                </div>
            </div>


            <div class="video_bg_wrap" data-transition="">
                    <img id="current_frame" class="video_bg" src="http://aaronporter.co/wp-content/themes/aaron/media/full_quality/Main000.jpg"/>
                <canvas id="grain"></canvas>
                <canvas id="videoCanvas" class="video_bg"></canvas>
            </div>

and here it is the js :

!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11./),i=b.querySelectorAll("iframe.wp-embedded-content");for(c=0;c<i.length;c++)if(d=i[c],!d.getAttribute("data-secret")){if(f=Math.random().toString(36).substr(2,10),d.src+="#?secret="+f,d.setAttribute("data-secret",f),g||h)a=d.cloneNode(!0),a.removeAttribute("security"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.removeAttribute("style"),"height"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document);

Answer 1

等待大神答复