JavaScript - 株式会社オンズ

タグ "JavaScript" を含む投稿を表示中：57件

【JavaScript】ビューポートに入った要素をアニメーション表示する［Animon］の使い方

Entry Description

2021年10月17日 2021年10月18日

開発ブログ

JavaScript

1776文字：約3分

issei 株式会社オンズ

ブラウザのビューポートに要素が入ったことを検知して、アニメーションで表示させるJavaScriptライブラリ［Animon］の使い方を紹介します。 JavaScriptファイルの容量はなんと「0.75kB」と超軽量。仕組みは、Googleも推奨している Intersection Observer を利用してDOM要素... 【JavaScript】ビューポートに入った要素をアニメーション表示する［Animon］の使い方続きを読む →
初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします

Entry Description

2021年9月20日 2021年9月20日

開発ブログ

book, CSS, JavaScript, jQuery, wisdom

1620文字：約3分

issei 株式会社オンズ

「ウェブサイトのアニメーションの基礎を網羅している書籍がほしい」そんな想いを抱く初心者ウェブクリエイターの方々に超絶オススメの書籍があります。『動くWebデザインアイディア帳』です。久保田涼子さんと杉山彰啓さんによる共著。とある場所で献本いただいたものを拝読したのですが、アニメーションの基礎と実践を、とても分か... 初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします続きを読む →
【JavaScript】ラジオボタンのチェックをすべて外す方法

Entry Description

2021年3月12日 2021年9月20日

開発ブログ

JavaScript

950文字：約2分

onze 株式会社オンズ

ラジオボタンは通常、何も選択されていない状態ですが、一度どれかを選択してチェックマークをつけると「何も選択していない状態」には戻れないんですよね。そこでJavaScriptを使って「どのラジオボタンにもチェックが入っていない状態」に戻す機能を作りました。 HTML まずはhtmlを用意します。 <form id... 【JavaScript】ラジオボタンのチェックをすべて外す方法続きを読む →
【JavaScript】非推奨の「document.write()」の代替方法

Entry Description

2020年10月2日 2020年10月28日

開発ブログ

JavaScript

1247文字：約3分

issei 株式会社オンズ

これ。つい先日まで知らなかったんですが。 JavaScriptの「document.write()」を使うのは現在はNGとされているようですね。 W3CではHTML5でのdocument.write()の使用を非推奨としています。またGoogleの PageSpeed Insights でも、document.wr... 【JavaScript】非推奨の「document.write()」の代替方法続きを読む →
【jQuery】右クリックを禁止する方法

Entry Description

2019年12月1日 2019年12月1日

開発ブログ

JavaScript, jQuery

583文字：約1分

onze 株式会社オンズ

ウェブサイトで右クリックを禁止して、コンテキストメニューを表示させなくする方法を紹介します。ウェブサイト全体で右クリックを禁止にする方法なにがなんでも、とにかく右クリックを禁止にする方法です。以下のコードで実装できます。 $(function(){ $(document).on("contextmenu",fun... 【jQuery】右クリックを禁止する方法続きを読む →
JavaScriptが無効な環境でのスタイルシートの読み込み

Entry Description

2019年3月26日 2019年3月26日

開発ブログ

JavaScript

412文字：約1分

onze 株式会社オンズ

タイトルのとおり。 JavaScriptが無効なブラウザや、都合によりJavaScriptが使えない環境でのみ、特別にCSSを読み込みたいときの方法を紹介します。解決策はとても簡単で、「noscript」タグを使います。 <head> ... <link rel="stylesheet&q... JavaScriptが無効な環境でのスタイルシートの読み込み続きを読む →
【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法

Entry Description

2019年3月16日 2019年3月16日

開発ブログ

JavaScript, jQuery

602文字：約2分

onze 株式会社オンズ

スマートフォンやタブレット端末で、デバイスを回転させて画面が縦横に切り替わったときに、イベントの判定処理を行う方法を紹介します。回転イベント「orientationchange」を使うデバイスを回転させたときにイベントを発火させるには「orientationchange」を使います。 jQueryでの記述 $(wi... 【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法続きを読む →
【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方

Entry Description

2019年1月18日 2019年1月18日

開発ブログ

JavaScript

1962文字：約4分

onze 株式会社オンズ

今日こちらで紹介するJavaScriptのプラグイン［Magic Grid］は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、... 【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方続きを読む →
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法

Entry Description

2018年11月2日 2021年10月17日

開発ブログ

JavaScript, jQuery

293文字：約1分

onze 株式会社オンズ

ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }... ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方

Entry Description

2018年2月1日 2018年2月1日

開発ブログ

JavaScript

3522文字：約6分

onze 株式会社オンズ

今日ご紹介する［Tippy.js］は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示されるようになります。サンプルは以下より。 Tippy.js : https:/... 【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方続きを読む →
映画『マトリックス』の背景エフェクトを canvas で実装してみた。

Entry Description

2018年1月22日 2018年1月22日

開発ブログ

Design, JavaScript, jQuery

1266文字：約3分

onze 株式会社オンズ

映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。もとはネットサーフィン中に見つけたものですが、改変して次のようなJavaScriptのコードを書いています。... 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →
【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。

Entry Description

2018年1月18日 2018年1月18日

開発ブログ

JavaScript

2230文字：約4分

onze 株式会社オンズ

指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。サンプルのデモサイトは以下より。デモ : https://xt... 【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。続きを読む →
【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方

Entry Description

2018年1月17日 2018年1月17日

開発ブログ

JavaScript

1778文字：約3分

onze 株式会社オンズ

今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ［Fitty］の使い方を紹介します。レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。百聞は一見に如かず。まずはサンプルをご覧ください。 SAMPLE : https://on-ze.co... 【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方続きを読む →
【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方

Entry Description

2018年1月15日 2018年1月15日

開発ブログ

JavaScript, jQuery

2203文字：約4分

onze 株式会社オンズ

このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです！まずは実際の挙動を確認してみましょう。 DEMO : http://humaan.com/modaal/ 「VIEW EXAMPLE」をクリックすると、背景が暗くなり、モーダルウィンドウがフワッと浮かび上がります。とてもスムーズな... 【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方続きを読む →
【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方

Entry Description

2018年1月9日 2018年1月9日

開発ブログ

JavaScript

1143文字：約2分

onze 株式会社オンズ

［MiniMasonry.js］は有名なMasonryの機能を制限した簡易版のライブラリです。データ容量も軽く、jQueryなどに依存せず単体で動くので便利です。使い方は以下より。 Sample : https://projects.spope.fr/masonry/example/index.html GitHu... 【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方続きを読む →
【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方

Entry Description

2018年1月5日 2018年1月5日

開発ブログ

JavaScript

1837文字：約4分

onze 株式会社オンズ

ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ［Beautiful bubbly backgrounds］を紹介します。 ↓サンプルはこちら。サンプル : https://on-ze.com/demo/js-bubbly-bg/ 導入方法まずはGitHubにて配布されている本体ファ... 【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方続きを読む →

ONZE/BLOGオンズ開発ブログ

株式会社オンズのブログです