海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
Vue.js/Nuxt.jsで使える！便利なUIパッケージ紹介 - Qiita
Vue.js/Nuxt.jsで開発しているときに便利でアイディアの広がるUIコンポーネントを紹介したいと思います。 良さそうなのを見つけたら随時更新していこうと思います！ vue-carousel 簡単にカルーセルを実装できるUIコンポーネント。レスポンシブ対応もされています！ vue-swipe スワイプ動作の実装を簡単にできるUIコンポーネント vue-snotify 幅広くカスタマイズできる通知のUIコンポーネント vue-twitter-counter Twitter風のカウンターを実装できるUIコンポーネント vue-poll Twitter風の投票UIを作れるコンポーネント vue-stepper シンプルなフォームのステッパーを作成できるUIコンポーネント vue-circle-menu ボタンをタップするとボタンが出るUIコンポーネント vue-star スターアニメーショ
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
jQueryでよく使う動きをVue.jsでやってみる - Qiita
最近、Vue.jsが流行っており、「デザイナーがとっつきやすいのがVue.js」だとか、 「脱・jQueryできる」だとか、そんなような言葉をちらほら見かけます。 Vue.jsはできることが多く素晴らしいものですが、デザイン側としては アニメーションなどのフロント面の実装することが多いので、その視点で果たして「脱・jQuery」が どこまでできるものなのかどうか・・・というのが気になりました。 よって、今回は実際にjQueryでよく使っているやつをVue.jsでやってみることにしました。 ※HTMLとCSSは省略します。すみません。 クリックしたらClassを付与（トグル） jQueryの場合
JS初心者がVue.jsでSPAを作ろうと思ってやったこと - Qiita
まえがき Vue.jsをはじめたきっかけ はじめまして。Qiita初投稿です！ 社内転職でエンジニアになるため、JavaScriptの勉強をしています。(今は整体師です) 5月にProgateの有料会員になり2ヶ月で全コースを修了。 Progateをクリアしたら次に何をするか迷ったのですが…「JavaScriptをマスターしよう！」と思い、JSの本を読み漁りました。 『知識ゼロからのJavaScript入門』とか、『JavaScriptとことん入門』とか『JavaScript本格入門』とか。(技術評論社の本わかりやすくて好き) 本をたくさん読むうちにだんだん自分で何か作りたい欲が湧いてきました。そんな時に出会ったのがこの記事です。 >フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話 (Qiita) 「これなら自分にもできそうだし面白そう！」と思い、Vue.jsを
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
jQuery しか使ったことのないデザイナーに Vue を教えた（報告書） - Qiita
事の起こりはこんな会話でした。 D 「タブ表示みたいなデザインにして組み込みをしたのですが、js が上手く動かないんです・・・」 M 「どれどれ・・・――― 全部 jQuery？ え？ React とか Vue 使ったら？」 D 「え？ えー・・・」 そろそろ View において jQuery が素敵じゃないことに気づいて欲しくて、Vue を教えてみました。 よくあるタブ機能を Vue 2 で実装します。 動作環境をつくる 私は JSFiddle を勧めました。 １画面で、HTML、CSS、js を変更できる。 共有ができる。 途中経過を見ることができる。 ソースのフェッチができる。 埋め込み要素が作成できる。 以上から、js モックを作るときによく使用させていただいております。 似たようなサービスに CodePen があります。 もちろん、通常のエディターとブラウザでも構いません。 自身
【JavaScript】スクロールに連動して要素を自由自在に表示させる［AOS］の使い方
ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト［AOS（Animate On Scroll Library）］の使い方を紹介します。 まずは試しに実装してみたサンプルをご覧ください。 DEMO : https://on-ze.com/demo/js-aos/ 要素を表示させる際の動きは「Fade」「Flip」「Zoom」の３種類が用意されています。 ここにタイミングや速度、上下左右の動きや回転の向きを指定できるので、実際にはかなり多くのカスタマイズが可能です。 jQuery不要で動くのも嬉しいですね。 配布されているJSファイルとCSSファイルの２つを読み込み、特定の要素に『data-aos』属性を指定するだけで動きます。 各ファイルのダウンロードは以下より。 AOS : http://michalsnik.github.io/aos/ AOS（Animate
Tilt.js - Parallax tilt effect for jQuery
The most basic usage: Add <script src="tilt.jquery.js"></script> right before the closing </body> tag Mark your elements with <span data-tilt></span> Creating a parallax effect Add transform-style: preserve-3d to your tilt element. Add a transform: translateZ(20px) to your inner elements that have to pop out. Glare effect: Setting this option will enable a glare effect. You can tweak the glare val
普段Vue.jsでフロントエンド開発するときの構成と運用時のポイント - Qiita
Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu
東京Node学園祭2016 | 11月12日,13日開催！
Douglas Crockford was born in Frostbite Falls, Minnesota, but left when he was only six months old because it was just too damn cold. He turned his back on a promising career in television when he discovered computers. He has worked in learning systems, small business systems, office automation, games, interactive music, multimedia, location-based entertainment, social systems, and programming lan
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
webpackとbowerを使ってreact.jsを読み込みgulpでビルドする - Qiita
はじめに webpackが流行ってきているようなので、がんばって使ってみます。 流れが早すぎておじさんには辛いです。 せっかくwebpackを使うのでreact.jsを使ってみます。 こちらもはじめて。 webpackとは jsの依存関係を解決して、複数のjsファイルを1つに結合してくれるビルドツールです。 大規模なアプリケーションを開発する際に、力を発揮しそうです。 ◎gulpなどで結合するのとの違い gulpなどでjsファイルを結合する際は、読み込み順を気にする必要がありますが、 webpackの場合、requireした箇所でモジュールを読み込んでくれるので順番を気にする必要が無いようです。 webpackを使ってみる ◎webpackをインストール
Flickity v2 · Touch, responsive, flickable carousels
Install Download CDN Package managers License Commercial license Open source license Getting started Initialize with jQuery Initialize with vanilla JavaScript Initialize with HTML Next Feature showcase wrapAround freeScroll groupCells autoPlay lazyLoad Parallax Images View all options Flickity in use People like Flickity Install Download CSS: flickity.min.css minified, or flickity.css un-minified
React.js meetup #3 - 資料一覧 - connpass
「React.js meetup #3」の資料一覧です。
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - matthewhudson/current-device: The easiest way to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
