Q&A
前提・実現したいこと
プログラミング初心者です。
最近、
javascript のアニメーション機能の素晴らしさに惹かれて
まずはskrollerをプラグインしてみたいなと思っています。
いろいろとプラグインの方法を探っているとタイトルでもあった通り,
scroller の gem を発見しこれなら余計にファイルを作成したり記述減らせると思ったのですが、
肝心の実装の仕方がどのサイト調べてもイマイチわかりません。
gem 'skrollr-rails'
gemにskrollr-railsを追記し、
application.jsに//= skrollr-rails
と記載した後は、
具体的にどのディレクトリにどのファイルが必要でどの記述が必要か？
誰かご教授願いたいです。
[↓現状、スクロールさせようと思っても反応せず、プラグイン出来てないんだな〜と思います]
[↓ディレクトリとかファイルの位置はこんな感じです]
真似したいデモページ（参照URL）
↓元になる参考ページ↓
scrollerを解説してるサイト
該当のソースコード
【Gemfile】
(略) gem 'pry-rails' gem 'jquery-rails' gem 'skrollr-rails' (略)
【application.js】
(略) //= require jquery //= skrollr-rails //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree . (略)
【application.html.erb】
<!DOCTYPE html> <html> <head> <title>Mensetu</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html>
【index.html.erb】
<!--【デモ１】--> <div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);" class="skrollable skrollable-between" style="opacity: 1; top: 3%; transform: rotate(0deg); transform-origin: 0px 0px;"> <h1>★skrollrデモ★</h1> <h2>【デモ１】スクロールすると透明になりながら、上へ移動し、左へ回転します</h2> <p>デモは他にもあります。どんどん下へスクロールしてお楽しみください！</p> <p class="triangle">▼ ▼ ▼</p> </div> <!--【デモ２】--> <div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1300="" data-1600="transform:scale(5) rotate(3240deg);opacity:0;" class="skrollable skrollable-before" style="transform:scale(0) rotate(0deg);opacity: 1;"> <h2>【デモ２】transform</h2> <p>①拡大・回転しながらフェードイン</p> <p>②しばらく静止</p> <p>③拡大・回転しながらフェードアウト</p> </div> <!--【デモ３】--> <div id="e_wrapper" data-0="display:none;" data-1700="display:block;" data-2700="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-3700="background:rgba(0,0,0,1);color:rgb(255,255,255);" class="skrollable skrollable-between" style="display: none; top: 0%; background: rgba(0, 0, 0, 0); color: rgb(0, 0, 0);"> <div id="easing" data-1700="left:100%" data-4600="left:25%;" class="skrollable skrollable-before" style="left: 100%;"> <h2>【デモ３】スライドイン</h2> <p>さらにスクロールすると・・・</p> <p>背景の <span data-1700="" data-2700="color[swing]:rgb(0,0,0);" data-3700="color:rgb(255,255,0);" class="skrollable skrollable-before" style="color: rgb(0, 0, 0); font-size: 150%;">画面色 </span>が変わります。</p> <p data-3700="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:300%;" class="skrollable skrollable-before" style="opacity: 0; font-size: 100%;">楽しいでしょう？</p> </div> </div> <script src="jquery.min.js"></script> <script src="skrollr.min.js"></script> <script type="text/javascript"> var s = skrollr.init(); </script>
【main.js】
require.config({ baseUrl: "../dist", paths: { 'skrollr' : "skrollr.min" }, waitSeconds: 15 }); require(['skrollr'], function(skrollr){ var s = skrollr.init({ edgeStrategy: 'set', easing: { WTF: Math.random, inverted: function(p) { return 1-p; } } }); });
補足情報（FW/ツールのバージョンなど)
PLATFORMS
ruby
version
Ruby : ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Rails 5.2.4.4
BUNDLED WITH
1.17.3
回答1件
0
こんばんは、私も初心者なので、大変恐縮ですが、何かお力になれれば、幸いです。
これは、紹介サイトを見る限り、まずJqueryをheaderに記述し
HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
それから、
ZIPをダウンロードして、
そのファイルを読み込めばいいと思います…！
こちらに書いています。
投稿2021/01/25 13:32
総合スコア133
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/25 19:46
2021/01/26 00:19
2021/01/28 06:41