本記事の内容 vue.jsでスライダー(カルーセル)を簡単に実装できるコンポーネント VueAwesomeSwiper(MITLicense)を使ってスライダーを作るのが目的です。 環境 windows10 VisualStudioCode vue.js(3.0.3) npm (6.4.1) vuex 1.VueAwesomeSwiperを追加する npm installでVueAwesomeSwiperを追加します
はじめに 自己ポートフォリオを作ってたとき、デザインの勉強をしていたところ、パララックス効果(視差効果)を知りました。 デザインで参考にしたサイトは「Digital Smile Academy」さんのサイトになります http://dsa.clinic/ めっちゃかっこいいから作ってみようと。 JavaScriptでのライブラリを使ってもよかったのですが、アニメーションはなんでもCSSブームが自分の中できてたので 【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。 ↑の記事を参考にさせていただき実装しました。 今回の完成形になります。 Chromeでの動作確認のみしています。 - firefoxとsafariとchromeでの動作確認しました。 Demo : https://sgnz-vuejs-parallax.herokuapp.com/ ソース: NozomiSugi
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く