Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。 参考：Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました。 Chrome、jQueryそしてCSS
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
タブやナビゲーションがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装
タブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。 下記は、デモでの操作をアニメーションgifにしたものです。
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
途中からヘッダー固定にする方法！画面上部までスクロールされたら固定する | HPcode（えいちぴーこーど）
途中からヘッダー固定にする方法 HTML ヘッダーメニューの作り方です。5つのメニューが並ぶシンプルな構成です。JavaScriptと連動させる大事な部分としては、#global-navになります。 （ここだけは確実に合わせる） <nav id="global-nav"> <div class="inner"> <ul class="global-list"> <li class="global-item"><a href="#section1">セクション１</a></li> <li class="global-item"><a href="#section2">セクション２</a></li> <li class="global-item"><a href="#section3">セクション３</a></li> <li class="global-item"><a href="#sect
jQuery+CSS3で丸タイプのドロワーメニュー
jQuery+CSS3で丸タイプのドロワーメニュー ドロワーメニューのバックグラウンドが丸になってるタイプのナビゲーションです。 クリックイベントにjQueryを使用してます。 投稿日2018年12月27日 更新日2018年12月27日 See the Pen Circle Drawermenu by webopixel (@webopixel) on CodePen. HTML メニューのトグルとなるボタンと、メニュー本体があります。 今回はメニューと円の部分は別々にアニメーションしたかったので、別の要素にしたほうが簡単です。 index.html <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="nav-circle-bg"></div> <nav i
ワイ「なに！？ジェネレーター関数を使えば複雑なCSSアニメーションも簡単やと！？」 - Qiita
業務中ワイ ワイ「お、また株式会社ブラックはんからお仕事依頼のメールが来てるで」 ワイ「どれどれ・・・」 暗井「お世話になっております。株式会社ブラックの暗井 暗人（くらい・あんと）です」 暗井「クリックするとフワフワっとだんだん縦横に大きくなるボックスを作ってください」 暗井「予算は800万円です」 ワイ「これまた何ちゅうフワフワっとした指示や」 ワイ「でもjQueryのanimateメソッド使えば余裕やろ」 ワイ「かしこまりました」 ワイ「何とか800万円以内に抑えます」 ワイ「送信っと」 ワイ「お、早速お返事や」 暗井「なお、発注元の都合でjQueryの使用はできません」 ワイ「ファッ！？」 ワイ「まじか・・・jQuery禁止か」 ワイ「800万円で出来るかな・・・」 社長「（それは出来るやろ・・・何年かける気や・・・）」 ザコーダーワイ、jQuery禁止で困る ワイ「jQueryな
Riot初歩の初歩
Riot（ライオット）は、HTMLの中にJavaScriptやCSSを書くことができる、シンプルで洗練されたコンポーネントベースのUIライブラリです。 が一度も触れたことがないのでまったくわからず、ネットで調べても頭にスッと入ってくる情報がなかなかみつかりません。 ということで、簡単なサンプルを使って、Riotの機能について紹介してみます。 １．サンプル サンプルは、h1要素に「Hello World!!」を表示します。 用意するのは、カスタムタグ（後述）を記述するためのtest.tagと、ウェブページを表示するindex.htmlの2つです。 test.tag <test> <h1>{ opts.title }<h1> </test> index.html <html> <head> <meta charset="utf-8" /> </head> <body> <test></test
一定の時間経過したら等、時間でCSSを制御するスクリプト・「STIMED.js」
STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 stimed.style.create([ {target:'body', time:'00:00', property:'background-color', value:'#fff'}, {target:'body', time:'18:00', property:'background-color', value:'#000'}, {target:'body', time:'24:00', property:'background-color', value:'#fff'} ]);昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えたり、要素を動かしたり、とアイデアは豊富です。transition-delay等じゃサポートしきれない仕様に対応で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
