stickyを使った写真積み

この写真を使って・・・ stickyを使った写真積み sticky:要素をスクロール時にピタッと指定位置に貼り付ける CSSのプロパティ「position: sticky;」・・・面白いですね

続きを読む

泡沫の如し

1 泡沫うたかたの如し 2 方丈記の冒頭部分 項目1で、日常使いませんが、「うたかた」という言葉が思い浮かびました。 これは古文の方丈記か平家物語あたりだった気がする。 PCで「うたかた」を変換すると「泡沫」に、へ~、これうたかたなのか。 そして検索すると、方丈記でした。 短い文でうまく世の理…

続きを読む

写真をドット画に変換

1 白黒写真をドット画に変換 オリジナル写真を、右側のハーフトーンで表示 オリジナル ハーフトーン ※ハーフトーン:写真を一定間隔の点に画像を分解し大きさの異なる点(ドット)で表現した単色画像 2 カラー写真をドット画に変換 オリジナル写真を、右側のハーフトーンで表示 …

続きを読む

JavaScript / 表示の順番を変える / 寿司メニューで

今回は、JavaScriptでHTMLの表示を変える一例です。 1 JavaScript / 回転する寿司メニュー 寿司メニューは、2秒間隔で書き変わっています。 回転を止める ※ 書き変えは、最上段を最下段に移し替え、全体を1つ上に表示 2 HTMLのソースコード <HTMLのソ…

続きを読む

JavaScript / 世界各地の時刻

世界各地を選択すると、そこの時間が分かるという「世界各地の時刻」のJavaScriptを紹介します。 1 世界各地の時刻 地域を選択 東京 ニューヨーク サンフランシスコ ハワイ ロンドン パリ・ローマ シンガポール シドニー・フィジー 世界の各地域を増やすのは、時差さえわか…

続きを読む

JavaScript / 現在時刻の表示

1-1 刻々と変わる現在時刻表示 JavaScriptで取得した現在時刻を 「曜日、月・日・年、時・分・秒、時差、タイムゾーン」の順で表示しています。 ※「GMT+0900」は、UTC協定世界時とJST日本標準時との時差が9時間の意味ですが、Windowsで現在使わないGMTグリニッジ標準時が表示される…

続きを読む

JavaScript / 時間帯であいさつを変更

この「ご挨拶」は、時間帯によって変わります。 1日を3つに区切って、3種類の「ご挨拶」を用意しています。 挨拶を変更する24時間の区切りは  ・おはようございます~4時以降10時未満  ・こんにちわ~10時以降18時未満  ・こんばんわ~18時以降4時未満 の3区分に、補足メッセージを加えました。 以下に、HTMLとJavaScr…

続きを読む

ハチの仲間のいくつかの図鑑

1 ハチ目図鑑のお気に入りのいくつか ハチの仲間は、「ハチ目」「膜翅目・まくしもく」「Hymenoptera」と表現される昆虫のグループです。 ハチはもちろん、アリも含まれます。 それらは「幼虫、蛹、成虫」と、完全変態をします。 そして家族社会を構成しているものが多いのですね。 ハチ目の家族社会では「女王」様が君臨していますし女系社会ですね・…

続きを読む

JavaScriptから単純にHTMLに表示

前回は、16の文字列の表示を1文字ずつ増やし、最終的に16文字すべてを表示しました。 今回は、これを一気に16文字表示するとJavaScriptのソースコードがシンプルになると思い、取り上げてみました。 1 一文字ずつ表記の書き換え前のソース 前回のソースコードです。 <HTMLのソース> <div id="effect">&…

続きを読む

JavaScriptからHTML画面に文字を表示

今日は、JavaScriptでHTML画面に文字を表示してみます。 1 画面に文字列を1文字ずつ増やして表示する 16の文字列があります。 これを1文字ずつ増やして行き、最終的に16文字すべてを表示します。 最終的に「今年は2021年、令和3年です。」と表示されました。 しかし、HTMLにはそのような文字列は何も書かれていない…

続きを読む

時空は絶えず流れている

もう6日ですか・・・じっとしてても時空は同じにあらずですね。 お正月ムードも薄れてきました~時空は絶えず流れている 2021 Meet our Hello everyone! Hi, I'm Lora! Hello, I'm Olivia. …

