jQueryと戦ってました！ - 30歳からWebエンジニア転職を目指す

こんにちは。しゅーのーです。

ここ数日はjQueryと戦ってました。

目標は「Appleの商品紹介ページみたいに、スクロールすると要素がアニメーションして出てくる」というのを作りたかったのですが、JavaScriptからだと難しそうでした。

そんなわけで、まずはjQueryの力を借りてやってみようと思い立ったわけです。

前回は「Bootstrap→自力で」という流れをやってみたので、今回も「jQuery→自力で」にしてみた、そんな感じの軽い感じでした。

最終的にできたのはこちらになります。

内容としては、「空、山、森、海」の写真を載せて、それぞれの写真の下に説明を加えて、スクロールすると説明が下からふわっと出てくる、そんなものです。

写真はフリー素材で、説明はWIkipediaから拝借してきました。

jQueryの部分は結局自力ではわからなかったので、以下のサイトを参考にして作りました。

色々探してみましたが、一番分かりやすかったです。

中身の内容は理解できたので、とりあえず自分の中では「OK」って感じです。

とりあえずそれっぽくなったと思います。

「そもそもjQueryってどういうことができるの？」っていうことから始まったので、時間がかかりました。

便利ですね、jQuery。勉強してて面白かったです。

それはそうと、今回できあがったものには以下の課題が残っています。

・スマホ対応してない

・最後の部分はアニメーションを放棄した（下に要素がないから）

パソコンは画面が横長なのでよかったのですが、スマホだと縦長なので、挙動がすごいことになっています。

ためしにChromeのディベロッパーツールでiPhoneとかにしてみると、ぼくが言ってることがなんとなく分かるかと思います。

なんか別の方法で画面の高さとか、スクロールの量とかを取得していかないといけないのかもしれないですね。

最後の方でアニメーションを放棄したのは、「表示させたい要素より下に行けないと、アニメーションしてくれない」ということが原因です。

実際には最後の方までアニメーションさせる必要はないかなと思うので、とりあえずこのままにしました。

これから何をしようかな、と思っているところなんですが、ひとまずHTML周辺は置いといて、またアプリケーション寄りなことをしようかと思ってます。

PHPのことを忘れつつあるので、同じような言語のRubyを勉強してみようかなーと考えています。

「Rails チュートリアル」にも、興味あったりもしますし。

HTMLもまだグリッドデザインとかやってみたいんですけどね。

今日はこんな感じです。ではー。