KYO

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日 jQuery ,

追記:現在のテーマでは使用していません。
現在はKYOというテーマを使っています

 

たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。
そういうサイトを見ると、真似したくなりますよね?

でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!

 

 

 

jqueryのプラグインにjquery.inviewというものがあります。

 

 

 

今まではaosというものを使っていました。
使いやすさはaosが最強なのですが、自分でコード書いて制御したい場面もあります。

 

 

 

今まではスクロールされて要素が表示されたら、フェードインするというのもを、スクロールされて表示される度に行うようになっていました。

 

画面がチラチラしてしまうのでストレスを感じてしまうこともあります。

 

なので一度フェードインした要素は、そのまま表示させておきたいと思い、今回はjquery.inviewというプラグインを使いました。

 

 

jquery.inviewはGitHubからダウンロードできます。

ダウンロード

 

 

ワードプレスで利用する場合は

こんな感じで利用します。

 

あとは操作したい要素に適当なクラス名なりをつけてjqueryで操作します

 

 

引数が厄介ですがこれだけのコードです。

if (isInView)で画面に表示されたらということになり、画面に表示されたらopacity: 1にする。

 

 

 

 

css側では

 

 

というふうに初期値を透明で設定してあげます。
画面領域に入ったら表示する。

という流れです。


関連記事

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...

jQueryでフォームのバリデーション機能を実装する

2018年6月10日

最近は、phpとjQueryをメインに勉強しています。 今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。   ソースコードはgithub   完成するとこんな感じです       バリデーションフォームの概要 phpでバリデーション処理を書くと送信ボタンを...

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。   なぜ0から作るかというと、オシャレなステ...