レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
ホームページにアニメーションを実装するライブラリ＆プラグイン12選
アニメーションは、もはやホームページを作る上で必須の要素と言えます。 単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。 一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。 今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。 10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。 ぜひ使いやすいライブラリを見つけてみてください。 ホームページにアニメーションを実装するライブラリ＆プラグイン12選 1. Animate.css https://daneden.github
プラグインなしで拡大しながらフェードで切り替わるスライド - yuri memo
拡大しながらフェードインするスライドを実装したのでめもめも。 さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。 とりあえず、デモをのせますね。 1. フルスクリーン背景バージョン 2. 通常スライドバージョン フルスクリーンか通常のかはHTMLとCSSで変更し、jsは全く同じものです。 $(window).load(function(){ var slide = $('.slideshow'); var i = 0; // ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン slide.find('.item').eq(i).fadeIn(2000).addClass('in'); // スライドの枚数を調べて変数に格納 var total = $('.slideshow .item').length -1; // 処理を繰り返
[CSS]シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック
パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。 実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。 Zooming Background Images 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。 Fitbit このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。 実装には多くの方法があります このエフェクトを実現するには、多くの異なる方法があります。 一つの選択肢として、jQueryのプ
![[CSS]シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/ef43b70cc6a162f1c12009ce51de6ba83db49b86/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016081602.gif)
jQueryでアニメーションをループさせる方法｜Gimmick log
公開日：2015.11.10 更新日：2020.05.18 jQuery, アニメーション アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。 ※2020年5月18日 サンプルが表示されなくなっていたので修正しました
【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方
今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 ［Remodal］の必要なファイルを読み込む はじめに［Remodal］の公式サイトより、必要なファイルを入手してきます。 Remodal : http://vodkabears.github.io/remodal/ GitHub : https://gith
[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ
縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。 Popper.js Popper.js -GitHub ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。
![[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1314d511ba3f16af07815026a8e0a870e8098/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041101.jpg)
Alton: jQuery Scroll Jacking Plugin - Paper Leaf
Yo! We’re leaving this post up, but this is really old and we super don’t maintain Alton. You can probably find a better scroll-jacking solution, if you should even use one. Alton is a jQuery-powered scrolling plugin that utilizes 100% height & width, custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes the whole scrolljacking idea,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者がチェックしておきたい、CSSのライブラリのまとめ
フルスクリーンのスクロールページを作れるjQueryプラグイン「Alton」:phpspot開発日誌