Easy Method

ラクして稼ぐを研究するメディア

パララックスで有名なskrollrを使って文字をフェードインフェードアウトさせてみた

   

はじめに

こんにちはWordPressブログ構築ワークショップ講師のKazuyan(@Inafuku_Kazuya)です。

パララックスで有名なJavaScriptのskrollrを使ってみました。

今回はこのskrollrを使って
「私は稲福一也です。」をスクロール量に応じて
変化させてみました。

http://inafukukazuya.com/parallax/opacity.html

日本語の解説サイトを見ると画像や背景を回転させたり移動させたりが多いのでちょっと違ったやつを作ってみました。

下にスクロールしていくと僕の名前がだんだんフェードインされてくる。
んで、さらに下にスクロールしていくと僕の名前がフェードアウトされていく感じですね。

使用するファイル

右側にある[Download ZIP]をクリックして解凍します。

https://github.com/Prinzhorn/skrollr

skrollr01

解凍すると沢山のフォルダやファイルが表示されます。
今回僕が使用したのは「dist」フォルダにある「skrollr.min.js」
「examples」にある「fixed-positioning.css」です。

skrollr02

skrollr03

実際に書いたソースはこちらです。
(ファイル名はopacity.htmlにしました。)

data-○○のように○○の部分には数字が入ります。これはスクロール量の事です。
164の位置なら、このCSSの状態ね、264ならこの状態みたいな感じです。

ちなみに上記のやつだとスクロール量が0(表示された段階だと)
opacityが0でdisplayが表示されてない状態。
下にスクロールして164の状態になったら
opacityが0.1になってdisplayもinline-block状態になります。
(opacityとかdisplayはCSSです。)

style.cssについてはprofileでfont-size:36px;しか指定してません。
後、今回のファイル一覧です。

skrollr04

ハマった点

今回いくつかハマった部分があります。

skrollr.min.jsの設置場所

jQueryをhead内に入れる人って結構いると思いますが、このskrollrでやると動きませんでした。
なのでbodyの下の方に入れましょう。

複数の設定をするときの注意点

一番最初にCSSを複数設定をしています。
data-0=”opacity:0;display:none;”

この時に、;以降にスペースを入れると動きませんでした。
data-0=”opacity:0; display:none;”

ブラウザか環境によるかもしれませんが、もし動かない場合はチェックをしてみてください。

さいごに

他のサイトに比べやってる事は情けないサンプルですが、逆にどう使っていいのか?わかりづらかったので、今回はシンプルなサンプルにしてみました。少しづつサンプルは増やしていこうと思っています。

参考サイト

Parallax(パララックス)スクロール効果を実現できるJavaScript「skrollr」

[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス

参考になった!と思ったらRSS登録をお願いします。

follow us in feedly

下記ボタンから「いいね」「ツイート」をお願いします。

Pocket

お仕事のご依頼について

WordPressカスタマイズ・WEBコンサルティングの
ご依頼についてはコチラ!

Facebookはこちら(友達申請歓迎です)

https://www.facebook.com/inafukukazuya

Twitterはこちら(フォロー歓迎です)

https://twitter.com/Inafuku_Kazuya

 - 未分類

スポンサードリンク







follow us in feedly

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

cubepdf_セキュリティ画面
CubePDFを使ってセキュリティをかけたPDFを作成する方法

はじめに こんばんわ、@Inafuku_Kazuyaです。 企業内でよく使用され …

足つぼボード
【実験】足つぼボードの効果を実験してみる PART2

はじめに 本ブログ初期の頃に始めた「足つぼボード」企画ですが 全然書いていません …

足つぼボード
足の冷え性は治まるか?足つぼボードを5分を踏む実験をしてみた

はじめに 寒すぎる。。 先日雪が降ってから凄く寒い日が続いてる気がします。 もと …

クリエイター交流会を開催しました(2017年7月7日と8月4日)

こんにちは、イナフクカズヤです。 少し時間が経ってしまいましたが、7月7日・8月 …

「あずきのチカラ 目もと用」
眼疲れが辛い。なので「あずきのチカラ 目もと用」を買って効果を試してみた

はじめに 日々目の疲れと戦っている@Inafuku_Kazuyaです。 仕事柄P …

浮間舟渡の板橋区立企業活性化センターで第4回WordPressブログ構築ワークショップを開催しました。

はじめに 遅くなりましたけど、8月3日の土曜日に 第4回WordPressブログ …

問題が即解決!Adobeのチャットサポートが凄く便利だった

はじめに 8月1日からAdobeCloudサービスを使うようになりました。 今は …

睡眠の質を上げる為にテンピュールのアイマスクと100円の耳栓を試してみた

はじめに 何だか、最近8時間寝ても寝ている気がしない。これはイカン!何とか睡眠の …

足つぼボード
【実験】足つぼボードの効果を実験してみる PART1

はじめに こんばんわ、@Inafuku_Kazuyaです。 皆さんリフレクソロジ …

no image
WordPress始めました

はじめまして、InafukuKazuyaです。 先日までアメーバブログを主な住処 …