これは何？ 画像がフェードイン&フェードアウトするサンプル。 作った経緯 勉強のため。 かつ、ネットには動かないサンプルが大量に転がっていて腹がたったから。 今回重視したのは以下２つです。 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つだけ表示するにはオーバーフローを使用し、-
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
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
Create beautiful image sliders entirely in CSS. No jQuery, no JavaScript, no image icons, no coding! It's amazingly fast, light, responsive, and retina-ready. Works on all devices and browsers. KenBurns, Slide, Fade, Zoom effects and some flat skins are available (more coming soon). Download a ai website builder for Windows and Mac now!
最近は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">
FractionSlider: jQuery parallax Slider Plugin | jacksbox.design パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 最近よく見る縦スクロールするとパララックス効果、ではなく横にスライドしてアニメーションっぽいスライダーが作れるプラグインです 単なる画像をペラペラ紙芝居っぽくめくるのではなくて、よりアニメっぽい表現が可能です。 <div>をリストにして定義し、中身を記述していけば作れるようです Flashでやってたようなことも、どんどん置き換わっていますね 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可
この記事は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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く