【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

Geeklog
投稿者: 表示回数71 印刷用ページ

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

参考サイト:
https://yuyauver98.me/scroll-visible-range-underline-animation/

Geeklogで活用するには以下のように自動タグで利用します。

html

<p>[text-scroll-underline:pink ピンクの事例]</p>
<p>[text-scroll-underline:yellow 黄色の事例]</p>
<p>[text-scroll-underline: ブルーの事例]</p>
css

.Text-Span {
  position: relative;
  z-index: 1;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0%;
  height: 8px;
  background: #dfdfff;
  z-index: -1;
  transition: all 0.8s;
}
.Text-Span.isActive:after {
  width: 100%;
}
.Text-Span-pink:after {
  background: #FFDFEF;
}
.Text-Span-yellow:after {
  background: #ffffbc;
}
Javascript追加

$(window).on('scroll',function(){

  $(".JS_ScrollAnimationItem").each(function(){
    var position = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > position - windowHeight + 100 ){
      $(this).addClass('isActive');
    }
  });

 });
自動タグ: text-scroll-underline
<span class="Text-Span Text-Span-#1 JS_ScrollAnimationItem">#2</span></p>

リンクとアンダーライン

Geeklog
投稿者: 表示回数47 印刷用ページ

自動タグ:[ a-blue:/ pink pink pink ]:
blue blue blue

自動タグ:[ a-pink:/ pink pink pink ]:
pink pink pink

自動タグ:[ a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow ]:
yellow yellow yellow

自動タグ

a-blue:

<a href="#1" class="underline-leftinright underline-height-3px">#2</a>
a-pink:

<a href="#1" class="underline-leftinright underline-color-pink underline-height-3px">#2</a>
a-yellow:

<a href="#1" class="underline-leftinright underline-color-yellow underline-height-3px">#2</a>

cssの例: https://www.ivysoho.net/layout/modern_geek/css/underline.css

参考サイト: https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html

WEB会議システムのオープンソース Jitsi(ジッツィ)

Geeklog
投稿者: 表示回数77 印刷用ページ
WEB会議システムのオープンソース Jitsi(ジッツィ)があります。

コミュニティーは無料で利用できます。
https://meet.jit.si/

さくらのクラウドでスタートアップスクリプトが用意されています。
https://cloud-news.sakura.ad.jp/2020/04/16/startup-script-jitsimeet/

導入過程:
https://qiita.com/mshigefuji/items/40672405733bb354bd44

https://qiita.com/zembutsu/items/a50c70ca17b501caf6c4

EPUBをWEBで表示するオープンソース Bibi

Geeklog
投稿者: 表示回数141 印刷用ページ
EPUBをWEBで表示するオープンソース Bibiがあります。
EPUB形式へは、MACのPagesなどでも書き出すことができます。

ダウンロード:
https://bibi.epub.link/

Bibiは特定のディレクトリに20弱のソースファイルをアップロードするだけで動くので、Weeblyでも動きます。

wordhtml

Geeklog
投稿者: 表示回数1,049 印刷用ページ
WordやEXCELをHTMLフォーマットにオンラインで変換するサイト

https://wordhtml.com

MACのおすすめアプリ

Geeklog
投稿者: 表示回数1,383 印刷用ページ
Windowsから MACにとうとう乗り換えました。

使ってみると、標準でOfficeが用意されていて便利だし、何といっても画面キャプチャー機能やその描画機能がとても良いです。
Devasや秀丸に対応するアプリが今のところないのですが、それはWindowsアプリを動かせるようにするEasyWineで解決するので問題ないですね。

以下、主なアプリです。

・FileZilla FTP, SSH
 クロスプラットフォーム
 オープンソース

・Resizedit.app 画像一括縮小 
 ディレクトリー構造ごと一括処理。
 最大ピクセル数指定可能
 無料

 画像一括縮小は、様々ありますが、Resizedit.app が最も使いやすいです。
 ただし現在のところmacOS Mohave ver 10.14.5では、画像書き出し先を指定すると何も書き出されないというバグがあります。

