サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
www.expexp.jp
2018.08.312021.03.24 平成最後の夏が終わりそうなので8月最後に記事を一つ投稿します。 ウェブサイトのメインビジュアル部分にスライドショーを実装するのは定番となりましたが、ただ単純に横スライドやフェードするだけでは差別化できません。他のサイトとは違う個性を出すため、スライド内の要素をもっとアニメーションさせましょう！今回は第２弾です。 前回の記事はこちらです。 前回はSwiperを使ったので、今回はslickを使ってスライド内でアニメーションさせます。どちらも似たような動きをしますが、slickはjQueryに依存します。 スライド内の要素をアニメーションさせるトリガーは、slickのClassである「slick-active」がスライドに付与されるタイミングです。 デモはこちら サンプル01スライドが現れたら拡大するアニメーション。奥行き感が出ます。 HTML<div
2019.02.052021.03.09 webpackで開発を行ってきましたが、導入当初から仕様が変わったり、個人的な設定方法が固まってきたので一旦記事としてまとめます。 ちなみに以前の記事はこちらです。Babelをはじめ、CSS/SASSのバンドル、さらにファイルを分ける設定までを紹介しています（本記事でも同様の内容を紹介）。 今回はwebpackによる環境構築から、JS/CSSファイルの出力、さらにHTMLもwebpackから出力する方法を紹介します。環境はMac、node v10.15.1、npm 6.7.0、webpackのバージョンは4.29以上で進めます（近頃、開発中のwebpack 5の話題を見かける。4の記事を書くのもそろそろ終わりかな）。 目次環境構築ベーシックな設定ファイルを監視する設定JavaScriptをまとめる設定JavaScriptをBabelでトランスパイル
2018.07.312021.03.24 JavaScriptスライダーの定番「slick」を、webpackでバンドルする例を紹介します。基本的には以前にも紹介した「Swiper」と似ています。 webpack関連の記事ですので、slickの詳しい使い方は公式（英語）を参照してください。 slickの基本形webpackでバンドルする構成を確認slickの基本的な形をおさらいしましょう。 slickの基本的な実装例下記はCDN版によるslickの最小実装です。本来は装飾用のテーマCSSが別に必要になります（自作可）。 今回はこの構成を元にwebpackへバンドルしていきますので、まずはslickが動作している状態を作りましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>webpack-sl
2017.09.062021.03.24 ホームや商品紹介ページなどで多く使われるスライドショー。単純に画像をスライドさせるだけでは面白くないという方におすすめな小技を紹介します。 今回紹介するスライダーのプラグインはSwiperを使用しています。レスポンシブ対応で人気のslickでも同じことができますが、同じくレスポンシブ対応でjQueryが不要なSwiperを採用しました。 動作サンプルページ実際のアニメーションサンプルはこちら。 サンプル01スライド上にテキストがフェードインで現れます。 HTML・CSS<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="s-fade-wrap"> <img src="img/img-640x480.gif
2018.04.13 目立たせたい要素にさまざまな目を引く動き（アニメーション）をさせるサイトが増えています。そこで今回は、液体のような流体アニメーションのサンプルを紹介します。 実装には、CSSと滑らかな動きを再現するためにJavaScriptを使います。gifやpngなどの画像を使わず、シンプルなコードで流用もしやすいお手軽アニメーションです。 完成形サンプル最終的に目指す完成サンプルはこちら。 サンプルでは流体（水っぽいもの液体）が無重力空間にあるかのようにむにゅむにゅな動きをしています。 流体の要素を作成アニメーションさせる要素を作ります。幅と高さを設定するため、divなどのブロック要素が好ましいです。今回はdivに「fluid」というclassを付与しています。 HTML<div class="fluid"></div> SASSCSSで流体の幅と高さを決めます。流体の色はbac
2018.04.152019.02.21 【2019年版】webpack 4 個人的設定まとめとして、新たに再編集しました。最新の設定はこちらの記事にて紹介しています。 フロントエンドに必須技術となってきたwebpack。自分も少しずつ案件に取り入れつつ覚えてきましたが、便利すぎて手放せなくなってきました。最初はJavaScriptのBabelを使うためだけに使っていましたが、欲が出てSASS（SCSS）のビルドもwebpackで行うようになりました。構築環境をまとめると管理や修正が楽ですし、なにより作業工数を削減することもできます。 今回はwebpackによる環境構築から、ファイルの出力までを紹介します。環境はMac（macOS Sierra）、node v10.1.0、npm 6.4.1、webpackのバージョンは4.17以上で進めます（記事アップデート前は4.12）。webpack
このページを最初にブックマークしてみませんか？
『www.expexp.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
