スクロールに応じてCSS keyframesライクな書き方でアニメーションを付与できる・「Motus」
Motusはスクロールに応じて任意の要素にアニメーションを付与する為のライブラリです。非依存なので単体で使えます。アニメーションはCSS keyframesライクな書き方ができますのでCSSの知識がある方なら扱いやすいと思います。 const customStartPointAnimation = new Motus.Animation( new Motus.Point(document.getElementById('start-point')), new Motus.Point(document.getElementById('end-point')), document.getElementById('cube-startend'), { 50: { width: '200px', marginLeft: '100px', }, 100: { width: '100px', marg
スマホやタブレットの場合にテーブルが横スクロールできることをお知らせしてくれるスクリプト「ScrollHint」 | TechMemo
ScrollHintは、スマホやタブレットの場合に、横にはみ出したテーブルを横スクロール可能にし、横スクロールができることを視覚的にわかるように教えてくれるスクリプトです。 デモは以下ページで確認できますので、スマホやタブレットでアクセスしてみてください。 デモページを見る ScrollHintの使い方 ステップ1. ScrollHintのCSSとスクリプトの読み込み まずは、ScrollHintのCSSとスクリプトをサイトに読み込みましょう。以下を<head>～</head>に追加します。 <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.2/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
シンプルな棒グラフを生成できる「graphite」 – bl6.jp
graphiteはシンプルな棒グラフを生成できるJavaScriptライブラリです。コンパクトなファイルサイズで、無駄な装飾もなくシンプルでとても見やすいのがいいですね。 graphiteの実際のデモは以下のページから確認できます。 デモ デモではシンプルでミニマルなデザインの棒グラフが2つ設置されています。棒グラフにはそれぞれ個別の数値も表示されていて、視覚的にわかりやすいだけでなく数値もピンポイントでチェックできるのが便利ですね。 また、幅や高さ、タイトル、バーカラー、ラベルフォント、バーフォント、タイトルフォントなどはオプションを用いることでセッティングできます。 具体的なオプション項目は、width、height、fixPadding、title、barColor、labelFont、barFont、titleFontです。 シンプルながらもカスタマイズ性も有しているので、自サイト
AOSを使ってみる
スクロールで要素をアニメーション表示させるプラグイン「AOS」を使ってみます。 jQueryなどは使用していないので、単体で使えます。 使い方 下記からダウンロードできます。 GitHub – michalsnik/aos: Animate on scroll library HTML内に必要なファイルを読み込みます。 <link rel="stylesheet" href="./aos.css" /> <script src="./aos.js"></script> CDNも用意されているようなので、こちらでも問題ありません。 <link href="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css"> <script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
CSSやJavaScriptで画像の保存を防止する方法4種類 ｜ Tips Note by TAM
画像の保存を完全に防ぐことはできませんが、右クリックなどから画像を保存されにくくする実装方法を4種類試してみましたのでご紹介します。 ■目次 画像の上に要素をかぶせる pointer-eventsを使う -webkit-touch-calloutとuser-selectを使う contextmenuとdragstartを使う 1. 画像の上に要素をかぶせる 画像の上に要素をかぶせて、画像をクリックできないようにする方法です。 See the Pen img-protect01 by tam_yi (@tam_yi) on CodePen. .img-protectの疑似要素を画像と同じ大きさにして、画像の上にかぶせるようにしています。 <div class="img-protect"> <img src="http://via.placeholder.com/160x120" class=
スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」 | TechMemo
ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量でわずか8.8KBしかありません。 動きについては、以下デモサイトでご確認いただけます。 デモページを見る 今回は、このScrollRevealを使ってパララックス効果を加える方法をご紹介したいと思います。 ScrollRevealの導入手順 ステップ1. ScrollRevealのダウンロードと設置 まずはGitHubからScrollRevealをダウンロードします。ダウンロードしたファイル一式を解凍し、scrollreveal.min.jsをサーバーにアップロードしてください。 サーバーにファイルを設置したら、scrollreveal.min.jsを読み込みます。 <s
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法
ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }; 「window.onpageshow」は以下の条件ときにイベントが発生します。 最初にページを読み込んだとき 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき モバイル OS で凍結されたページを復元したとき ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき 「event.persisted」はキャッシュが有効化されているとき。 「window.location.reload()」でブラウザリロードを実行します。 ※追記：上記の方法で
【Alert by JavaScript and CSS】カスタムCSSとJSによる通知アラートのコードスニペット10選！【後編】
６．CSS3アニメーションメッセージ 簡単なツールチップのダイアログを使用してInfoboxエフェクトを作成し、わずか35行のJavaScriptだけで設定できる基本的なスクリプトにつなげます。 古いバージョンのInternet Explorerでは全体的にフォールバックがあるため、すべてのユーザーにとって安全な選択です。 ７．Formrun.jsダイアログ コピー/ペーストやリスタイルを実行できる実用的なUIで、おまけに日本語です。 formrun.jsというシンプルなタイトルのこのペンは、純粋なCSSダイアログモーダルを使用して、ログインフォームを送信するときのエラーメッセージを処理します。 最も良い点は、チェックアウトページやユーザー設定ページのようなフォームにこれを適用できることです。 ８．カスタムアラート 楽しい小さなアラートボックスです。 多くのCSSとJavaScriptを使
テキストタイピングエフェクトを実装できる「TyperText」 – bl6.jp
TyperTextはテキストタイピングエフェクトを実装できるjQueryプラグインです。テキストをタイピングしているようなアニメーションで表示できます。シンプルなアニメーションながらも、文字が入力されていくその動きに思わず注目してしまいますね。 以下のページからTyperTextの実際のデモ動作をチェックできます。 デモ デモでは文字がタイピングされているようなアニメーションで次々に表示されていきます。シンプルでスタイリッシュなアニメーションがとても素敵ですね。 ただ単にテキストを表示するだけだと見過ごされてしまう場合がありますが、このように文字に動きを加えることで注目度もアップするはず。ユーザーにどうしても見てほしいテキストや文章がある場合、またはちょっとしたアクセントを加えたい場合なんかに活躍してくれそうです。 使い方もかなりシンプルで簡単に実装できるので、気になる人はぜひ「Typer
Google画像のようなアコーディオンプラグイン「MG Space」 – bl6.jp
MG SpaceはGoogle画像のようなjQueryアコーディオンプラグインです。サムネイルを並べたグリッドスタイルやスライダー、画像とテキストを組み合わせたものなど、いろんなパターンがあります。 以下のページからMG Spaceの実際のデモをチェックできます。 デモ デモでは、「Thumbnail Galleries」「Sliders」「Or really anything」の3つのタイプが用意されています。それぞれの項目にある「CLICK ME!」ボタンをクリックすると、その下に各タイプのコンテンツが表示されます。 Thumbnail Galleriesはグリッドスタイルで綺麗に並べられたサムネイル画像が表示され、Slidersは1枚の大きい画像が表示されて左右の矢印ボタンから前後にスライドできるようになっています。 また、Or really anythingでは左側に画像が、右側に
コードを覚えなくてもWordPress編集ができるようになるためのカンペコレクション
WordPressには、いくつかのプログラム言語が利用されています。 主に使うものといえば、以下のような言語です。 WordPress関数（PHP） PHP HTML CSS JavaScript（jQuery） ただ、これだけの言語があると、初めてWordpressに触れる人には、覚えるのが大変なのではないかと思います。 というか、ある程度プログラム経験がある僕でも、揮発性の高い脳を利用しているため、全く覚えられません。 ということで今回は、Wordpressで「これどうすればいいんだったっけ？」「あれなんて関数だったっけ？」なんて時に見ると便利なカンニングペーパー（チートシート）の紹介です。 WordPressチートシート WordPressで重要な部分の覚え書きというか、これだけ覚えておけばある程度Wordpressを使えるようになるチートシートです。 日本語版 WordPress
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
依存性のないシンプルで簡単なモーダルライブラリ「dndod」 – bl6.jp
dndodはjQueryなどへの依存性のないシンプルで簡単なJavaScriptモーダルライブラリです。サクサクした動作でストレスなく快適に操作できます。オプションもいろいろ揃っているのでカスタマイズしたい人にも最適です。 以下、dndodの実際のデモページになります。 デモ デモページにはアラートの表示やコールバックを使ったもの、アニメーションがないタイプなど、いろんなサンプルが用意されています。 各場所に表示されている「Show demo」をクリックすることで、そのタイプのデモ動作をチェックできます。 例えば、一番上にある「dndod.alert(msg, options)」を見てみると、上からモーダルウィンドウが降りてくるデモを確認できます。モーダルウィンドウが表示されている間は背景にうっすらオーバーレイがかかっています。 真ん中の「OK」か右上のバツ印、もしくはモーダルウィンドウ外
フロントエンドエンジニア必見！傑作jQueryプラグイン５０選【後編】
JavaScriptのフレームワークには様々なものがありますが、jQueryは間違いなく最も人気があります（BuiltWithによると、現在100万サイトのうち78％以上で使用されています）。 jQueryの目的は、本当なら長いコードを必要とするJavaScriptの関数を1行のコードで呼び出すことができるメソッドにバンドルすることで、管理したりコーディングしたりしやすくすることです。jQueryは軽量で、その豊かな拡張可能性により、あらゆる機能を実現するために自由に利用できるjQueryプラグイン利用可能です。 テキストエフェクトプラグイン jQuery.fontFlex.jsはフォントサイズを動的に変更するための軽量プラグインです。 t.jsはタイプライターのようなテキスト効果を実現するためのプラグインです。 CurvedTextは曲線に沿ってテキストを配置するためのプラグインです。
[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js
jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 Glide.jsの特徴 Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたスライダー・カルーセルです。軽量で快適に動作し、カスタマイズ性にも優れています。 依存性はなし スライダー・カルーセルに必要なものはすべて含まれています。 超軽量 22kb（gzip: 7kb)にすべての機能が搭載されています。 モジュール式 スクリプトはモジュール式。必要のない機能を削除
![[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff1d16e9316c76742c63906c5f9dd35a2bf6ab85/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018041501.png)
scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介（脱jQuery）
当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript（jQuery）で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています
軽量・フレキシブル・高速なスライダー＆カルーセル実装「Glide.js」 – bl6.jp
Glide.jsは軽量・フレキシブル・高速なJavaScript ES6によるスライダー＆カルーセルを実装できます。jQueryなどへの依存関係もなく、22KB以下（圧縮版で7KB以下）と軽量なところがいいですね。 以下、Glide.jsの実際のデモになります。 デモ デモではスライダー・カルーセルが横幅いっぱいに表示されていて、自動でスライドしていくようになっています。左右には前後移動できる矢印ボタンも設置されているので、ここから任意でスライドさせることも可能です。 また、スライダーの上にマウスオーバーするとカーソルが手のアイコンになり、ドラッグすることで前後にスライドさせるといったこともできます。 マークアップもシンプルに記述できるので手軽に使えるのもグッドです。ファイル容量も軽量なことから、スマホやタブレットなどモバイルからの閲覧にも最適ですね。 ライセンスはMITになっています。
クラスを指定するだけ！Webフォームで郵便番号から住所を自動入力してくれるスクリプト「YubinBango」 | TechMemo
YubinBangoは、Webフォームで郵便番号を入れると住所が自動的に入力されるライブラリです。郵便事業株式会社(旧郵政省)が提供しているデータを利用して住所を取得しています。 YubinBangoの使い方 使い方は非常に簡単で、スクリプトを読み込んでフォームにクラスを追加するだけです。 <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <form class="h-adr"> <span class="p-country-name" style="display:none;">Japan</span> 〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br> <inpu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