・Atom+less plugin Less書き出し 
 Atomはテキストエディタとしてタブ機能があるので便利。
 プラグインで様々拡張可能。
 オープンソース

・EasyWine.app  Windowsアプリを実行
 Windowsでしか動かないアプリDevasを動かす時だけ利用
 他、マクロを使いたいときだけ秀丸も。
 正規表現で階層ごとファイルを一括置換できるアプリはMacでは見当たらない。

・Illustrator やはり定番。

・Safari IE検証
 マルチブラウザー機能が便利。
 参照 
 https://blanche-toile.com/web/multibrowser-check

・FireAlpaca.app 筆圧タブレットを使って描画も

・7zX.app 圧縮・解凍 オープンソース
・Alfred 検索
・CotEditor 正規表現での検索・置換ができるテキストエディタ

他 macOS標準機能が便利

・メモ.app iPhoneと同期して便利
・メッセージ iPhoneと同期して便利
・Numbers.app EXCEL互換
・Pages.app Word互換 
・Keynote.app Powerpoint互換 プレゼンテーション
・プレビュー.app

画面キャプチャーはShift+Command+5
※保存した後のスクリーンショット機能での描画機能が秀逸


試したいもの
・VirtualBox


入力機器:Wacom 筆圧タブレット

物件 Google Mapsの表示のしくみ

Geeklog
投稿者: 表示回数1,476 印刷用ページ

Google Maps表示は、緯度経度がわかっている場合は以下のソースをテンプレートに埋め込みます。


    <style>
       #map{code} {
      	border:solid 1px #666;
        height: 350px;
        width: 100%;
				background-color: grey;
       }
    </style>

    <div id="map{code}"></div>


   <script>
      // This example adds a marker to indicate the position of Bondi Beach in Sydney,
      // Australia.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map{code}'), {
          zoom: 15,
          center: {lat: {lat}, lng: {lng}}
        });

        var image = '{site_url}/images/maps/icons/icon_{data_type_mst_disp}.png';
        var beachMarker = new google.maps.Marker({
          position: {lat: {lat}, lng: {lng}},
          map: map,
          icon: image
        });
      }
    </script>


		<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=キー&callback=initMap">
    </script>

Weeblyを活用する際に注意すべき点

Geeklog
投稿者: 表示回数2,900 印刷用ページ
CMSを独自にインストールしてサイトを運営するより、Weeblyで可能ならWeeblyを使ったほうが効率的なサイトは実はほとんどそうなんのではないかと思います。

ただ、Weeblyは、英語版がデフォルトでなので、日本語環境でははまりがちな点がいくつかあります。

1.サイトのエンコーディングをかならず日本語にすること。

設定で、かならず日本語に変更してください。
管理画面の日本語設定だけでなく、各サイトごとにエンコーディングを設定にて変更できます。

2.タイトルなどがHTMLエンコーディングされて出力されているので、デコードして、確認しておくこと。

特にタイトルは重要です。
デコードは、たとえば以下のサイトでデコードできます。

http://www.convertstring.com/ja/EncodeDecode/HtmlDecode

3.トップページの、SEO タイトル は必ず設定しておきましょう。これがサイトトップページのタイトルとなり、SEOで最も重要な文字列となります。

[インスタグラム]instagramに直リンクする埋め込みコードを取得する方法

Geeklog
投稿者: 表示回数1,814 印刷用ページ

インスタグラムのサムネイルをサイトに埋め込む方法として、もっとも使われているサイトはPowrです。

日本の比較サイトでよく紹介されているSnapWdgetだと、インスタグラムへ直リンクにならず、広告も表示されてしまうに対して、Powrは直リンクになり、広告はなく、編集画面へのリンクのみとなります。Powrは、日本語で紹介されているサイトが見受けられませんが、実は最もおすすめのサービスです。

無料からはじめられ、有料サービスにより、更新頻度を高めたり、掲載数を増やしたりできます。

htmlコードを取得する方法のほか、Weeblyなど各種サービスでアプリをインストールして利用することもできます。

最初 | 前へ | 1 234567| 次へ | 最後