https://qwerty.work/tags/%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A2%E3%83%BC%E3%83%88/ Recent content in ラインアート on qwerty.work Hugo -- gohugo.io ja-JP Sun, 26 Feb 2017 00:41:09 +0900 https://qwerty.work/post/2017/02/particlesjs-particleground/ Sun, 26 Feb 2017 00:41:09 +0900 https://qwerty.work/post/2017/02/particlesjs-particleground/ <p>ドメインの所有者を調べるWhoisサイトの<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>を見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。</p> <p><img class="gallery-image" data-flex-basis="324px" data-flex-grow="135" height="444" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/02/particlesjs-particleground/images/No-00.jpg" width="600"></p> <p>「<a class="link" href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener" >particles.js</a>」というやつらしいです。</p> <p>jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>のソースを見ていると以下のソースが気になりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;canvas</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;spiders&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;hidden-xs&#34;</span><span style="color:#f92672">&gt;&lt;/canvas&gt;</span> </span></span></code></pre></div><p>そこで<strong>spiders</strong>を検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。</p> <div class="link-card"> <a href="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" alt="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> <span class="link-card-url">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> </div> </a> </div> <p>ここで<strong>particles.js</strong>ということがわかりました。</p> <h3 id="particlesjs">particles.js </h3> <div class="link-card"> <a href="http://vincentgarreau.com/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://vincentgarreau.com/particles.js/" alt="http://vincentgarreau.com/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://vincentgarreau.com/particles.js/</span> <span class="link-card-url">http://vincentgarreau.com/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/VincentGarreau/particles.js/" alt="https://github.com/VincentGarreau/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/VincentGarreau/particles.js/</span> <span class="link-card-url">https://github.com/VincentGarreau/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://codepen.io/VincentGarreau/pen/pnlso" alt="http://codepen.io/VincentGarreau/pen/pnlso" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://codepen.io/VincentGarreau/pen/pnlso</span> <span class="link-card-url">http://codepen.io/VincentGarreau/pen/pnlso</span> </div> </a> </div> <p><a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>は少し違う動きをしていますが、多分カスタマイズしているんだと思います。</p> <h4 id="カスタマイズの参考">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://liginc.co.jp/191958" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://liginc.co.jp/191958" alt="https://liginc.co.jp/191958" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://liginc.co.jp/191958</span> <span class="link-card-url">https://liginc.co.jp/191958</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" alt="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> <span class="link-card-url">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> </div> </a> </div> <h3 id="particleground">Particleground </h3><p><strong>particles.js</strong>と同じような<strong>Particleground</strong>というのも見つけました。</p> <div class="link-card"> <a href="http://jnicol.github.io/particleground/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jnicol.github.io/particleground/" alt="http://jnicol.github.io/particleground/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jnicol.github.io/particleground/</span> <span class="link-card-url">http://jnicol.github.io/particleground/</span> </div> </a> </div> <h4 id="カスタマイズの参考-1">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://blog.mismithportfolio.com/web/20150129particleground" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blog.mismithportfolio.com/web/20150129particleground" alt="https://blog.mismithportfolio.com/web/20150129particleground" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blog.mismithportfolio.com/web/20150129particleground</span> <span class="link-card-url">https://blog.mismithportfolio.com/web/20150129particleground</span> </div> </a> </div> <h3 id="他にも気になるスクリプトのまとめ">他にも気になるスクリプトのまとめ </h3> <div class="link-card"> <a href="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" alt="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> <span class="link-card-url">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> </div> </a> </div> <div class="link-card"> <a href="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qiita.com/syui/items/f0baae5cdb4bfd193e35" alt="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> <span class="link-card-url">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> </div> </a> </div> <div class="link-card"> <a href="https://ics.media/entry/11172/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/11172/" alt="https://ics.media/entry/11172/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/11172/</span> <span class="link-card-url">https://ics.media/entry/11172/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.webcreatorbox.com/tech/javascript-particles" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/tech/javascript-particles" alt="https://www.webcreatorbox.com/tech/javascript-particles" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/tech/javascript-particles</span> <span class="link-card-url">https://www.webcreatorbox.com/tech/javascript-particles</span> </div> </a> </div> <h4 id="水面に波紋が広がるようなもの">水面に波紋が広がるようなもの </h4><p><a class="link" href="https://jquery.com/" target="_blank" rel="noopener" >jQuery</a>のファイルと<a class="link" href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener" >jQuery Ripples</a>のファイルを読み込めばOK。</p> <div class="link-card"> <a href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://sirxemic.github.io/jquery.ripples/" alt="http://sirxemic.github.io/jquery.ripples/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://sirxemic.github.io/jquery.ripples/</span> <span class="link-card-url">http://sirxemic.github.io/jquery.ripples/</span> </div> </a> </div>