jQuery Content Slider | Responsive jQuery Slider | bxSliderWe value your experience and would love to hear your thoughts. Could you spare just two minutes to fill out a quick survey? Your feedback helps us make bxSlider even better! Thank you for your support 🤗
fullPage scroll snapping. Create full screen pages fast and simple
The best! Proud of being the most complete framework of its kind. Trusted by the most innovative companies. Compatible Working in modern and old browsers too! Even IE 9! Make a beautiful site for all! Not just a few! Easy! fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation and both community and personal support.
スクロールするとふわっと現れる文字や画像 | UNORTHODOX WORKBOOK | Blog
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
ImageMapster - Make Image Maps Useful
ImageMapster makes HTML image maps useful. ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids. Note: ImageMapster used to be distributed as a ZIP archive. You can still download the full package including e
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
MeanMenu
The Main Features Hide or show menu children Target navigation element to swap out with MeanMenu Orientation adjustment (centered menu will reposition when you tilt the device) Control screen width at which MeanMenu activates Expanding/Collapsing sub navigation Bundled with configurable CSS Quick to setup and configure Media Query independent The Demo The dedicated demo page All of the boring “how
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。
ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ！というのがなかなかなかったので自作してみました。 ダウンロード 使い方 下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.smoothScroll.js"></script> あとは普通にページ内リンクを設定するだけです。 <div id="header"> ヘッダー内容
[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX | コリス
Effect -LetterFx LetterFXの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body> Step 2: HTML アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。 <p
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
[JS]縦長ページで構造に合わせて水平コンテンツをうまくレイアウトするスクリプト -gridscrolling.js
メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置するjQueryのプラグインを紹介します。 垂直・水平スクロールを使ったウェブページだけでなく、プレゼン用のスライドなどにも利用できそうですね。 gridscrolling.js gridscrolling.js -GitHub gridscrolling.jsのデモ gridscrolling.jsの使い方 gridscrolling.jsのデモ デモは右上にあるマップのようにコンテンツが配置されており、垂直に並んでいるのがsection要素、水平がそのsection要素のサブにあたるaside要素になっています。 操作はキーボードの矢印キーで、普通にマウスのホイールでも操作はできます。 スクリプトが利用できない環境でも問題ありません。 sectionはsection、
Japan Map ( jQuery plugin )
Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
[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
スクロールするとfixedで途中から固定する | Regista20
2013年04月26日 jQuery スクロールすると途中から固定したメニューを作ります。はじめからメニューが最上部にあるものだと最初から「position:fixed」でスクロールした際に、メニューを上部に固定するできます。しかし、メニューが最上部にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとjQueryを利用する必要がなります。 コードサンプル HTML <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"> <div id="nav">ここを固定する</div> </div> </div> CSS #main { float: left; margin-right: 20px;
ジャイロセンサーに対応したパララックス（視差効果）のあるコンテンツを実装するスクリプト・parallax.js
スマフォサイト用のパララックス実装スクリプトがあったので一応メモ。使用は未定ですけど、ちょっと面白かったので覚えておこうと思います。 ジャイロセンサーの値を取得してパララックス効果をスマフォで実装する、というもの。用途は限られそうですけど、使い方次第では面白いコンテンツが作れるかもしれませんね。 PCサイトではマウスの位置で、スマフォでは本体の傾きに応じてパララックス効果を確認出来ます。 $('#foo').parallax();jQueryまたはZeptで使えるみたいです。 <ul id="foo"> <li class="layer" data-depth="0.00"><img src="layer6.png"></li> <li class="layer" data-depth="0.20"><img src="layer5.png"></li> <li class="layer"
【jQuery】IE8以下で透過PNGのopacityアニメーションが黒く汚れるのを回避する | バシャログ。
そうめんと水出しのお茶があれば生きていける気がしてきたhakoishiです。 さて、今回はjQueryで透過PNGのopacityアニメーションがバグるのを回避する方法です。 透過画像をアニメーションさせた時、IE8以下でフチが黒くなって困った経験をお持ちの方、いらっしゃるのではないでしょうか？ 発現条件 発現する条件は、この4点です。 画像は透過png。 画像自体にopacityアニメーションを設定している。 画像にフィルター（AlphaImageLoader）をかけている。 ブラウザはIE8以下。 回避するためのポイント 回避するためのポイントはこの2点。 画像にフィルター(AlphaImageLoader)をかける。 アニメーションの対象を、その画像を包括する要素にする。 移動やサイズ変更もしたい場合、包括要素も画像と同じサイズにしておくと扱い易いと思います。 サンプルを作りましたの
[JS]パスワード入力時・入力後に一時的にパスワードを可視化するスクリプト -hideShowPassword
demo 3: チェックボックス Hide/Show Passwordsの使い方 Step 1: 外部ファイル 外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。 ※jQueryとZeptoの兼用プラグインとなっています。 <script> document.write('<script src=vendor/' + ('__proto__' in {} ? 'zepto.custom' : 'jquery') + '.js><\/script>') </script> <script src="hideShowPassword.min.js"></script> Step 2: HTML HTMLは通常通りのフォームの作成です。 <div class="login"> <input type="text" placeholder="Usern
jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」
TOP > WebDesign > jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」 最近では動画や音楽もFLASHに頼ること無く、HTMLとjsのみで扱えるようになってきて、jQueryを利用すれば、かなり高度なプレイヤーを実現することも可能です。今日紹介するのはシンプルなものから一風変わったものまで、jQueryで実現する動画、音楽プレイヤーを集めたエントリー「10 Useful jQuery Video & Audio Players」です。 Responsive & Touch-friendly Audio Player 全部で10個の動画、音楽プレイヤーが紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 HTML5 Music Player シンプルな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lightweight Grid jQuery Plugin