続きを読む

アニメート花火カードで新年のご挨拶

GanjituFullMoon-Wakei この画像の主役は「花火」ですが、「地球」&「月」も友情参加 アニメート花火カード / Happy New Year 2021でドカパーッポワ~ンと! おうちの中で楽しい「アニメート花火カード」が新発売! 今までも「メロディ・サウンドカード」「ポップアップカード」「立体文字カード」「金箔カード」など、驚…

続きを読む

新年のご挨拶 3日 / 正月三が日

おめでとうございます / 2021年 Happy New Year 2021🎍 from wakei to you   ※ 左クリックで、何度でも「福や夢」がやって来ます。 お正月は、福を持って来てくれる神様を払わないように、掃除はしないとのこと。 お墨付きをいただきありがたいことです。  私は普段も掃除は苦手ですが・・・ 他…

続きを読む

新年のご挨拶 / パララックス利用サイトの紹介

  皆さん、今年もよろしくお願いいたします。 m(__)m 1 新年のご挨拶 / パララックス風 Happy New Year Best regards this year. 2 パララックスを使ったおしゃれなサイト10選~その1 ぜひご覧いただきたいパララックスを使ったとてもおしゃ…

続きを読む

パララックスを使った奥行き演出

パララックス:Webデザイン上で、スクロール動作に応じて、複数のレイヤーの画像等の要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法 「parallax.js3.1.0」を使って、実現しています。 ※jQueryは使用していません。 パララックスを利用した遠近演出 …

続きを読む

パララックスを使った画像の基本

2020/12/29記事、12/30改訂(項目3にソース追加) この画像は、普通に表示しています。 今回は、非常に単純な演出ですが、この画像にパララックス効果を加えてみます。 ※パララックス:電車から見る景色は、遠くのものはゆっくり動き、近くのものほど早く流れます。 このような状態をスクロール速度の違う画像を複数枚重ねて移動させて、電車…

続きを読む

グリッドレイアウト / サイズの異なる画像を配置

1 グリッドレイアウトを使って サイズの異なる画像を配置 CSSで自由なレイアウトを組むときの方法は、主に次の2つが使われます。 ① Grid Layout グリッドレイアウト ② Flexbox フレックスボックス ①のグリッドレイアウトと②のフレックスボックスの両方が使えるようになると、とても便利になります。 ①のグリッドレイアウトの特徴 …

続きを読む

クリスマスのメッセージ

今年もありがとう! | 今は大変ですが、でも「不満」よりも大切なこと、「感謝」の気持です。 今年のすべての出来事に、ありがとうしよう。 途中、現れた苦難にも感謝しとこう。 X'マスだからといって欲しいものはないけど . . . みなさんとその家族や人生の夢、希望、計画が叶いますように。 …

続きを読む

おしゃれなホバー効果デザイン

Karolina GrabowskaによるPixabayからの画像 コーヒーでも飲みながら、落葉の舞を眺めてください。 1 消える枠ホバー効果 Fancy Button 2 スライドホバー効果 Hover me! 3 合体ホバー効果 …

続きを読む

雑誌記事

雑誌風の画面 ※記事の内容は、意味がありません、レイアウト上の存在です。 How To Get Glowing SkinExpert Tips for a Healthy Glow …

続きを読む

外は雪

外は雪 / 窓ガラス効果 暖かい部屋でコーヒーを飲みながら外を眺めると、あっ雪!・・・ …

続きを読む

もうすぐクリスマス

2020/12/17記事、12/17コメント欄表示修正 12/18マウス形状と外枠削除、日時分秒を日本語表記に変更、項目2・項目3と追加 1 クリスマスまでの日時 ことしもあと、2週間。 クリスマスはもうすぐ。 下は、クリスマスまでの日時分秒です。 Christmasまで・・・  日: …

続きを読む

素敵なリンクホバー

蜂が花の上でホバーしています。 1 素敵なリンクホバー 「リンク」の文字にマウスホバーした時の、クルクル感が好きです。 ここは2への リンク です ※マウスホバー:マウスが(対象物の)上に重なる(乗せる)状態。…

続きを読む