bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptCSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」JavaScript2016.07.5CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」jcSliderは、アニメーションを使用しないスライダーのプラグインです。すべてをCSS3で指示します。距離やサイズを計算する必要は一切ありません。スライダーの常識を覆すプラグインです。アニメーション化したい要素にクラスを追加したり消去したりするだけでいいのです。これ以上に簡単なものはあったでしょうか。レシポンシブ対応のプラグインとなっているので、ご安心ください!jcSliderjcSliderの実際のデモは以下になります。デモjcSliderは、CSSアニメーションで応答するスライダーjQueryプラグインです。1KBと、とても軽量なファイルです。jsファイルはたった1つだけです。本当に必要なことができれば、それで十分なのです。アニメーション化したいものがあれば、それはHTMLでも画像でもなんでも可能です。スライドと聞くと、左右上下に画像が流れていくイメージをお持ちの方も多いかと思います。jcSliderは、そのイメージとは異なり、並べた画像がそれぞれ指定したエフェクトで表現されると思ってください。大量の画像ギャラリーに埋め込むよりは、コンテンツそのものの入口としてインパクトを持たせて表現することに適しているという印象をうけました。実装は、必要なファイルをダウンロードし、それらを読み込めば、あとはulとli要素を使用しHTMLをマークアップします。jcSliderの魅力ですが、なんといってもスライドエフェクトの種類が豊富であることです。配布サイトで紹介されているだけでも74種類ありました。スライドさせたいものが画像であるか、テキストであるか、またインパクトを与えたいとき、静かに見せたいときなど様々なクライアント・制作者の意向に合わせて選択できます。一部を下記に紹介します。bounce、flash、pulse、rubberBand、shake、swing、tada、wobble、jello、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown......従来のサイトにjcSliderを追加するだけでも、これまでと違うインパクトのあるサイトに仕上げることができると思います。サイトのイメージチェンジを考えている方もぜひチェックしてみてください。Ima...JavaScriptスクロールしても常にナビゲーションメニューが上部に固定されるjQueryプラグイン「stickUp」...stickUpというjQueryプラグインを使えば、スクロールしてもナ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。