【codyhouse】ページスクロールエフェクトを実装したい【オシャレ】

どうも、こんにちは。

モハメド・アリがボクシングを創ったのではない プレスリーがロックを産み出したのではない サルバドール・ダリが初めて絵を描いたわけではない 私たちも電気自動車を創り出したわけではない 私たちは自分たちのやり方をしてきただけだ

Audiのe-tronの特設ページの動画に出てくるフレーズです。

Audiのプライドを感じますね。

個人的にアウディがとても好きです。

ページスクロースアクションとは

今回はページスクロールアクションを実装しようと思うのですが、

ぜひ参考にこのキャンペーンページをみてください。

[blogcard url="https://www.audi.jp/e-tron/"]

このサイトではパララックス（視差）というものが使用されています。

上に抜けて行く画像と下から出てくる画像の速度が違うことによって動きがでる、というものです。

参考に作ってみたものです。今回はこのようなページスクロールアクションのついたサイトを作ります。

20181220-1.gif

Railsアプリケーションを作成

今回はRailsでサイトを作るのでターミナルで次のコマンドを実行します。

$ rails s sample
$ cd sample
$ bundle install

sampleの部分は作成されるアプリケーション名となるので、自由に変えて作成してください。

次に作成したアプリケーションのディレクトリに移動し、bundle installを実行しています。

完了したらsublimeやAtomなどのテキストエディタで作成したアプリケーションを開きましょう。

config/application.rbファイルに次のように記述します。

module VirtualCurrencies
  class Application < Rails::Application
   //ここから下５行を追加
    config.generators do |g|
      g.javascripts false
      g.helper false
      g.test_framework false
    end
  end
end

コントローラーを作成した時に不要なファイルを生成しないようにする記述です。 詳しくはこちらを参照してください。

https://qiita.com/tanakayo/items/5de57f4b89d1ef9c70ba

同じくconfigのファイルにあるroutes.rbにルートパスの設定をします。

Rails.application.routes.draw do
  //homeの部分は自由に変えてください
  root 'home#index'
end

ターミナルを開いてコントローラーを作ります。

$ rails g controller home

root home#index'と$ rails g controller homeの赤文字も部分はなんでもいいですが、揃えてください。

virtual-currencies$ rails g controller home
Running via Spring preloader in process 22406
create app/controllers/home_controller.rb
invoke erb
create app/views/home
invoke assets
invoke coffee
invoke scss
create app/assets/stylesheets/home.scss

このようにターミナルに表示されたらうまくいっています。

再びテキストエディタに戻りindexアクションを定義します。

class HomeController < ApplicationController
  def index
  end
end

indexアクションに対応するビューを作ります。 app/views/home/のファイル直下にindex.html.erbファイルを作ります。

これでようやく準備は整いました。

CondyHouse導入

ダウンロード

準備が整いましたので、いよいよページスクロールエフェクトを実装していきましょう。

実装に際して、CodyHouseを利用します。

https://codyhouse.co/gem/page-scroll-effects

上記のページに飛んでdownloadボタンを押すとgithubのページに移ります。

20181220-2.png

clone or downloadを押して

20181220-3.png

zipでdownloadしましょう。

applicationにjQuery読み込む

ダウンロードができたら、finderでファイルを確認します。 page-scroll-effects-masterというファイルがあるはずです。

その中のindex.htmlをsublimeやAtomのテキストエディタで開きます。 （そのままクリックするとブラウザが開いてしまうので、右クリックで） 20181220-4.png

indexファイルの記述を先ほど作成したアプリケーションにコピーしていきます。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html lang="ja" class="no-js">
  <head>
    <title>VirtualCurrencies</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <script
      src="https://code.jquery.com/jquery-2.2.4.js"
      integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
      crossorigin="anonymous"></script>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

head部分は既存のものに追加という形で編集します。 といってもhtml lang="ja" class="no-js"の部分を lang="en"からlang="ja"に変更してクラスを追加するだけですね。

<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

またこのスクリプトダグはjQueryを読み込んでいます。

https://code.jquery.com/

ここからCDNをコピーして貼り付けます。

一応2.xの方を選択しています。

続いてbodyタグを編集します。

app/views/layouts/application.html.erb

<body data-hijacking="off" data-animation="opacity">
  <%= yield %>
</body>

この部分がもっとも重要だと言っても過言ではないでしょう。 このdata-animationの部分を変更するとスクロールエフェクトが変更できます。

先ほどのCodyHouseのサイトのdemoを見ると種類を把握できます。

viewファイル編集

次にviewファイルにこの部分をコピぺします。

app/views/home/index.html.erb

<section class="cd-section visible">
	<div>
		<h2>Section 1</h2>
</section>

<section class="cd-section">
	<div class style="opacity">
		<h2>Section 2</h2>
</section>

<section class="cd-section">
	<div>
		<h2>Section 3</h2>
</section>

<section class="cd-section">
	<div>
		<h2>Section 4</h2>
</section>

<section class="cd-section">
	<div>
		<h2>Section 5</h2>
</section>

<nav>
	<ul class="cd-vertical-nav">
		<li><a href="#0" class="cd-prev inactive">Next</a></li>
		<li><a href="#0" class="cd-next">Prev</a></li>
	</ul>
</nav>

あとはpage-scroll-effects-masterのフォルダのファイルを .jsはjavascripts以下に、cssはstylesheets以下に配置すると読み込まれます。

20181220-5.png

ここまできたらターミナルでrails sを実行し http://localhost:3000/

に接続するとdemoサイト通りのサイトができていると思います。

背景画像設定

あとはbackground-imageを設定して完了です。

画像を設定しているファイルは app/assets/stylesheets/style.cssです。

この中盤あたりに

20181220-6.png

このような記述を見つけることができます。 public以下に保存したイメージ画像を読み込むように編集しましょう。

私の場合はpublicフォルダの下にbackground_imageフォルダを作成し、その中にimageを保存して、呼び出すようにしました。

これで機能やコードのキレイさはともかく見た目は完成したと思います。

今回はここまでにします。

20181220-7.gif

conclusion

・CodyHouseを使うと簡単にオシャレなサイトが作れる！！