作成者別アーカイブ: Coding_team

スクロールの判定とCSSアニメーションを使ってみる

tecmemo1802

こんにちは、ウェブラボ技術メモです。 今回はjsでスクロールの判定を行い、それに応じてCSSでアニメーションしてみます。 DEMOはこちら それでは実際に実装していきましょう。 まず、HTMLのbody内でアニメーションを効かせたい要素にクラスを与えます。 ■HTML body内

次にhead…続きを読む

  • このページを共有する

画面いっぱいのスライダーを実装する

tecmemo1801

こんにちは、ウェブラボクリエイターズメモです。 今回は、多機能なスライダー実装できるjQueryプラグイン「slick」を紹介したいと思います。 最近個人的にスライダーを色々カスタマイズすることがあり、その際に使ってみてとても便利だったので備忘録としてここに書いときます。 まずは公式サイトからプラグインをダウンロードしてきます。ヘッダーのメニューに「get …続きを読む

  • このページを共有する

スクロール時にアニメーションを実装できるScrollTrigger.js

02

こんにちは、ウェブラボ技術メモです。 今回は、画面スクロール時のアニメーション「ScrollTrigger.js」を紹介します。 まずデモページはこちら ■概要 スクロール時にアニメーションさせたい要素が表示範囲に入っているか、いないかを判定しクラスの付け替えをしてくれるプラグインです。 ■実装方法 1. まずプラグインをダウンロードします。(ScrollT…続きを読む

  • このページを共有する

SVGでグラフを描写できるChartist.js

tecmemo1711

こんにちは、ウェブラボ技術メモです。 今回はSVGでグラフを描写できる「Chartist.js」を紹介いたします。 DEMOはこちら よく見かける円グラフなどが、簡単に設定できてしまいます。 ちょっと数値を変更したいといった修正作業もお手軽なので魅力的ですね。 それでは実際に実装していきましょう。 以下からプラグインをダウンロードしてください。 github…続きを読む

  • このページを共有する

フォームのメールアドレス入力欄に補完機能をつける

tecmemo1710

こんにちは、ウェブラボクリエイターズメモです。 10月に入ってから急に寒くなってきましたね、体調管理には気をつけていきましょう。 さて今回はフォームのメールアドレス入力欄に補完機能をつけるjQueryプラグイン「email-autocomplete」を紹介したいと思います。 では早速実装していきます。 まずは以下からプラグインをダウンロードしましょう。 →g…続きを読む

  • このページを共有する

キャッシュの解決方法

demo01

こんにちは、ウェブラボ技術メモです。 先日、GIFアニメをJSで表示させたところ、 キャッシュでうまくループされませんでした…(´;ω;`) 今回は、更新時の厄介者、キャッシュの解決方法についてまとめてみました。 1. キャッシュを削除するタグを入れる HTMLに入れるだけで簡単にキャッシュが残らなくなるそうです。 [crayon-5dadcc2b23183…続きを読む

  • このページを共有する

カラフルなメッシュ画像を表示させる「Trianglify」

tecmemo1708

こんにちは、ウェブラボ技術メモです。 今回はカラフルなメッシュ画像を表示させる「Trianglify」を使用してみようと思います。 設定を比較するDEMOを作成しました。 DEMOはこちら 様々なパターンがありますが、短いコードで簡単に設定できてしまいます。 それでは実際に実装していきましょう。 以下からプラグインをダウンロードしてください。 github …続きを読む

  • このページを共有する

波紋を作るjQueryプラグイン「jQuery Ripples」

tecmemo1707

こんにちは、ウェブラボ技術メモです。 今回はマウスに合わせて波紋を生み出すjQueryプラグイン「jQuery Ripples」を紹介したいと思います。 まずはDEMO用意致しましたのでご覧下さい。 →DEMO 背景画像部分でマウスを動かしたり、クリックするとキレイな波紋が出ますね。 一見難しそうに見えますが簡単に実装することが可能です。 では解説していきま…続きを読む

  • このページを共有する

グラデーションのアニメーションが簡単に作れるGranim.js

こんにちは、ウェブラボ技術メモです。 最近、アニメーションがついたメインビジュアルが流行っていますよね。 そこで今回はメインビジュアルに使えそうな、グラデーションのアニメーションが簡単にできるgranim.jsを実装してみたいと思います。 グラデーションも2017年webデザインのトレンドなので、ぜひお試しください! まず、下記サイトの「DOWNLOAD」か…続きを読む

  • このページを共有する

要素をブルブル震わせるプラグイン「CSShake」

tec1705

こんにちは、ウェブラボ技術メモです。 今回はテキストや画像といったHTML要素をブルブル震わせるプラグイン「CSShake」を使用してみようと思います。 まず公式サイトの一番下までスクロールし、「Download」ボタンからCSSファイルをダウンロードします。 「CSShake」公式サイト 公式サイトでも紹介されているような動きを利用して、簡単なDEMOを作…続きを読む

  • このページを共有する