作成者別アーカイブ: Coding_team

可愛い!思わず使いたくなるSVGアニメーション

blog

こんにちは、ウェブラボ技術メモです。 今回は、最近可愛いなぁ〜と思ったSVGアニメーションの紹介をしたいと思います。   参考サイトはこちらです。 このWebサイトはフリーランスのデザイナーさんが運営しているcodropsというWebサイトの作品の一つです。 イラストも素敵ですが、主張しすぎないSVGを使ったアニメーションがいいですね。 私も早速使…続きを読む

  • このページを共有する

簡単な操作で画像を上書きできるプラグイン「Enable Media Replace」

tecmemo181126

こんにちは、ウェブラボクリエイターズメモです。   WordPress構築の仕事が増えてきて、どのような画面設計にすれば更新がしやすくなるのか考えるのが最近の楽しみとなっております。   さて皆さんはWordPress(以下WP)で、アップされている画像の内容を上書きしようと思ったとき、どうしていますか? WPにおいては、ローカル環境でフ…続きを読む

  • このページを共有する

「続きを読む」ボタンで要素の開閉を簡単に組込めるプラグインReadmore.js

readmore

こんにちは、ウェブラボ クリエーターズメモです。   近年、スマホの普及率もあがり、Webサイトを閲覧するときもスマホメインとなってきています。スマホでブログやまとめサイト等の記事を見ている時、文字ががずらっと並んでいてはあまり読む気にもならないですよね?ですが、短い導入でその記事が気になるのであれば、続きを読みたいと思いますよね!   …続きを読む

  • このページを共有する

手軽にアニメーションを実装できる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%を三等分したい時には、以下のように記述し並列に均等配置する…続きを読む

  • このページを共有する