作成者別アーカイブ: Coding_team

手軽にアニメーションを実装できるanime.js

1809_co

こんにちは、ウェブラボ技術メモです。 最近、おしゃれなローディング画面が多くなりましたね。 そこで今回は、アニメーションが手軽に実装できる「anime.js」を紹介します。 まずデモページはこちら ■概要 様々なアニメーションが収録されたプラグインです。 種類はこちらをご覧ください。 また、animejsを使った作品がCODEPENで見ることができます。 見…続きを読む

  • このページを共有する

APIキーの取得方法

tecmemo180801

こんにちは、ウェブラボクリエイターズメモです。 以前のクリエイターズメモでGoogle Maps APIを使用したGoogle Mapのカスタマイズをご紹介しました。 Googleは、2018年7月よりAPIキーの仕様変更について発表しました。 APIキーを設定するだけでなく、請求先アカウントとAPIキーの紐づけを行わなければ、Google Mapが表示され…続きを読む

  • このページを共有する

Viewer.jsで簡単にフォトギャラリーを実装する

こんにちは、ウェブラボクリエイターズメモです。 普段ネットで買い物をしてるとき、商品のフォトギャラリーをクリックして切り替えるのが一般的かと思います。 しかし、いちいちクリック操作するのは面倒だと思いませんか? もしスライダーやフォトギャラリーをキーボードで操作できたら非常に楽になると思います。 今回はキーボードで画像を切り替えることができるスクリプト「Vi…続きを読む

  • このページを共有する

ブラウザにデータを保存する方法

sumne

こんにちは、ウェブラボ技術メモです。 最近、Cookie以外でブラウザにデータを保存する方法がないか調べたところ、便利なAPIを見つけたのでご紹介します。 localStorageとSessionStorage localStorageとSessionStorageは、HTML5で新たに追加されたAPIです。フロンエンドでブラウザにデータを保存することができ…続きを読む

  • このページを共有する

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…続きを読む

  • このページを共有する