これは何？ 画像がフェードイン&フェードアウトするサンプル。 作った経緯 勉強のため。 かつ、ネットには動かないサンプルが大量に転がっていて腹がたったから。 今回重視したのは以下２つです。 v-for と v-if を同時に使いたい時にどうするか理解する transition によるアニメーション挙動を理解する そもそも、v-for と v-if を同時に使うことは非推奨だとドキュメントに書いてあるのに、 ネットでは同時に使っているサンプルが出てくるので、ドキュメントのことを思い出すまでに時間がかかりました。 スタイリングガイドによると、要は フィルタ済みの Object で for を回す template 構文を使って、 for と if を分ける このどちらかにしなければいけないので、今回は後者を選びました。 コード <template> <div class="slider-out
はじめに 普段、BEとWebのFEを体感8:2くらいの割合でやっているので、ガッツリFEをやると、そのたび浦島太郎状態になので、そこでの発見を小出しに書いてみようと思います Vue3でvue-slickがサポートされていなかった Vue3は2020年9月リリースということで特段新しいというわけでもないのですが、新しいものを作るならばと使ってみることにしました。 で、Webサービスでよく見かけるカルーセルを例によって作ることになり「まぁ、vue-slick使えばできるからいいだろう」とたかを括っていたのですが、Vue3はサポート対象外。。。 そこで代案として探していた中で扱いやすそうだった vue3-carousel を触ってみることにしました。（ vue3 と関するだけあってちゃんとVue3で使えます） cf. https://www.npmjs.com/package/vue-slick
<template> <div :class="['child', modifier]"> // コンテンツ </div> </template> <script> export default { props: { modifier: String, }, } </script> 今回 CSS 設計は FLOCSS を参考にした別ディレクトリで管理していましたので、このようなケースが発生しました。 このような場合は props で値を受け渡して、class を bind させればいいですね。 Child.vue で設定しておきたいクラス名がある場合は、上記のような形で配列にしておけばいいですし、条件によってクラスを付け外しする場合はオブジェクトにするケースもあります。 また、SFC 内で CSS が完結していると記述は変わってくると思いますし、カプセル化された Web Component
carouselって何？ carousel(カルーセル)はスライドショーの様に画像が自動でスライドしたり、手動でスライドさせたりとWebサイトにおいてメジャーな動きのある機能ですね。 デモサイト こちらの機能をVue.jsで簡単にできるのでやっていきましょう！ ※Vue CLIで環境構築が済んでいる前提で進めていきますまだの方はこちらを参考に。 Vue.js を vue-cli を使ってシンプルにはじめてみる インストール npm install vue-carousel インストール後、グローバル、使用コンポーネントで記述して使える様にしていきます。 今回はプロフィールコンポーネントで使用したかったのでpurofile.vueに書いていきます。
カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
最近はHTMLやCSSぐらいしか書いていませんが、HTMLやCSSでできることを考えたりしています。 HTML5やCSS3はクロスブラウザ（主にIE）を考えたりすると、現実的でないような気さえしますが、Mobileデバイスに限れば、もう既に一般的な技術です。 HTMLはフォームパーツなどのインタラクティブな要素があります。それらはPerlやPHP、もしくはJavascriptを使ってユーザーと対話するために利用されています。 CSSでも :hover や :active、:visited などの擬似クラスはユーザーとの対話ができるセレクタとして使うことができます。しかし、それらでできるUIには限界がありました。 CSS3ではさらに便利なセレクタが追加されていて、それとフォームパーツなどを組み合わせることで、今までではJavascriptを使用しなければできなかったようなUIが作れると考えま
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Impulse Playground | Two Impulse 3Dでグルグル回転するインパクト大なスライダー実装jQueryプラグイン「Impulse Slider」。 次のような立体がグルングルンと回転しまくるスライダーが実装可能です。 インパクト重視なユースケースにおいて使えそう 関連エントリ レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 色の細かなカスタマイズが可能なスライド式カラーピッカー「jQuery Color Picker Sliders」
:: Alessandro Ferrini :: FerroSlider jQuery Plugin クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 iPhone、iPadなどのタブレットでもレスポンシブに表示されるだけでなく、PCでもタッチ操作も可能なスライダが実装可能 自動再生機能の他、上下左右にスライドを送れるようなユニークな機能も付いている模様。 関連エントリ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCra
jQuery googleslides Gogole＋の写真をスライドショー表示できるjQuery プラグイン「googleslides」。 userid, albumidを指定すれば画像をスライドショーで表示できるっぽいです Google＋の画像をサクッとサイト内にスライド表示したい場合に使えますね 関連エントリ 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 CSS3で画像を分割スライドする超クールなパネル実装例 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innovation Slide」
Hashslider v2 ハッシュフラグメントでブックマークに対応できるスライダー「Hashslider v2」 http://url/#slide1, http://url/#slide2 のように、スライドが切り替わる度にURLが変わり、そのURLをブックマークすれば、指定したスライドから再生ができるというスライダが実装できます レスポンシブで2,3kbで軽量というのも特徴です。 既存スライダーをつかっていても#対応をするとなると割と面倒であることが想像されるため、こうしたブックマークに対応した機能を使いたい場合は最初から使えるものを選ぶのがよさそうですね。 関連エントリ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」 マスク
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script> 本体とプラグインとCSSを読み込みます。 <div class="fotorama">
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
Tiny Circleslider: A lightweight circular carousel for jQuery これは新しい円形のスライダーが実装できる「Tiny Circleslider」。 普通スライダーといえば四角形で横にカッコよくアニメーションするものが基本ですが、画像も円形になっていてナビゲーションも円形になっているというちょっと変わったスライダーが実現できます。 円形に並んだ画像をクリックしたりドラッグ＆ドロップでメインの画像を切替えられます。 ただのスライダーじゃ満足できないという方は覚えておいてもよさそう 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL Apple.comの新スライダーエフェクトを実装するjQueryプラグイン
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード <script type='text/javascript' src='http://ajax.googleapis.c
Adaptor :: jQuery content slider エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」。 表示時間がプログレスバーで表示されたり、切り替えのエフェクトが複数から選べるスライダーです。 スライダー用のプラグインは多数ありますが、１つの選択肢として検討してみてもよいかも ソースはGithubにて公開されています。 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 jQueryとCSS3でダイナミックに動くコンテンツスライダー AppleっぽいデザインのjQueryスライダーサンプル 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く