アニメーション on qwerty.work

【CSS】マウスホバー時に『キラーん』と光るような効果のボタン作成メモ

Sun, 30 Oct 2022 21:29:22 +0900

サンプル

マウスが重なると光るようなアニメーションが表示されます。

.btn { display: flex; justify-content: center; align-items: center; background-color: #bdfa3e; width: 28.4rem; height: 11rem; border-radius: 5.5rem; font-size: 3.8rem; font-weight: 900; box-shadow: 0 1rem 1rem rgba(0,0,0,.16); overflow: hidden; position: relative; text-decoration: none; } .btn::before { content: ‘’; display: block; width: 5rem; height: 300%; top: 50%; position: absolute; background-color: #fff; transform: translate(-500%,-50%) rotate(-45deg); transition: transform .5s ease; } .btn:hover::before { transform: translate(500%, -50%) rotate(-45deg); }

ボタン

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bdfa3e;
    width: 28.4rem;
    height: 11rem;
    border-radius: 5.5rem;
    font-size: 3.8rem;
    font-weight: 900;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.16);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.btn::before {
    content: '';
    display: block;
    width: 5rem;
    height: 300%;
    top: 50%;
    position: absolute;
    background-color: #fff;
    transform: translate(-500%,-50%) rotate(-45deg);
    transition: transform .5s ease;
}
.btn:hover::before {
  transform: translate(500%, -50%) rotate(-45deg);
}

その他参考サイト

https://coco-factory.jp/ugokuweb/move01/7-1-40/ https://coco-factory.jp/ugokuweb/move01/7-1-40/

https://photopizza.design/shiny_btn_animation/ https://photopizza.design/shiny_btn_animation/

https://dezanari.com/css-shiny-button/ https://dezanari.com/css-shiny-button/

https://give-shot.jp/tokyocss/button-shine/ https://give-shot.jp/tokyocss/button-shine/

https://switch-box.net/shine-button.html https://switch-box.net/shine-button.html

【CSS/JS】スクロールに合わせてコンテンツをふわっと下から表示

Wed, 28 Sep 2022 20:04:10 +0900

スクロールしてコンテンツが表示領域に入ったら、コンテンツの内容が下からフワ～っとアニメーション効果付きで表示されるやる。

Waypoints.js & Animate.css

Waypoints.jsとAnimate.cssを併用して実現します。Waypoints.jsはjQueryが必要です。

Waypoints.js

指定したHTML要素が画面内へ入った際、あらかじめ指定した関数を呼び出してくれます。

http://imakewebthings.com/waypoints/ http://imakewebthings.com/waypoints/

上記のページのダウンロードボタンからダウンロードZIPを展開し、「libフォルダ」内のjquery.waypoints.jsまたはjquery.waypoints.min.jsを読み込んで使用します。

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="jquery.waypoints.min.js"></script>

リファレンス

http://imakewebthings.com/waypoints/api/waypoint/ http://imakewebthings.com/waypoints/api/waypoint/

Animate.css

HTML要素にクラスを指定するだけでアニメーションを付けてくれるCSSライブラリ。

https://animate.style/ https://animate.style/

ダウンロードしたzipファイルを解凍後、animate.cssまたはanimate.min.cssをHTMLの内で読み込みます。

<link rel="stylesheet" href="animate.css">

ダウンロードページ

https://github.com/animate-css/animate.css/releases/tag/3.5.1 https://github.com/animate-css/animate.css/releases/tag/3.5.1

