2020年1月22日jQueryといえば、パララックス効果ですよね(個人的意見です)今回は、jQuery-scrollyを使ってパララックス効果を実装してみました。公式サイトからソースコードをダウンロードしてきて使用します。jsdelivrにもCDNのリンクがあったので、CDNでも読み込めそうです。CodePen.とりあえず、パララックスの動作対象は、背景画像であっても、imgやdivであってもOK。<div>要素にdata-velocityを設定することで動作速度を決めるようです。[-.3]などの書き方は[-0.3]のことです。ちなみに正の値を与えれば逆方向へ動きます。注意しなければならないのが、スタート地点が要素のtopの位置で判断されるということ。正確にはjQueryのposition().topで要素の位置を取得し、その地点からパララックス動作を実行するように作られています。背景画像をパララックスさせる時でもスタート地点をposition().topで取得した値から動かしてしまいます。その場合背景を指定した要素をrelative、もしくはstaticで指定し、ページの下の方に配置されている場合、とんでもないところから画像が動き出してしまします。}なのでCSSはabsoluteで配置するよう制作しておいた方が使いやすいかと。要素自体を動かすものは任意の位置へ配置します。fixedを指定しなかった場合は動作できないようです。$(“#parallax2").scrolly();JSは単純でパララックスさせる要素に.scrolly();を実行でOK。trueを入れると背景が動き、空の状態だと要素自体が動きます。他のプラグインの方が優秀?パララックス系の有名どころはたくさんあるので、色々触ってみて、使い分けていきたいですね。簡単にパララックスが実装できますが、まずHTML構造などから考えて作らなければならないので、注意が必要かなーと思いました。そんなに複雑でもないので、必要に応じて中身をカスタマイズして使ったりもありかとは思います。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。