退職は損切りかリスクか。Next.js超入門」のソースがfirebaseのバージョンのせいで動かないので、なんとかするFontAwesomeでSNSのロゴを手に入れようWEBページの余白が消えない!?そんな時はリセットCSSの出番だ【codyhouse】ページスクロールエフェクトを実装したい【オシャレ】ページスクロースアクションとはRailsアプリケーションを作成CondyHouse導入conclusionFontAwesomeにlinkをつけるCSSの優先順位!!どのセレクタが最強なのかJINテーマの記事内の文字サイズをstyle.cssをいじって修正する不意にCSSだけでおしゃれなボタンを作りたくなったら真似ぶは学ぶ。inどうも、こんにちは。私たちは自分たちのやり方をしてきただけだAudiのe-tronの特設ページの動画に出てくるフレーズです。Audiのプライドを感じますね。個人的にアウディがとても好きです。ページスクロースアクションとは今回はページスクロールアクションを実装しようと思うのですが、ぜひ参考にこのキャンペーンページをみてください。url="https://www.audi.jp/e-tron/"]このサイトではパララックス(視差)というものが使用されています。上に抜けて行く画像と下から出てくる画像の速度が違うことによって動きがでる、というものです。参考に作ってみたものです。今回はこのようなページスクロールアクションのついたサイトを作ります。今回はRailsでサイトを作るのでターミナルで次のコマンドを実行します。installCopyCopied!sampleの部分は作成されるアプリケーション名となるので、自由に変えて作成してください。installを実行しています。完了したらsublimeやAtomなどのテキストエディタで作成したアプリケーションを開きましょう。config/application.rbファイルに次のように記述します。endendCopyCopied!コントローラーを作成した時に不要なファイルを生成しないようにする記述です。詳しくはこちらを参照してください。https://qiita.com/tanakayo/items/5de57f4b89d1ef9c70ba同じくconfigのファイルにあるroutes.rbにルートパスの設定をします。'home#index'endCopyCopied!ターミナルを開いてコントローラーを作ります。homeの赤文字も部分はなんでもいいですが、揃えてください。app/assets/stylesheets/home.scssCopyCopied!このようにターミナルに表示されたらうまくいっています。テキストエディタに戻りindexアクションを定義します。endendCopyCopied!indexアクションに対応するビューを作ります。app/views/home/のファイル直下にindex.html.erbファイルを作ります。これでようやく準備は整いました。CondyHouse導入ダウンロード準備が整いましたので、いよいよページスクロールエフェクトを実装していきましょう。実装に際して、CodyHouseを利用します。https://codyhouse.co/gem/page-scroll-effects上記のページに飛んでdownloadボタンを押すとgithubのページに移ります。downloadを押してzipでdownloadしましょう。applicationにjQuery読み込むダウンロードができたら、finderでファイルを確認します。page-scroll-effects-masterというファイルがあるはずです。その中のindex.htmlをsublimeやAtomのテキストエディタで開きます。(そのままクリックするとブラウザが開いてしまうので、右クリックで)indexファイルの記述を先ほど作成したアプリケーションにコピーしていきます。</head>CopyCopied!head部分は既存のものに追加という形で編集します。lang="en"からlang="ja"に変更してクラスを追加するだけですね。crossorigin="anonymous"></script>CopyCopied!またこのスクリプトダグはjQueryを読み込んでいます。https://code.jquery.com/ここからCDNをコピーして貼り付けます。一応2.xの方を選択しています。続いてbodyタグを編集します。%></body>CopyCopied!この部分がもっとも重要だと言っても過言ではないでしょう。このdata-animationの部分を変更するとスクロールエフェクトが変更できます。先ほどのCodyHouseのサイトのdemoを見ると種類を把握できます。次にviewファイルにこの部分をコピぺします。.jsはjavascripts以下に、cssはstylesheets以下に配置すると読み込まれます。http://localhost:3000/に接続するとdemoサイト通りのサイトができていると思います。背景画像設定あとはbackground-imageを設定して完了です。app/assets/stylesheets/style.cssです。この中盤あたりにこのような記述を見つけることができます。public以下に保存したイメージ画像を読み込むように編集しましょう。私の場合はpublicフォルダの下にbackground_imageフォルダを作成し、その中にimageを保存して、呼び出すようにしました。これで機能やコードのキレイさはともかく見た目は完成したと思います。今回はここまでにします。