【JS】アンカーへの画面遷移時に表示位置がズレてしまうときの対策

アンカーポイントがずれてしまう
ハッシュタグを使用してアンカーの位置にジャンプしようとしたとき、LazyloadやSlick.jsなどのSliderを使っているせいか、画像表示ページが伸縮するために、意図する位置で表示されないことが起こりました。
具体的には画像スライダーのあるページに<form>でお問合せフォームを設置していて、actionには自らのページにハッシュタグを付けており、submitで送信後に戻ってきたときにスクロール位置がずれました。しかも、パソコンとスマホ(iPhone…

【JS】水の波紋のようなエフェクトで演出をする『jQuery Ripples』

画面上に水滴をたらしたようなエフェクト

ホームページの背景に波紋のようなエフェクトを加えてくれるjQueryツールを見つけたのでメモ。随分前から存在して板みたいなのですが、たまたま見つけました。味気ないホームページにちょっとした遊びごころを加えたいときにちょうど良さそうです。

公式ページ

基本ソース例

jQueryjquery.ripples.jsを読み込んで、以下の設定を加えるだけで設置完了です。任意の#id.classなどの要素を指定します。画像にマウスカーソルを移すと、カーソルの動きに合わせて水面が波を打ちます。

※imgに直接classidを指定したら動作しませんでした。以下のデモはスタイルシートでbackground-imageに画像を指定しています。

<style>
div.ripples-1 {
  background-image: url('/blog/images/noimage-448.png');
  width: 448px;
  height: 299px;
}
</style>
<div class="div.ripples-1"></div>

<script src="js/jquery-3.6.0.min.js"></script>
http://js/jquery.ripples-min.js
<script> 
  $('div.ripples-1').ripples();
</script>

カスタマイズした例

以下は波紋の大きさや解像度などを指定した例です。

<style>
div.ripples-2 {
  background-image: url('/blog/images/noimage-448.png');
  width: 448px;
  height: 299px;
}
</style>
<div class="div.ripples-2"></div>

<script src="js/jquery-3.6.0.min.js"></script>
http://js/jquery.ripples-min.js
<script> 
$('div.ripples-2').ripples({
  	resolution: 512,
   dropRadius: 20,
   perturbance: 0.04,
});
</script>

パラメータ

名前 タイプ ディフォルト 説明
imageUrl string null 背景画像の指定。背景として使用する画像のURL。存在しない場合、プラグインはbackground-image代わりに計算されたCSSプロパティの値を使用しようとします。Data-URIも受け入れられます。
dropRadius float 20 ドロップサイズ。キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズ(ピクセル単位)。
perturbance float 0.03 屈折量。基本的に、リップルによって引き起こされる屈折の量。0は、屈折がないことを意味します。
resolution integer 256 解像度。レンダリングするWebGLテクスチャの幅と高さ。この値が大きいほど、レンダリングがスムーズになり、リップルの伝播が遅くなります。
interactive bool true マウスのクリックとマウスの動きが効果をトリガーするかどうか。
crossOrigin string “” 影響を受ける画像に使用するcrossOrigin属性。詳細については、MDNを参照してください。

(参考ページ:https://github.com/sirxemic/jquery.ripples#options

自動で実行する例

公式のサイトにもありますが、以下のコードを使用して自動的に水滴を落とすことができます。

$('body').ripples("drop", x, y, radius, strength)

以下が具体的なソース例です。

 

なぜかこの画面上では動かないのですが、まったく同じソースのデモページを用意しました。

デモページ

<style>
div.ripples-3 {
  background-image: url('/blog/images/noimage-448.png');
  width: 448px;
  height: 299px;
}
</style>
<div class="ripples-3"></div>

<script src="js/jquery-3.6.0.min.js"></script>
http://js/jquery.ripples-min.js
<script>
$(document).ready(function() {
  $('div.ripples-3').ripples({
    resolution: 128,
    dropRadius: 10,
    perturbance: 0.04,
    interactive: false
});

// Automatic drops
setInterval(function() {
  var $el = $('div.ripples-3');
  var x = Math.random() * $el.outerWidth();
  var y = Math.random() * $el.outerHeight();
  var dropRadius = 20;
  var strength = 0.04 + Math.random() * 0.04;

  $el.ripples('drop', x, y, dropRadius, strength);
  }, 400);
});
</script>

【jQuery】モバイルにも対応したLightbox以外のモーダルウィンドウプラグイン

簡単で便利なLightboxを探す
画像ギャラリーの写真を拡大するLightboxで、モバイルに対応していて、設置が簡単で操作性たいいものを探してして見つけたものをメモ。
Fancybox
モバイルにも対応していて、設置が簡単。モーダルで表示したら「前へ」「次へ」と画像を切り替えることができ、Youtubeを含めiFrameに対応している。jQueryが必要。

CDN

Lightcase
これもモバイルやYoutubeに対応しているが、Fancyboxの方が使いやすそう。j…

S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた(Amazon SES + AWS Lambda + API Gateway)

はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」で公開したウェブサイトに、メールフォーム付きのお問い合わせページが欲しくなるケースも多いと思います。 そこで今回は AWS のクラウドサー […]…

ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた(microCMS + Amazon S3)

はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、と […]…

Having fun with jquery — Numbers to words

Having some fun with jquery, its cool btw…
Type in some numbers in the input box, (it should be in focus when u load this page, if not well u know who to blame – jquery of course, not me :-P)
And if you (un)knowingly type in something other than a number, it should tell you whats wrong.
Then click “Convert to words” and you’ll get your number in words… one in Indian number system and another one in international standard. And, if you are really trying this out, you can use keyboard enter, escape.. i bound them to calculate and hide the results etc.

Just some plain short fun 🙂

[you can use enter and escape]

Enter a number:

And yeah, of course, here’s the code (use this link to convert ur javascript into blogger friendly code):



http://abhi-sanoujam-blogspot-posts.googlecode.com/svn/trunk/js/jquery-1.3.2.min.js
<script type="text/javascript">
function NumberToWords() {

var units = [ "Zero", "One", "Two", "Three", "Four", "Five", "Six",
"Seven", "Eight", "Nine", "Ten" ];
var teens = [ "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen",
"Sixteen", "Seventeen", "Eighteen", "Nineteen", "Twenty" ];
var tens = [ "", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty",
"Seventy", "Eighty", "Ninety" ];

var othersIndian = [ "Thousand", "Lakh", "Crore" ];

var othersIntl = [ "Thousand", "Million", "Billion", "Trillion" ];

var INDIAN_MODE = "indian";
var INTERNATIONAL_MODE = "international";
var currentMode = INDIAN_MODE;

var getBelowHundred = function(n) {
if (n >= 100) {
return "greater than or equal to 100";
};
if (n <= 10) {
return units[n];
};
if (n <= 20) {
return teens[n - 10 - 1];
};
var unit = Math.floor(n % 10);
n /= 10;
var ten = Math.floor(n % 10);
var tenWord = (ten > 0 ? (tens[ten] + " ") : '');
var unitWord = (unit > 0 ? units[unit] : '');
return tenWord + unitWord;
};

var getBelowThousand = function(n) {
if (n >= 1000) {
return "greater than or equal to 1000";
};
var word = getBelowHundred(Math.floor(n % 100));

n = Math.floor(n / 100);
var hun = Math.floor(n % 10);
word = (hun > 0 ? (units[hun] + " Hundred ") : '') + word;

return word;
};

return {
numberToWords : function(n) {
if (isNaN(n)) {
return "Not a number";
};

var word = '';
var val;

val = Math.floor(n % 1000);
n = Math.floor(n / 1000);

word = getBelowThousand(val);

if (this.currentMode == INDIAN_MODE) {
othersArr = othersIndian;
divisor = 100;
func = getBelowHundred;
} else if (this.currentMode == INTERNATIONAL_MODE) {
othersArr = othersIntl;
divisor = 1000;
func = getBelowThousand;
} else {
throw "Invalid mode - '" + this.currentMode
+ "'. Supported modes: " + INDIAN_MODE + "|"
+ INTERNATIONAL_MODE;
};

var i = 0;
while (n > 0) {
if (i == othersArr.length - 1) {
word = this.numberToWords(n) + " " + othersArr[i] + " "
+ word;
break;
};
val = Math.floor(n % divisor);
n = Math.floor(n / divisor);
if (val != 0) {
word = func(val) + " " + othersArr[i] + " " + word;
};
i++;
};
return word;
},
setMode : function(mode) {
if (mode != INDIAN_MODE && mode != INTERNATIONAL_MODE) {
throw "Invalid mode specified - '" + mode
+ "'. Supported modes: " + INDIAN_MODE + "|"
+ INTERNATIONAL_MODE;
};
this.currentMode = mode;
}
}
}

function clear() {
$("#errSpan").hide();
$("#resultDiv").hide();
}

var num2words = new NumberToWords();

function translate() {
clear();
var input = $("#input").val();
if (isNaN(input)) {
$("#errSpan").html("This is not a number - " + input);
$("#errSpan").show();
$("#input").focus();
return;
};

num2words.setMode("indian");
var indian = num2words.numberToWords(input);

num2words.setMode("international");
var intl = num2words.numberToWords(input);

$("#resultDiv").html(
"<table bgcolor='#CCFFFF'><tr><td>In India</td><td>" + indian
+ "</td></tr><tr><td>Internationally</td><td>" + intl
+ "</td></tr></table>");
$("#resultDiv").show("slow");

}

$(document).ready( function() {
$("#resultDiv").hide();
$("#input").focus();
$(document).keypress( function(e) {
if (e.keyCode == 27) {
clear();
};
if (e.keyCode == 13) {
translate();
};
});
});
</script>

<div id="content" align="center">[you can use enter and escape]<br />
<span id="errSpan" style="color: #FF0000;"></span>
<div>Enter a number: <input id="input" type="text" size="15" /><input
type="button" onclick="translate()" value="Convert to words" /></div>

<div id="resultDiv" style="border: solid black 1px;"></div>
</div>