You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト! ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト|GitHub|デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box. Minified and gzipped, its total footprint weights about 3kB. It requires jQuery or Zepto (with the callbacks, deferred and data modules). Demos Image Inline Google Maps YouTube Vimeo URL Installation All ready-to-use files are located in the dist/ directory. Incl
Yo! We’re leaving this post up, but this is really old and we super don’t maintain Alton. You can probably find a better scroll-jacking solution, if you should even use one. Alton is a jQuery-powered scrolling plugin that utilizes 100% height & width, custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes the whole scrolljacking idea,
作成:2015/03/2 更新:2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ 1.クリック時のエフェクト 2.フォームクリック時のエフェクト 3.テキストに11種の動きを出すエフェクト 4.分離するエフェクト フルスクリーンの見栄えをよくする 5.フルスクリーン 縦スライド3つ 6.全画面+オーバーレイ 7.フルスクリーン背景+ローディング 8.写真から背景色を抽出 9.background-size 対策 ドロワーメニュー 10.ドロワーメニュー3つ スクロールエフェクト 11.スクロ
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ:下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント:Google Fonts (Raleway, Lato) アイコン:Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
jQuery plugin Pile your sections one over another and access them scrolling or by URL!
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。(たまにjQueryが必須でないものもあります。) ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
Use available browser space to show images Make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers. For the most simple use case load the nessecary files and call the plugin after the ready event is fired: <link rel="stylesheet" href="css/fullsizable.css"> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></s
Googleの画像検索をよく使うのですが、一覧に並んだ画像に加えて、それをクリックした時のアニメーションや説明表示など使い勝手がとてもいいです。さすがGoogleといった所ですが、そのUIを真似ると色々な場面で使えるかも知れません。 そこで使ってみたいのがjQuery.GI.TheWall.jsです。jQueryベースであのGoogle画像検索ライクな表示が実現します。 jQuery.GI.TheWall.jsの使い方 こちらが画像一覧です。適当な画像をクリックします。 アニメーションしながら画像の詳細が出ます。デモなのでクリックした画像と表示される画像は関係ありません。 左右の矢印で次の写真に切り替えられるようになっています。 テキストの説明を出すことも可能。 単純に写真を出すだけでなく、アニメーションしながら大きな写真を出すというのは格好いいです。また説明文も出せますので、自分の撮った
Categories HTML/(X)HTML (33) HTML5 (26) CSS (122) CSS3 (82) jQuery (334) TIPS (157) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (31) Mootools (8) iPhone/iPad/iPod/Android (26) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (52) WebサイトGallery (17) Web素材 (44) Web開発用ツール (28) Web情報 etc… (8) リリース情報(その他) (17)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く