ズームアウトしながらフェードで切り替わるZoom Sliderの使い方
Zoom Sliderの使い方とは？ Zoom Sliderの特徴は、ズームアウトしながらフェードで切り替わること。ズームアウトするスピードや次の写真に切り替わるスピード、次の写真に移るタイミングを簡単に操作できます。ズームインやスライドといった機能はないのでご注意を。 それでは説明していきます。 ステップ１： zoomslider.jsを読み込む 配布サイトからzoomslider.jsをダウンロードしましょう。 ダウンロードするとdistというフォルダの中に以下の４つが入っています。 jquery.zoomslider.min.jszoomslider.cssdots.pngplain.png distフォルダごと以下のようにjsフォルダにインポートします。 インポートしたら</body>の直前に以下のコードを挿入してください。フォルダへのパスは自分の環境に合わせて変えてくださいね。
【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方
ページを読み込む際に、ローディング中であることを示すエフェクトを表示させているウェブサイトは数多くあります。 これまでは主に Flash を使う方法が主流でしたが、既に Flash は廃れた技術。 そこで、同様のことを jQuery で実現したのが［jQuery IntroTzikas］です。 IntroTzikas：サンプル ファイルサイズも小さく、導入方法も簡単なので初心者の方にもお勧めできる jQuery プラグインです。 jQueryプラグイン［IntroTzikas］の実装方法 まずは公式の配布サイトよりプラグインの本体をダウンロードしてきましょう。 →IntroTzikas 単体では動かないので、jQuery の本体ファイルもダウンロードしてくる必要があります。 →jQuery 続いて HTML の <head>〜</head>内で、ダウンロードしてきた［introtzikas
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
【jQuery】コピペでOK！スクロールで固定、解除されるBOXを配置する方法｜フロントエンドエンジニア黒ブタのWEB制作備忘録
こんばんは、黒ブタです。 最近のサイトで使われている技術ですが、今回はスクロールすると開始するイベントを紹介したいと思います。 サイドバーやヘッダーのナビでよく見かけますね。 どういったものかと言いますと、Facebookのサイドなどでスクロールすると固定されるBOXと言えばわかると思います。 特定の位置までスクロールするとサイドにあるボックスが固定され、さらにスクロールして一定の位置に到達すると解除されるアレです。 さてさて、早速コードを書いていきます。 ・・・の前にDEMOを作ったので見てみましょう。 ※DEMOはPCで見た場合のみでスマホ用には整えていません。 レスポンシブ対応にはしていますが、Android4.2以下はcssのflexに対応していないので、現在はAndroidの為にもflexを使っている要素はスマホで読み込みCSSを変更してリストで並べるように対策しましょう。 対策
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
ページめくりのエフェクトを実装できるjQueryプラグイン「BookBlock Revised」 – bl6.jp
BookBlock RevisedというjQueryプラグインを使えば本やカレンダーのようなページめくりのエフェクトを実装することができます。ペラっとした柔らかい紙の質感ではなくて、パタパタとめくっていく感じです。横にめくるのはもちろん、縦にもめくれる（実際のデモではカレンダーとして実装）のが面白いですね。 [ads_center] BookBlock Revisedの使い方 BookBlock Revised こんな感じで、本を読んでいるかのようにめくっていくことができます。 マークアップもシンプルですね。 <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <!-- コンテンツ --> </div> <div class="bb-item"> <!-- コンテンツ --> </div> <!-- 中略 -
jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法
久々にUI実装系の記事を書きます。Google Analyticsで当ブログのオーガニック検索キーワードを見ていると、「スクロール」、「ヘッダーバー」を使った複合検索でのアクセスが目立っていたりします。確かに最近はスクロールを合わせてヘッダーバーを表示させたり、非表示にさせたりするUIが至るところで見受けられるようになっています。自分もそれほど気にはしていませんでしたが、今回どんな方法で実装できるか試してみることにしました。いくつか紹介していきます。 はじめに – ヘッダーバーの準備早速、スクロールするとスライドして現れる「ヘッダバー」の実装方法について説明していきます。「ヘッダーバーはページの読み込み時は非表示となっており、ページを下にスクロールすると表示される」という機能を実装していきます。 ベースとなるヘッダーバー HTML / CSSまず今回の実装のベースとなるヘッダーバーを以下の
スクロールを監視してヘッダーバーを表示/非表示させるjQueryプラグイン「jquery.cb-slideheader.js」
前回は『jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法』という記事を書きました。内容としては、スクロールに合わせてヘッダーバーを表示/非表示させる機能の実装方法となります。今回は、そこで紹介した実装方法を元に汎用的に使うためのjQueryプラグインを作ってみたので紹介させていただきます。使用頻度は高いと思いますので、ぜひ当記事をお読みの上お使いいただければと思っています。 jquery.cb-slideheader.js概要「jquery.cb-slideheader.js」は、ページのスクロールに合わせてヘッダーバーをスライドさせて表示/非表示させる機能を実装するためのjQueryプラグインです。 maechabin/jquery.cb-slideheader.js – GitHub jquery.cb-slideheader.js – n
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://chibinowa.net/note/js/fixedsidebar.html