ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

Slick.jsやSwiper.js等が全く動かず小一時間無駄にした話

WordpressやLaravelなどでJavaScariptやjQueryが動かない時の対処

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン

ウェブのフロントエンド制作においては必須クラスに重宝すると思います。

今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら

「あれ?動かない、、、」

 

コンソールを見てちょいちょい出てるエラーに対処しても動かず。

表題の通り、小一時間必死に調べて無駄に過ごしました。。

解説記事とか書いていた手前でお恥ずかしい。

 

原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。

続きを読む

【JavaScript】要素をコピーするボタンの作り方

JSでテキストコピーボタンを実装してみた

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。

「これをコピペしてください。ボタンを押すとコピー出来ます」的な。

」こういうアイコンと一緒に表示されてたりもしますね。

 

通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。

 

実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。

続きを読む

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1-2.「AOS編 スクロール連動カスタムイベント」

前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ

AOS (Animate On Scroll)」

について導入、実装について解説しました。

webabc.hatenablog.jp

 

AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回はその表示、または非表示になるタイミングにJavaScriptのイベントリスナを使用して、通常とは別の新しいカスタムイベント処理を追加する方法を解説します。

続きを読む

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」

jQuery不要で超簡単、スクロールに合わせてふわっと表示させられるAOS

サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。

ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。

 

こんな感じにふわっと表示

↑今回ご紹介するのはこの動きの実装方法です。

 

ただ単にアニメーションさせる方法としてはCSSでも可能ですが、スクロールに合わせてとなるとJavaScriptが必須です。

そこでJavaScriptに苦手意識がある人も簡単安心なプラグインでの導入を紹介したいと思います。

 

続きを読む

【JavaScript】ユーザーエージェントでスマホとPCで処理を分岐する方法

スマホタブレット対応といえば、CSSで画面幅に応じて要素のスタイルを変更したり上書きするメディアクエリを用いた方法が主流です。

 

ただ状況によってはJavaScriptでもうまくスマホ/タブレット対応する必要があります。

例えばスマホの場合は余計なファイルを読み込まないようにしたり、処理自体を別のものに置き換えたり。

スマホ表示で使わない容量の大きいファイルを読み込むのは無駄な通信になってしまいますからね。

ページ表示速度やパフォーマンス、ひいてはSEOにも影響があると思います。

続きを読む

【JavaScript】Swiper.jsを使ったスライダーデモ&カスタマイズ方法

jQuery不要スライダーSwiper.jsのカスタマイズ方法デモ例

前回解説したJavaScript製のスライドショープラグイン「Swiper.js」について、カスタマイズ方法をもう少し詳しく見ていきたいと思います。

カスタマイズによっては上の画像のような昔のiTunesっぽいカーバフロースタイルにも出来ます。

導入については前回記事をご参照ください。 

 

webabc.hatenablog.jp

 

続きを読む