無限テキスト背景君

文字入力後、F11で全画面表示して、PrtScrでスクリーンショットを撮ってね ダブルクリックで元の画面に

view source

JavaScript

$(function(){
  var infoText = '-';
  var h = $('h1,h2');
  var div = $('<div>').css({wordWrap:'break-word'}).text(infoText).on('dblclick', function(){
    revBack();
  });
  var form = $('<form>');
  var input = $('<input>').val('ABCDEFG').css({width:160}).on('change', function(){
    setBack();
  });
  var size = $('<input>', {title:'文字サイズ',type:'number'}).css({width:44}).val('12').on('change', function(){
    var val = $(this).val();
    input.css({
      fontSize: val + 'px'
    });
    div.css({
      fontSize: val + 'px'
    });
  });
  var fontColor = $('<input>', {title:'文字色',type:'color'}).css({width:44}).on('change', function(){
    var val = $(this).val();
    input.css({
      color: val
    });
    div.css({
      color: val
    });
  });
  var backgroundColor = $('<input>', {title:'背景色',type:'color'}).css({width:44}).on('change', function(){
    var val = $(this).val();
    div.css({
      backgroundColor: val
    });
  });
  var weight = $('<select>', {title:'太字'}).css({width:120}).on('change', function(){
    var val = $(this).val();
    input.css({
      fontWeight: val
    });
    div.css({
      fontWeight: val
    });
  });

  var weights = [
    'noramal',
    'bold',
    'lighter',
    '100',
    '200',
    '400',
    '900',
  ];
  weights.forEach(function(v){
    var opt = $('<option>').text(v).css({fontWeight:v});
    weight.append(opt);
  });

  var fontFamily = $('<select>', {title:'フォント'}).css({width:120}).on('change', function(){
    var val = $(this).val();
    input.css({
      fontFamily: val
    });
    div.css({
      fontFamily: val
    });
  });
  var fonts = [
    'MS ゴシック',
    'HGゴシックE',
    'HGゴシックM',
    'HGP創英角ゴシックUB',
    'HG丸ゴシックM-PRO',
    'メイリオ',
    'Arial',
    'Arial black',
    'Impact',
    'monospace',
    'sans-serif',
    'serif',
  ];
  fonts.forEach(function(v){
    var opt = $('<option>').text(v).css({fontFamily:v});
    fontFamily.append(opt);
  });

  var btn = $('<button>').text('OK').on('click', function(){
    setBack();
    return false;
  });

  $('#code').hide();
  $('#demo').append(form).append(div);
  form
    .append(input)
    .append(size)
    .append(fontColor)
    .append(backgroundColor)
    .append(weight)
    .append(fontFamily)
    .append(btn);
  
  var setBack = function(){
    var val = input.val() || '-';
    console.log(val);
    val = val.repeat(8000);
    div.text(val);
    form.hide();
    h.hide();
    $(document.body).css({
      overflow:'hidden',
      height:'100%',
      width:'100%',
    });
    document.body.requestFullscreen();
  };
  var revBack = function(){
    form.show();
    h.show();
    div.text(input.val());
    $(document.body).css({
      overflow:'auto',
    });
    document.exitFullscreen();
  };

});

CSS

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-text-loop-wallpaper/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。