便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress
汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー
CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる
サンプル See the Pen Opening Fake Shutter with pure CSS by digistate (@digistate) on CodePen. やっていることはごく簡単で、オープニングシャッター用の最前面のレイヤー要素(.shutter)を CSS アニメーションで変形させながら、最終的に非表示にして背面に移動させているだけです。 HTML の構造 HTML の構造もシンプルです。 オープニングシャッター用の要素(.shutter)を最初に記述し、その後にメインのページコンテンツ(.container)を配置します。 <div class="shutter"></div> <section class="container"> <!-- ここにメインコンテンツ --> </section> CSS の構造 オープニングシャッター用の要素は、最前面に表示し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
