Webサイト上でバナーや商品のサムネイル画像などの見せ方として、並べられた画像（コンテンツ要素）を一定のスピードで自動でスライドして、無限ループさせているものをたまに見かけます。 そんなビューアー的役割のコンテンツ無限ループスライダーを作ってみたので紹介してみます。 まずは動作のサンプルから。 jQuery LOOPSLIDER【SAMPLE】 10個並べてある画像が自動でスライドし、無限にループしています。 この動作の全体構成について、HTMLから。 ◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="1

Beautiful, flexible and responsive Lightbox Plugin to present various types of content famously.

CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。

TOPjQuery ColorboxでjQueryのモーダルウィンドウを実装する方法 ColorboxでjQueryのモーダルウィンドウを実装する方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, モーダルウィンドウ Colorboxというレスポンシブにも対応したモーダルウィンドウプラグインの使い方をまとめました。 IE Testerで確認したところ、IE7でもいけました！素晴らしいです！ デモページ Colorbox配布先 ライセンス-MIT 以前ご紹介したMagnific Popupというプラグインでも似た結果が得られますが、iframeで表示した際、ウィンドウが一定の幅以下になると別ページに遷移するという点が案件に合わなかったので（これがいい場合もあるのですが）こちらを使ってみました。 用意されたCSSや画像を組み込むだけできれいに表示されますが、今回は

<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>

昨日ポートフォリオサイトをアップしたら、予想外に多くの反響を頂いてびっくりしています。 Twitter / Search - yoshiko-pg.github.io ありがとうございます。素直に嬉しいです。 素直にうれしいので例のサイトの作り方でも書いてみようかと思います。 実は結構簡単な仕組みですｗ スクロール量に応じて簡単に要素を動かせるskrollr スクロールでの動きにはこちらのJSライブラリを使用しました。 skrollr - parallax scrolling for the masses 使い方 操作したい要素にdata-[スクロール量]という属性をつけて、値に変化させたいcssを記述するだけ。 <div class="box" data-0="left: 0%;" data-500="left: 100%;">test</div> <script src"./jquer

プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須

作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU

公開日：2015.11.20 更新日：2020.05.18 jQuery, ナビゲーション jQueryのクリックやマウスオーバーで、コンテンツをスライドさせて表示する方法です。 ちょっとしたtipsを表示させる場合なんかにも、動きがついてかわいいかもですね。 IE8↑で動作確認しています。 jQueryライブラリの読み込みだけで、その他のプラグイン等は使用していません。 デモページ 右からマウスオーバーでスライドさせる CSS スライドさせる要素の親要素に対し、下記のようなスタイルを付与します。 今回はposition:fixed;で絶対配置にしていますが、相対配置でもOKです。 横幅を指定し、right: -140px; で初期位置を指定しています。この場合は-140px分右ヘ移動するので、40px分だけ画面に出ているということになります。 z-indexの値は、スライドさせるコンテン

infinityforest.net 2024 著作権. 不許複製 プライバシーポリシー

TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル

Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

今回は、HTMLとCSSだけでスクロール時に背景画像にパララックス効果を付けるご紹介です。 実装に関しては、とても簡単に出来ますので、どこかで使えるかなーと思いながら自分の備忘録用としても書いておきたいと思います。 特に1カラムのサイトやポートフォリオなどに使えるパララックス効果だと思いますし、ストーリー性を持たせたりすると面白そうだなーとか思いながらデモサイトを作っていました。 下記にデモサイトも用意していますので、ご参考頂ければと思います。 デモサイト 実装方法 それでは、実装方法をご説明していきたいと思います。 基本的にHTMLとCSSしか利用しないので、とてもスムーズに実装出来るかと思います。 まずは、最初にHTMLでマークアップをしていきます。 <div class="parallax parallax_img_1"> <div class="box"> <h2>Parallax

写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。 一度に全ての画像がフェードインするよりも 滑らかな読み込みアニメーションを演出することができます。 この画像（コンテンツ要素）が順番にフェードインしながら表示する演出を jQueryを使って簡単シンプルに実装する方法を紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像が左上から順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"

指定した要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグイン「jquery-scrollInTurn.js」を作りましたので、配布します。 最近実装の多かったパターンをプラグイン化しました。 もくじ Demo Download Howto Options Examples Demo 指定した要素がスクロールで画面内に入った時、内包要素を順番にフェードインさせています。

今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 ［Remodal］の必要なファイルを読み込む はじめに［Remodal］の公式サイトより、必要なファイルを入手してきます。 Remodal : http://vodkabears.github.io/remodal/ GitHub : https://gith