[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
Spin.js
ローディングアニメーションを画像無し、CSSなし、外部ライブラリなしで作成できるライブラリ。jQueryのプラグインとして利用することも可能。
使い方
外部のライブラリやファイルを必要としないのでspin.jsを読み込むだけです。
HTML
- <script type="text/javascript" src="spin.min.js"></script>
サンプル
実行結果
Javascript
- $(function(){
- // アニメーションの設定
- // 以下はデフォルト値
- var opts = {
- lines: 12, // 回転する線の本数
- length: 7, // 線の長さ
- width: 4, // 線の太さ
- radius: 10, // 線の丸み
- color: ' #000', // 線の色 #rgb or #rrggbb
- speed: 1, // 1回転に要する時間 秒
- trail: 60, // Afterglow percentage
- shadow: false, // 線に影を付ける場合、true
- hwaccel: false // Whether to use hardware acceleration
- };
- // アニメーションを挿入する要素
- var target = $('.spintest')
- .css({
- height : 200,
- width : 200,
- border : '1px solid #000000',
- padding: 10
- })
- .get(0);
- // 実行
- var spinner = new Spinner(opts).spin(target);
- });
HTML
- <div class="spintest">
- </div>
spin()メソッドで実行
隠しオプション?
ソースみると
javascript
- defaults = Spinner.defaults = {
- lines: 12, // The number of lines to draw
- length: 7, // The length of each line
- width: 5, // The line thickness
- radius: 10, // The radius of the inner circle
- color: '#000', // #rgb or #rrggbb
- speed: 1, // Rounds per second
- trail: 100, // Afterglow percentage
- opacity: 1/4,
- fps: 20
- },
となっている。opacityとfpsも非公式っぽいが設定できる。 opacityは前後の線の透明度の差。この値を1にするとアニメーションしなくなる。
実際回転させてるわけでなく、線の色を順番に変化させることで動いてるように見せる カラーアニメーションって手法みたいですね。
いい教材になりそうです。
サンプル
上はopacityの値を1にした場合。
実行結果
Javascript
- $(function(){
- var targets = $('.spintest2 p').css({height: 100});
- new Spinner({opacity: 1}).spin(targets.get(0));
- new Spinner().spin(targets.get(1));
- });
HTML
- <div class="spintest2">
- <p></p>
- <hr />
- <p></p>
- </div>
アニメーションの停止と再開
アニメーションを停止するにはstop()を利用する。stop()を実行した場合、DOMから削除されるので再開する場合は再度、DOMへ挿入してspin()をコールする必要がある模様。
サンプル
実行結果
Javascript
- $(function(){
- var target = $('.spintest3').css({height: 100});
- var spin = new Spinner().spin(target.get(0));
- $(':button', '.spintest3').toggle(function(){
- spin.spin();
- }, function(){
- spin.spin(target.get(0));
- });
- });
HTML
- <div class="spintest3">
- <button>一時停止/再開</button>
- </div>