jQuery入門--タイポグラフィの表現

2025年02月15日 | jQuery

タイポグラフィの表現

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jquery-3.7.1.min.js　CDN 及び 1.13.3/jquery-ui.min.js

【Webデザイン】
下図のように、文字を浮かせる。また、マウスを動かすと、影も動く様ににする

【フォルダ作成】

【コード書く】
1.index.html
続1

・CSS/main.css

* Base

html {

"Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

font-size: 16px;

line-height: 1.5;

}

body {

background-color: #656565;

}

img {

vertical-align: middle;

}

button {

outline: none;

}

::selection {

background: #b3d4fc;

text-shadow: none;

}

.page-header {

background-color: #fff;

}

.page-header h1 {

width: 976px;

height: 80px;

margin: 0 auto;

padding-left: 10px;

font-size: 20px;

font-weight: normal;

line-height: 80px;

letter-spacing: 0.1em;

}

.page-main {

position: relative;

}

.page-main > div {

padding: 50px 0 100px;

}

.page-main > div h2 {

color: #fff;

text-align: center;

margin: 0 0 50px;

font-weight: normal;

letter-spacing: 0.15em;

}

#typo {

margin: 0;

padding: 0;

background-color: #3498db;

font-weight: bold;

font-size: 110px;

color: #fff;

text-align: center;

line-height: 500px;

height: 500px;

/*ユーザーがテキストを選択できるかどうかを指定する*/

-ms-user-select: none;/*edge用*/

-webkit-user-select: none;/*クローム用*/

-moz-user-select: none;/*フアイアー用*/

user-select:none;

}

#typo .inner {

position: relative;

width: 976px;

margin: 0 auto;

}

.page-footer {

background-color: #0f033b;

}

.page-footer small {

display: block;

color: #fff;

font-size: 11px;

text-align: right;

width: 976px;

margin: 0 auto;

height: 120px;

line-height: 120px;

letter-spacing: 0.15em;

}

.page-footer a {

color: #fff;

text-decoration: none;

}

・js/main.js

$(function(){

var duration = 300;

// typo ----------------------------------------

//プラグインの呼び出し---

$('#typo').typoShadow();

});
【プラグイン】
・js/typoShadow.js

//(function($) { ... })(jQuery);

//これは無名関数（匿名関数）を定義し、その場で実行する

(function($){

var uid = 0,

now = (function(isDateHasNow) {

return function() {

if (isDateHasNow) {

return Date.now();

} else {

return +(new Date);

}

};

})(!!Date.now);

function typoShadow(e){

var $typo = this,

center = $typo.width() * 0.5,

radius = e.radius,

x = (roundMinMax(-radius, radius, e.pageX - $typo.offset().left - center) / radius).toFixed(3) - 0,

y = Math.sin(Math.acos(x)).toFixed(3) - 0;

$typo.css('text-shadow', '0 1px 0 #ccc,' +

'0 2px 0 #c9c9c9,' +

'0 3px 0 #bbb,' +

'0 4px 0 #b9b9b9,' +

'0 5px 0 #aaa,' +

'0 6px 1px rgba(0,0,0,0.1),' +

'0 0 5px rgba(0,0,0,0.1),' +

1 * -x + 'px ' + 1 * y + 'px 3px rgba(0,0,0,0.3),' +

3 * -x + 'px ' + 3 * y + 'px 5px rgba(0,0,0,0.2),' +

5 * -x + 'px ' + 5 * y + 'px 10px rgba(0,0,0,0.25),' +

10 * -x + 'px ' + 10 * y + 'px 10px rgba(0,0,0,0.2),' +

20 * -x + 'px ' + 20 * y + 'px 20px rgba(0,0,0,0.15)');

}

function roundMinMax(min, max, value){

if(min > value) value = min;

if(max < value) value = max;

return value;

}

$.fn.typoShadow = function(options){

var $typos = this;

options = $.extend(true, {

radius: 800,

throttle: 33,

remove: false

}, options);

if (options.remove) {

$typos.each(function(){

var $typo = $(this),

tid = $typo.data('typoShadowId');

if (tid) $typo.removeData('typoShadowId').off('mousemove.' + tid).css('text-shadow', '');

});

} else {

$typos.each(function(){

var $typo = $(this),

tid = 'typoShadow' + uid++,

timer = now();

if ($typo.data('typoShadowId')) return uid--;

$typo

.data('typoShadowId', tid)

.on('mousemove.' + tid, function(e){

var _now = now();

if (_now - timer < options.throttle) return;

timer = _now;

e.radius = options.radius;

typoShadow.call($typo, e);

});

typoShadow.call($typo, {pageX: 0, radius: options.radius});

});

}

return $typos;

};

◆解説

(関数($){

var uid = 0 の場合、
//即時実行関数
now = (function(isDateHasNow) {
戻り値 function() {
if (isDateHasNow) {
現在のタイムスタンプで、1970年1月1日 00:00:00 UTC からのミリ秒)を返します
Date.now()を返します。
} else {
//コンストラクタ
戻る +(new Date);
}
};

})(!!日付.now);

関数 typoShadow(e){
var $typo = これ,
center = $typo.width() * 0.5,
半径 = e.radius、
x = (roundMinMax(-radius, radius, e.pageX - $typo.offset().left - center) / radius).toFixed(3) - 0,
y = Math.sin(Math.acos(x)).toFixed(3) - 0;

$typo.css('テキストシャドウ', '0 1px 0 #ccc,' +
'0 2px 0 #c9c9c9,' +
'0 3px 0 #bbb,' +
'0 4px 0 #b9b9b9,' +
'0 5px 0 #aaa,' +
'0 6px 1px RGBA(0,0,0,0.1),' +
'0 0 5px RGBA(0,0,0,0.1),' +
1 * -x + 'px ' + 1 * y + 'px 3px rgba(0,0,0,0.3),' +
3 * -x + 'px ' + 3 * y + 'px 5px rgba(0,0,0,0.2),' +
5 * -x + 'px ' + 5 * y + 'px 10px RGBA(0,0,0,0.25),' +
10 * -x + 'px ' + 10 * y + 'px 10px rgba(0,0,0,0.2),' +
20 * -x + 'px ' + 20 * y + 'px 20px rgba(0,0,0,0.15)');
}

関数 roundMinMax(min, max, value){
if(最小値>値) 値 = 最小;
if(最大値<値) value = max;
戻り値;
}

$.fn.typoShadow = function(オプション){
var $typos = これ;
オプション = $.extend(true, {
半径:800、
スロットル:33、
削除: false
}, オプション);

if (options.remove) {
$typos.each(関数(){
var $typo = $(これ)、
tid = $typo.data('typoShadowId');
if (tid) $typo.removeData('typoShadowId').off('mousemove.' + tid)
.css('text-shadow', '');
});
} else {
$typos.each(関数(){
var $typo = $(これ)、
tid = 'typoShadow' + uid++,
タイマー = now();
if ($typo.data('typoShadowId')) 戻り値 uid--;

$typo
.data('typoShadowId', tid)
.on('マウスムーブ.' + tid, function(e){
var _now = now();
if (_now - タイマー < options.throttle) return;
タイマー= _now;
e.radius = options.radius;
typoShadow.call($typo, e);
});

typoShadow.call($typo, {pageX: 0, radius: options.radius});
});
}

$typosを返します。
};

})(jQueryの)