doya_cat

エディタテスト

HTML

<div class="wrapper"></div>
    <div class="container">
      <div class="img_wrapper"><img src="http://creatorsblog.nijibox.jp/wp/wp-content/uploads/2016/07/doya_cat_s.png"><span class="txt"></span></div>
    </div>

SCSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
  background: #fff;
}
img{
  width: 100%;
}
.wrapper{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding: 20px;
 transform:translateY(-50%);
  margin: auto;
  width: 90%;
  height: auto;
  .txt{
    width: 4em;
    display: block;
    position: absolute;
    right: 5%;
    top: 60%;
    margin: auto;
    font-size: 2em;
    text-align: left;
    margin-top: 10px;
    box-sizing: border-box;
    font-weight: bold;
    color: red;
  }
}

JavaScript

$(function(){
    $('.txt').append("ドヤァ!!");
    setInterval(function(){
      $('.txt').delay(100).fadeOut(200,function(){
          $(this).fadeIn(200);
        });
    },1000);
});