slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく - Qiita
昨日Twitterのタイムラインで下記を見かけました slickのがたつきの件、NxWorldさんのサイトのサンプルでもなってるからやっぱり自分だけじゃないな。／https://t.co/EJ5swAVGAu — ヤマシタレイコ｜OOOPEN (@OOOPEN_jp) January 30, 2019 以前このプラグインを使った時に同じような不具合に直面し、自力で何とかした経験があるので、同じように困っている方の参考になれば。。 現象 ここのスライドのNextとかPrevを押すと分かりますが、2周目の最初のスライドに来た時と、最初のスライドから最後のスライドに戻る時にがたつきます。 これは.slick-currentというクラスが来た時に透過にしたり大きくしたりしているのですが、がたつくパターンの場合クラスが付与されるまでにDOMの操作が発生しその処理時間の差でがたつくのだと思います。 対
jQueryのfadeIn、fadeOutのアニメーションがちらつく
jQueryでfadeIn、fadeOutのアニメーションをしたときに、ちらつく現象について。 アニメーションはイージングの設定によって見た目が代わりますが、一番基本のlinearでもちらつきます。 「ちらつく」というのがどういう現象かというと、本来は透明から不透明に少しずつ現れていってほしいのですが、透明状態から一瞬濃い状態になり、また薄い半透明になり、それからアニメーションがスタートする感じ。 言ってみれば、フェードインがスタートする前に、ちょっと見えちゃうんですよね、一瞬。 この一瞬見えちゃうってのがすごくカッコ悪い。 っていうか、もうチカチカして、一目見て不具合！って感じ。 で、原因はというと、CSSのtransition設定とぶつかっていたのでした。 transition設定をしている要素に対してfadeIn、fadeOutをすると発生する現象のようです。 いやー、ちょっとハマっ
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
マウスホバーするとボーダーがアニメーションで太くなるサムネイルの作り方 | ダイナシイエスタデイ
サムネイル画像にマウスを合わせたとき、それがリンクになっていることをユーザーに分かってもらう必要があります。CSSによって透明度を変えるのがもっとも一般的かと思いますが、今回は画像をボーダーで囲み、マウスホバーするとボーダーがアニメーションでにゅっと太くなるサムネイルの作り方をご紹介します。 デモページ まずは仕組みから 仕組みは至ってシンプルです。position:relative;を指定した親要素の中に、絶対配置(position:absolute;)で画像を入れたブロック要素とdisplay:block;でブロック要素化したa要素を重ねます。HTMLソース内で画像のブロック要素の後にa要素を記述すれば、特にスタイル指定しなくてもa要素が上に重なります。 CSSでは通常時(マウスホバーしていない状態)のスタイルを指定しておきます。これにjQueryでマウスホバー時のボーダーのアニメーシ
【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE - Web Design Studio -
前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
jQuery UI Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
