CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ
テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a Text Link on Hover by Katherine Kato 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. background-clip: text;を使ったテクニック 2. widthまたはheightを使ったテクニック 3. clip-pathを使用したテクニック 4. transformを使用したテクニック まとめ はじめに ホバー時にテキストリンクのカラー
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
jQueryで360度写真を使ったスライドギャラリーを作成する方法 | BlackFlag
最近ではTHETAやGoProなどのカメラを使って、360度見渡せる写真を撮影することが簡単になり、Webサイト上にも360度の写真を掲載するコンテンツを見かけるようになりました。 室内の様子やきれいな風景など、ユーザーが自ら画面を操作して360度の世界を見渡せることで、Webサイト上で今までとは違った体験ができ、臨場感のある世界観を表現することができます。 そんな360度写真を複数枚並べたスライドギャラリーをjQueryを使って作成する方法を紹介してみます。 「jQueryで360度写真を使ったスライドギャラリーを作成する方法」サンプルを別枠で表示 360度ビューの部分の動作については、「Pannellum」プラグインを使用させていただいてます。 【プラグイン】Pannellum 画面上の360度ビューアー上をドラッグすることで、写真を360度の方向に回転させることができるほか、マウスホ
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法｜BLACKFLAG
5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたが、ブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。 【横スライドパターン】 jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法 「横スライドパターン：jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示 まずは横方向にスライドするパターンの実装についてです。 Webページに横に並べられた要素が右から左へ流れ続けます。 動作自体はただひたすら要素が流れ続けるシンプルなものです。 スライド全体にマウスオーバーした際には、スライド動作を一時的に止め、マウスアウトするとスライドが再開します。
ブラウザの幅全体をメイングラフィックにするスライドショーを作成する【jQuery連載11】 | HTML5でサイトをつくろう
前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
![[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/854418a1d6f45d24d878040e9370f59845bb3b0c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091702.png)
スライドショーのプラグイン
Nivo Slider For WordPressというプラグインを利用しています。 最後まで画像が進んだら繰り返してスライドするのではなく、スライドを停止させたいのですがどうすればできますでしょうか？ オプションも見てみましたが見当たらずスライドを停止させる方法がわからず困っております。 また、絶対Nivo Slider For WordPressでないといけない理由もないのでスライドショーが簡単に実装できるプラグインがあれば教えてください！ nivoslider4wp-show.phpの61行目を以下のようにすれば、最後のスライドを表示した時点で止まるんじゃないかと思います。 lastSlide: function(){ $('#slider').data('nivo:vars').stop = true; }, // Triggers when last slide is shown
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex
役に立つプレゼン資料・企画書が集まったサイト「bikkuri（ビックリ）」