GitHub - humaan/Modaal: An accessible dialog window library for all humans.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
preventDefault()で無効にしたイベントを有効にする方法
preventDefault()で無効にしたイベントを有効にする方法を紹介します。 １．はじめに preventDefault()は、「preventDefault()について」で紹介したとおり、実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドです。 が、preventDefault()でイベントキャンセルしたあと、再びイベントを有効にする方法が分かりません。 ということで、preventDefault()で無効にしたイベントを有効にする方法について紹介します。 ２．jQueryを使ってpreventDefault()で無効にしたリンクを有効にする ここではa要素を使って、preventDefault()で無効にしたリンク先への遷移を再び有効にするサンプルを用います。 jQueryでは、preventDefault()メソッドをon()とoff()と組み合
pushState() + AJaxでスムーズなコンテンツの遷移 | スターフィールド株式会社
Ajaxはページ遷移で発生するユーザーのストレスを軽減する方法として有効ですが、 ページ遷移の履歴が残らないため、 ブラウザの戻るボタンを押した場合に、ユーザーの意図しない動作になってしまう場合が多々あります。 HTML5のJavaScriptの仕様で、履歴を扱うhistoryオブジェクトに、 pushState()およびpopstateイベントが追加され、 Ajaxのような実際にページ遷移しない場合でも、ページの変化があるごとに、URLを変更して履歴を追加することができるようになりました。 この機能はIE10以上のブラウザで利用することができます。 今回は、この機能を使ったページ遷移の方法をご紹介いたします。 ↓作ってみたもの DEMO 方法 遷移するそれぞれのページを、Ajax経由ではなく、直接開いても問題ない状態で用意する 初期で読み込んだページのURLを取得し、pushState(
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
DOM操作やイベント等、jQueryに影響を受けた軽量なライブラリ・「Umbrella.js」 - かちびと.net
Umbrella.jsはjQueryに影響を受けて作られた軽量ライブラリ。DOM操作やAJAX周り、イベントなど、jQueryの機能を持ちながら圧縮版で3KBほどと軽量なライブラリを目指しているようです。だいぶこの手のライブラリも増えてきましたね。選択肢が増えて有りがたい限りです。ライセンスはMIT。 Umbrella.js
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
jquery を使わないfix height | devLog
スマホコーディングなど、「軽量化！軽量化！」と叫ばれる中でNo jQueryが求められる事がある。 そんなときには要素の高さをそろえる位は、jquery を使わずにやってしまいたい。 １．javascriptで、getElementsByClassNameが必要。 function myGetElementsByClassName (_class , _tag , _id) { var targetId , elementList , classList , i , j , nodes = []; targetId = document.getElementById(_id); elementList = targetId.getElementsByTagName(_tag); for (i=0; i < elementList.length ; i++ ) { classList = e
Easingプラグインを使ったページスクロールサンプル
Easingプラグインを使ったページスクロールサンプル > アーカイブ > 5509 durationは400～1200が適正
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
jQuery google api and other google hosted javascript libraries. - ScriptSrc.net
Mastering the Code Things We Wish We Knew Much Earlier In Our Career - Articles, Tips, Inspirations, Sources and Resources for web designers and developers Watch video Hello, coders! Computer Science became one of the top professions and hobbies in the past two decades. Many people, especially website developers, are drawn to learn at least one programming language that will back up their written
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptがちょっとわかる人向けの、Ajaxの話。 - Qiita
指定したCSSセレクタ位置にスムーススクロールするJS「Jump.js」:phpspot開発日誌
ページ内のローディングをもっとオシャレにできる「Progress.js」:phpspot開発日誌