slick フェードスライド 実装サンプル
メインのFV画像でよく使用されている、画像が少しずつ拡大（ズーム）アニメーションしてフェードで画像が切り替わるスライドのslickを使用しての実装サンプルとコードを紹介します。 特徴 レスポンシブ フェード遷移 目次 フェードスライド ズームフェードスライド 前提 デモでは下記のCSSとJavascriptファイルを読み込んでいます。 <!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <!
Slickを利用して画像が徐々にズームしていくエフェクトをかける | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute
仕事での備忘録や田舎住まいの生活などの日常を雑記したコーダーのブログ CattleMuteキャトルミュート 通常のスライドショーを行う際に、自分はよくSlickを利用している。 で、少し前に少し大きめの案件が入った際に、画像を徐々にズームをしていきたいといった要望があった。 まぁ普通に考えたら単純にズームをかけていく場合、Slickを使わずともJSで順繰りに要素へズーム用のCSSクラスを付与していけば良いだけなのでそこまで難しいものでもない。 ・・・が、Web制作は魔法のように何でも出来ると考える諸氏諸々に、更に後付であれもあれもと要望がくると非常に鬱陶しいので、今回もSlickにお世話になった。 今回はこれを利用して画像が徐々にズームしていくエフェクトを作った際に書いたコードを、またもメモがてら掲載しようと思う。 Slickでの徐々にズームを実装するに当たり、最低やらなければならないこと
imagesLoadedを使って画像の読み込みタイミングを管理する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ:D＜わあい 今回はですね、画像の読みこみの管理ができるimagesLoadedをご紹介します:D 導入方法 npmからはこちらからインストール npm install imagesloaded Bowerからはこちらからインストール bower install imagesloaded –save ファイルからのDLはこちらからも可能です。 基本的な使用方法 jQueryからも、Vanilla.jsからも使用することができます。 jQueryからの使用方法 $('#container').imagesLoaded( function() { // 画像が読みこみ終わった時の処理 }); Vanilla.jsからの使用方法 imagesLoaded( document.querySelector('#container'), function( instance
jQueryで長いページの区切り（セクション）ごとに背景を変化させる
Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
textillate.jsで指定要素が一瞬表示されてしまう問題 | ma-ya's CREATE / WEB DESIGN
opacity指定をCSSとJavaScriptに記述で解決 このサイトではスクロールイベントでtextillate.jsを発火させています。 スクロールしていって、指定した要素が画面内にくるとアニメーションと共に表示される系のよくあるやつですね。 導入時は気が付かなかったのですが、ちょっと気になる動作を見つけたので挙動の調整をしようと思ったら… なぜかハマり（爆）予想以上に修正に時間がかかりました。 具体的には、スクロールイベント発火タイミングが体感的に少し遅れる感じです。 表示されている文字がぱっと消えてフェードインアニメが開始されると。 自分が使おうとしたアニメーションは要素内のテキストを一文字ずつ切り分けて動かす種類（仕組み的には全種類そうなのかも）だったので、色々試す選択肢があるだけにやってるうちにこんがらがってきたのかもしれません。 結果から言うと下記であっさり解決。 アニメー
レスポンシブでハンバーガーメニューになる固定サイドバー
レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>
郵便番号から該当する住所を自動で入力できるjQueryプラグイン「jquery.jpostal.js」｜アド･エータイプ スタッフブログ
ホームページを制作する時にお問い合わせや資料請求などのフォームを設置することがあるかと思います。 そのフォーム内の入力項目で住所の入力欄があった場合、郵便番号を入力しただけで該当する住所が自動入力されたら便利ですよね。 下記のjQueryプラグインを使用すれば簡単に導入することが可能です。 jquery.jpostal.js 今回は「jquery.jpostal.js」というjQueryのプラグインを使用して郵便番号から住所を自動入力する方法をご紹介します。 郵便番号から住所を自動入力「jquery.jpostal.js」の使い方 使い方はとても簡単です。 下記に「jquery.jpostal.js」を使用する時の手順を説明します。 ※例：郵便番号と住所の入力欄が1個ずつの場合 ファイル読込 jQueryと「jquery.jpostal.js」を読み込みます。 <script type="
Slickの画像幅の固定方法
###実現したいこと Slickにて、ブラウザ幅を伸縮した際に画像の横幅を固定したままで、かつ前後のイメージを見せつつセンタリングにしたいです。 イメージで言うと、まさに**湾岸通ギャラリー（http://www.caso-gallery.jp/）**がそうです。 今現在の下記のコードでは、横幅の変化にあわせ画像も伸縮してしまい困っています。 max-widthやmin-widthを設定してはどうかと思い、slick-slideにて設定してみましたが、どうにもうまく行きませんでした。 よろしければ、お力添えをお願いします。 ###該当のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset
【jQuery】もっと見るボタンで要素を開閉する方法｜Gimmick log
公開日：2015.11.20 更新日：2023.03.19 jQuery, アコーディオン もっと見るボタンを押下して、非表示要素をスライドダウンで表示させます。 読み込みは行われているので、処理が早くなるわけではないのですが、ニュースサイトなど情報量が多いサイトの場合はこういった方法が使えます。 もっと見るボタンクリックで透過させた部分をスライド表示する方法 文章が多めのニュース記事なんかでよくある見せ方ですね。 テキストの一部をCSSのグラデーションで覆って、続きがあることを明示しています。 サンプル See the Pen もっと見るでスライド表示 by ponzu (@ponzu) on CodePen. html <div class="content-wrap animated"> <div class="content-txt"> <p>この中にもっと見るで表示させたいテキス
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。 スタイルシートも使いません。 すべてをjQueryのコードだけで賄います。 というワケでjQueryの記述方法です。 「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。 $('head').append( '<style>body{display:none;}' ); $(window
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
【jQuery】画像ギャラリーを効果的に見せる為に。Gallery系プラグイン10選
Webサイトによっては使う機会もあるポートフォリオ。どうせならjQueryを使用して綺麗に見せたり、Google画像検索のような画像ギャラリーも効果的に使用するために良いのではないでしょうか。 今回はメモを兼ねて10個のjQueryギャラリー系プラグインを選んでみました。 ライセンス等は確認して下さい。
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
odometer
Odometer is a Javascript and CSS library for smoothly transitioning numbers. See the demo page for some examples. Odometer's animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers. The library and largest theme is less than 3kb when minified and compressed. All of the themes can be resized by setting the font-size of the
明日から使える！ユーザビリティに優れたリッチなグローバルメニューの作り方 | 株式会社WEB企画
ヘッダー固定のグローバルメニューを作る機会がありました。 グローバルメニューに大きめのアイコンを付けるようなデザインで高さを大きくしすぎてしまうと、ノートパソコン等の縦幅が小さい画面で見た時、表示できるコンテンツの量が狭くなってしまう問題があります。 そこで、この問題を解消するため、スクロールするとグローバルメニューが縮む仕掛けを実装してみました。 そうすることでファーストビューはデザイン性のあるリッチなグローバルメニューを演出しつつ、スクロールするとコンテンツを邪魔しないシンプルなグローバルメニューに変わります。 スマートフォンは解像度がPCに比べ小さいので、スマホサイトでも活躍しそうです。 それでは、実装の仕方を順を追って説明していきます。 スクロールすると高さが縮み、追従するグローバルメニューの実装方法 STEP.1 まずは、グローバルメニューをコーディング PSDなどでデザインした
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vinnymoreira/stellarnav: jQuery responsive multi-level dropdown menu designed to do most of the heavy CSS work for you.
Pretty Scroll
http://chibinowa.net/note/js/fixedsidebar.html
