パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
jQueryスライダー Slider Pro の使い方｜Gimmick log
公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├
サイトにスライダー入れたいなら、最も使いやすいスライダーjquery「slider-pro」がおすすめ！ | ナカノマサミツweb企画事務所
サイトにスライダー入れたいなら、最も使いやすいスライダーjquery「slider-pro」がおすすめ！ こんにちは。高校生時代に廊下でよくスライディングをしていたため、すねやおしりが常に破れていたナカノマサミツです。 さて、現存するWEBサイトの非常に多くで導入されているもの、それはスライダー。 スライダーさえいれておけば、なんとなくWEBサイトがいい感じに見えてしまうことから導入を希望されるクライアント様も非常に多いです。 さてそんな大人気のスライダーですが、今日では様々なスライダー系のライブラリがあります。有名なところでいうとおそらくスライダーを導入したことがある人なら一度は使ったことがあるであろう「bxSlider」。 他にも「slick」や「FlexSlider 2」なんかもよく使いました。 が！ 今回紹介するslider proは正直めっちゃ使いやすいです。一瞬でさくっと導入で
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
本文がグラデーションで消える、続きを読むボタンの作り方
本文がグラデーションで消える、続きを読むボタンの作り方 Publish Date: 2017.10.05 画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。 デモはこちら 実際のコード <p class="text hidden"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla molestias et dolore, nisi repellendus odit repellat labore ratione velit quas amet tenetur, quis assumenda voluptate alias laborum aperiam reprehenderit incidunt. Lorem ipsum dolor sit ame
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
結局「下からのスクロール位置」を取得するにはどうすればいいのか - Qiita
最近の Web サービスでよくある「下までスクロールしたら次のコンテンツを読み込む(オートページャライズ)」を実装するためには、当然ですが「下までスクロールしたかどうか」を検出する必要があります。 これが簡単そうに見えて意外と面倒臭く、自分も毎回思い出すのに時間がかかってしまいます。 御託はいいから結論を先に言え これでよさそう function getScrollBottom() { var body = window.document.body; var html = window.document.documentElement; var scrollTop = body.scrollTop || html.scrollTop; return html.scrollHeight - html.clientHeight - scrollTop; } 以下、解説です どんな値が取得できる
【jQuery】スクロール量に応じて発火するサンプルコード | k n note
こんにちは、中村です。jQueryを使ってスクロール量によってイベントを発火させたいケースがそれなりに多いので、サンプルと説明を残しておきます。 追記：scroll系のイベントは発火の回数が著しく多いので、重い処理を入れてしまうとユーザー体験を損なう可能性があります。。もし時間があったら、【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。も合わせて見てもらえたら幸いです。 利用するjQueryメソッド 『scrollTop()』 windowやdocumentなどの要素に対して使えるメソッドです。ページをどれくらいスクロールしたかのスクロール量を測ることができます。 『scroll()』 ブラウザ上でスクロールを行った時に発火するイベントです。スクロール量に応じてイベントを発火させたい場合は『scroll()』を利用して関数を発火させること
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | 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
レスポンシブのサイト制作でjsを読み込み分けるためのjsファイル管理方法 | imasashi.net
久しぶりのサイト制作ネタです。 ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。 だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。 あと、俺がめんどくさがりというのも大きいです。 jsっていうと昔は演出作るのがめんどくさくて手を付けてなかったのですが、最近は色気が出てきてちょっとずつ勉強してます。 で、レスポンシブのサイトだと、デバイスごとにjsを書き分けるとか読み込み分けたくなります。cssはブラウザ幅で簡単に記述を変えられますが、jsはいろいろとやり方がある。 たぶん一長一短あるんでしょうが、今のところの私なりの方法をメモしておきます。 更新. documen
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を書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
Entread
画面スクロールで文字や画像がふわっと現れるアニメーションの方法 スクロールしていくと文字がふわっとでてくるあれについて。そんなに難しく無いだろうと思っていたけどいざやってみると結構ハマったので次はスムーズにできるようにまとめておこうと思う。 まずコチラの記事を参考にしてみた。 http://theorthodoxworks.com/web-design/scrollanimation/ この記事はシンプルに参考コードが記載されていたので非常に分かりやすかった。しかし僕が実装したいのは その要素が画面の範囲に入ると要素が連続でふわっと現れる ものだったのでどうしたものかと。(上の記事だとスクロールしないと要素が連続してでてこない) サンプルはこれ(うまく動かない時はリロードしてね) ひとつめ ふたつめ みっつめ なにをしているかざっくり説明すると、 １.起点となる要素とふわっとさせたい要
スクロールするとふわっと現れる文字や画像 | UNORTHODOX WORKBOOK | Blog
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
javascript-best-2016-may.html
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryはオワコンなのか - ウェブアプリ開発者とウェブサイト制作者の大きな溝
jQueryで高さの取得と設定（height,innerHeight,outerHeight)
Redirecting
Redirecting