CSS

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

 
eyecatch (5)

 

どうも、こんにちは鹿せんべい(@bambi_engineer)です。

 

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

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

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

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

 

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

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

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

www.audi.jp

 

The new Aud e-tron. – AudiがEVを変える | Electric has gone Audi
https://www.audi.jp/e-tron/
AudiのDNAと100年を超える歴史を刻み込み、ついに誕生したAudi史上初の完全電気自動車 e-tron。2019年後半、いよいよデビュー。

 

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

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

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

Image from Gyazo

 

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

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

Qiita

 

rails generate controllerで不要なファイルを生成しない – Qiita
https://qiita.com/tanakayo/items/5de57f4b89d1ef9c70ba
`rails g controller hogehoges`を実行すると_test,_helper,_coffeeなど使用しないファイルまで生成してしまう。“`% rails g controller hogehoges …

 

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

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

 

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

sample $ rails g controller home

root ‘home#index’とsample $ 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を利用します。

CodyHouse

 

Page Scroll Effects | CodyHouse
https://codyhouse.co/gem/page-scroll-effects
Introducing a mini-library of experimental page scroll effects.

 

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

codyhousedownload

clone or downloadを押して

codyhouse_download_zip_image

zipでdownloadしましょう。

 

applicationにjQuery読み込む

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

 

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

 

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

<!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を読み込んでいます。

code.jquery.com

 

jQuery CDN
https://code.jquery.com

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

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

 

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

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

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

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

 

viewファイル編集

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

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

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

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

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

<section class="cd-section">
	<div>
		<h2>Section 5</h2>
	</div>
</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以下に配置すると読み込まれます。

codyhouse_file_image

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

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

 

背景画像設定

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

 

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

この中盤あたりに

codyhouse_background_image

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

 

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

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

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

Image from Gyazo

 

conclusion

まとめ

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

関連記事