Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
doctype
html
  head
    meta(charset="utf-8")
    <meta name="description" content="doya_cat">
    title test
    script(src="https://code.jquery.com/jquery-3.0.0.js")
  body
    div.wrapper
    div.container
      div.img_wrapper
        img(src="http://creatorsblog.nijibox.jp/wp/wp-content/uploads/2016/07/doya_cat_s.png")
        span.txt
​
 
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;
  }
}
​
 
$(function(){
    $('.txt').append("ドヤァ!!");
    setInterval(function(){
      $('.txt').delay(100).fadeOut(200,function(){
          $(this).fadeIn(200);
        });
    },1000);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x