サンプルソース

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Animate Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  <style>
    body {
      background: repeating-linear-gradient(0deg,
      #ffffff,
      #ffffff 40px,
      #ededed 40px,
      #dedede 80px);
    }
    
    .boxes {
      margin: 80vh auto;
    }
    
    .box {
      border: 3px solid #666;
      width: 10em;
      padding: 10px;
      margin: 4em auto;
      text-align: center;
    }
    
    .animated {
      /*最初は非表示*/
      opacity: 0;
    }
  </style>
</head>
<body>
  <div class="boxes">
  <div class="box animated">box 01</div>
  <div class="box animated">box 02</div>
  <div class="box animated">box 03</div>
  <div class="box animated">box 04</div>
  <div class="box animated">box 05</div>
  <div class="box animated">box 06</div>
  <div class="box animated">box 07</div>
  <div class="box animated">box 08</div>
  <div class="box animated">box 09</div>
  <div class="box animated">box 10</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="main.js"></script>
</body>
</html>

Javascript部分

// animatedクラスの付いた要素にwaypointを登録
$('.animated').waypoint({
  handler(direction) {

  // 要素が画面中央に来るとここが実行される
  if (direction === 'down') {

    /*
    * 下方向のスクロール
    * イベント発生元の要素にfadeInUpクラスを付けてアニメーションを開始
    */
    $(this.element).addClass('fadeInUp');

    /*
    * waypointを削除することで、この要素に対しては
    * これ以降handlerが呼ばれなくなる
    */
    this.destroy();
    }
  },

  // 要素が画面中央に来たらhandlerを実行
  offset: '50%',
});

CSS？SVG？Canvas？動く背景アニメーションのサンプルや参考ページ

Thu, 10 Feb 2022 09:31:06 +0900

こういう背景ってどうやって作るんだろう？

以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。

https://fukurou-labo.co.jp/recruit/ https://fukurou-labo.co.jp/recruit/

「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。

参考ページ

背景に幾何学的なアニメーションを表示するparticles.js

Sun, 26 Feb 2017 00:41:09 +0900

ドメインの所有者を調べるWhoisサイトのdomaintools.comを見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。

「particles.js」というやつらしいです。

jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、domaintools.comのソースを見ていると以下のソースが気になりました。

<canvas id="spiders" class="hidden-xs"></canvas>

そこでspidersを検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。

http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor

ここでparticles.jsということがわかりました。

particles.js

http://vincentgarreau.com/particles.js/ http://vincentgarreau.com/particles.js/

https://github.com/VincentGarreau/particles.js/ https://github.com/VincentGarreau/particles.js/

http://codepen.io/VincentGarreau/pen/pnlso http://codepen.io/VincentGarreau/pen/pnlso

domaintools.comは少し違う動きをしていますが、多分カスタマイズしているんだと思います。

カスタマイズの参考

https://liginc.co.jp/191958 https://liginc.co.jp/191958

https://qiita.com/sapisapi/items/17a1ee6fc539fb104397 https://qiita.com/sapisapi/items/17a1ee6fc539fb104397

Particleground

particles.jsと同じようなParticlegroundというのも見つけました。

http://jnicol.github.io/particleground/ http://jnicol.github.io/particleground/

カスタマイズの参考

https://blog.mismithportfolio.com/web/20150129particleground https://blog.mismithportfolio.com/web/20150129particleground

他にも気になるスクリプトのまとめ

http://www.nxworld.net/tips/background-custom-and-effect-scripts.html http://www.nxworld.net/tips/background-custom-and-effect-scripts.html

http://qiita.com/syui/items/f0baae5cdb4bfd193e35 http://qiita.com/syui/items/f0baae5cdb4bfd193e35

https://ics.media/entry/11172/ https://ics.media/entry/11172/

https://www.webcreatorbox.com/tech/javascript-particles https://www.webcreatorbox.com/tech/javascript-particles

水面に波紋が広がるようなもの

jQueryのファイルとjQuery Ripplesのファイルを読み込めばOK。

http://sirxemic.github.io/jquery.ripples/ http://sirxemic.github.io/jquery.ripples/

アニメーション on qwerty.work

【CSS】マウスホバー時に『キラーん』と光るような効果のボタン作成メモ

サンプル

HTML

CSS

その他参考サイト

【CSS/JS】スクロールに合わせてコンテンツをふわっと下から表示

Waypoints.js & Animate.css

Waypoints.js

リファレンス

Animate.css

ダウンロードページ

サンプルソース

HTML部分

Javascript部分

CSS？SVG？Canvas？動く背景アニメーションのサンプルや参考ページ

こういう背景ってどうやって作るんだろう？

参考ページ

動くバブルみたいなやつはこれっぽい？

動く波はこれっぽい？

静的ウェーブをオンラインで簡単に作れるサイト

その他

SVGアニメーション

CSSでマスクやアニメーションの参考

SVGのストライプなどのパターンを作るサイト

背景に幾何学的なアニメーションを表示するparticles.js

particles.js

カスタマイズの参考

Particleground

カスタマイズの参考

他にも気になるスクリプトのまとめ

水面に波紋が広がるようなもの