GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
Learn Vue 3: Step by Step on Laracasts Vuejs 2 Authentication Tutorial on Auth0 blog Create a GitHub File Explorer Using Vue.js on Scotch.io Vue.js Tutorial on Vegibit Vuex introduction video - James Browne from London Vue.js Meetup #1 Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli Vue.js Introduction Turkish Language on oguzhan.in Vue.js VideoTutoral Series in Spanish (3-8
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション 最終更新日：2017年11月16日 （初回投稿日：2017年04月22日） SVGアニメーションの続きです。 前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。 本日のINDEX Snap.svg でモーフィングアニメーション クリックでモーフィングするサンプル 連続ループでモーフィングするサンプル モーフィングの応用（他サイト様をメモ） その他 SVGアニメーションのための JavaScriptライブラリ Snap.svg でモーフィングアニメーション Snap.svg は Adobe社が提供しているライブラリです。 これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーシ
![[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/c45e8f5f3f125fcbd6360ee956d828c6ae8dd2d4/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-121.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F170320-3.gif)
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
背景写真に「ぼかし効果」を巧く使ったWebデザイン事例（簡単なチュートリアル付き）｜Tips*Blog｜株式会社コプロシステム
こんにちは、コプロシステムWebデザイングループの石川です。 先月7月29日付のエントリーで、美しくて・フルスクリーンな写真イメージをWebサイトの背景に使用する手法が2013年のトレンドになっている ということで、いくつかの事例をまとめました。 →思わず魅入ってしまう、美しく大きい写真素材を巧みに使ったフルスクリーンデザインのWebサイト・23選（2013/7/29） 背景に写真イメージを活用したデザイン手法として、フルスクリーンデザイン以外にも、「ぼかし効果（ブラーエフェクト）」を取り入れているWebサイト、最近では特に「元の素材が何なのかがわからないくらい強くぼかした写真イメージ」を取り入れているWebサイトのデザインが海外サイトを中心に増えている気がします。 これは、写真そのものの美しさ というよりも、 ぼかすことで新たな美しさを表現したり 奥行き感を表現したり そこに乗っかってい
ホバー時に様々な効果を付けるjQueryプラグイン「Hoverizr」 | Blog
ダウンロード こちらからプラグイン「jquery.hoverizr.js」をダウンロードします。 設置方法 <head>内でjQuery本体とダウンロードした「jquery.hoverizr.js」を読み込みます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="js/jquery.hoverizr.js"></script> 続けて以下のように記述すると、ホバー時にグレースケールから元画像に変わるという効果が付きます。 <script type="text/javascript"> $(window).load(function() { $('画像のclass名かid名').hoverizr(); }); </script> オプショ
SPOILER ALERT!
Don't spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click. Works with copy: Sharon shoots Adama. It's really tragic. There's so much blood. Haha. Classic Sharon! Turns out Jesus dies, but is brought back to life. A twist worthy of M Night Shamamanalayan! On the Itchy & Scratchy CD-ROM, is there a way to get out of the dungeon without using the wizard key? You have to fin
Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGで滑らかなモーフィング（変形）を！SVG Morpheus の使い方 | ARAKAZE NOTE
背景画像にぼかし効果をかけることができるjQueryプラグイン「Image Blur Plugin」｜アド･エータイプ スタッフブログ
http://www.hp-stylelink.com/news/2013/09/20130924.php
Welcome to nginx!