sutanto1983のブックマーク / 2016年10月16日

[jQuery/Javascript]li要素をクロスフェードするシンプルなjQueryプラグインをつくりました | Wood-Roots:blog

li要素をクロスフェードするだけのシンプルなプラグインをつくりました。画像とテキストが混じった状態でも順番にフェードイン・フェードアウトを繰り返します。 DEMOはこちらダウンロードもともとプラグインではなくベタに書いてとある案件で使ったのですが、簡単なつくりのわりには思いのほか使い勝手がよさそうなのでプラグインにしました。画像ではないテキストはWindowsXP以前の環境ではとても見出しやキービジュアルでは使うことなどできなかったのですが、最近の環境ではWindows環境でもそこそこきれいに見えます。そこで画像と文字をアニメーションさせるだけでもまぁまぁいけるんじゃ？と思ったのが作成したきっかけです。 HTMLはきわめてシンプルです。.slide_textというクラスがあるliはテキストです（クラス名はオプションで変更できます）。

sutanto1983 2016/10/16

クロスフェード　フェード

jquery

リンク

【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。

jQuery を使って、画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショーを紹介します。簡単に設置できることはもちろん、JavaScript、HTML、CSS がすべて短いコードで書かれているのが特徴です。百聞は一見に如かず。まずはサンプルをご覧ください。クロスフェードで切り替わるシンプルな画像スライドショー：サンプルデモ jQuery依存なので、まずはHTMLの <head>〜<head> 内でjQueryを読み込みます。 <head> <script src="/js/jquery.js"></script> <head> JavaScript の書き方 $(function(){ // 設定 var $width =640; // 横幅 var $height =300; // 高さ var $interval = 3000; // 切り替わりの間隔（ミリ

sutanto1983 2016/10/16

フェード　クロスフェード

jquery

リンク

建販「ついのすみか」鳥取の地域密着型工務店

鳥取の地域密着型工務店。建販は近くの山で採れた木材と自然素材を活かした木の家づくりを推進すると共に、人にも環境にもやさしい住まいをご提供します。

sutanto1983 2016/10/16

家　オレンジ　暖かい

webデザイン

リンク

CSS transformscaleのhoverで画像拡大 - Qiita

sutanto1983 2016/10/16

ホバー　スケール　拡大

CSS3

リンク

繰り返し画像を横にスクロールさせるjQueryプラグイン「infiniteSlide」｜アド･エータイプ　スタッフブログ

今回はjQueryのプラグイン「infiniteSlide」をご紹介します。「infiniteSlide」は横方向に繰り返し画像をスクロールさせることができるプラグインです。 WEBサイトのメイン画像などは複数の画像を使用して、自動で繰り返しスライドさせたいということがあると思います。 jQueryのプラグインでも画像をスライドさせる物はたくさん存在しますが、とてもシンプルで活用できそうだったので下記に使用方法を記載します。「infiniteSlide」で無限に画像をスクロールする方法下記のページから「infiniteSlide」をダウンロードします。 https://github.com/woodroots/infiniteslide ファイル読込 jQuery、ダウンロードした「infiniteSlide」を読み込みます。 <script type="text/javascri