作成者別アーカイブ: Coding_team

Google Mapのデザインをカスタマイズする

tecmemo1805

こんにちは、ウェブラボ技術メモです。 「Google Map」は、会社のアクセスページなどで 地図を公開する手段として、多くのホームページで使われていますね。 オシャレなデザインのホームページを作成する際に Google Mapも色味を変えれたら…と思ったことはありませんか? 今回はGoogle Maps APIを使用して Google Mapのデザインをカ…続きを読む

  • このページを共有する

Parallax.jsで簡単にパララックスを実装する

tecmemo1804

こんにちは、ウェブラボクリエイターズメモです。 最近個人的にパララックスなどWebサイトに動きを付ける機会が多くあり、いいプラグインなど無いかな? と思い探してみたところ見つけたのでその紹介をしたいと思います。 →まずは作成したDEMOをご覧下さい スクロールすると背景が少しずつ動いていく良く見るパララックスですね。 これがとても簡単に実装できてしまうんです…続きを読む

  • このページを共有する

calc()関数について

img_calc

こんにちは、ウェブラボ技術メモです。 今回はcalc()関数についてご紹介します。 ■calc()関数とは? 簡単に言うとプロパティの値を計算式で導出できる関数のことです。 対応ブラウザなど詳しくはこちらをご覧ください。 ■使い方 calc()関数は様々な活用シーンがあります。 例えば、 横幅100%を三等分したい時には、以下のように記述し並列に均等配置する…続きを読む

  • このページを共有する

スクロールの判定と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-5e2fd10f35fdb…続きを読む

  • このページを共有する

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

tecmemo1708

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

  • このページを共有する