無限テキスト背景君

文字入力後、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廃止等で動かないページもあります。