WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

スポットライト

f:id:mmmmofu:20170427215058p:plain

http://efu.sakura.ne.jp/web/mask/

以前書いた記事
mmmmofu.hatenablog.com

background-clip: textにした文字「●」をpaddingで動かしてスポットライト風にする。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スポットライト</title>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="spotright"></div>
</body>
</html>
html, body, div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN",
    meiryo,
    sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #131313;
  overflow: hidden;
}

.spotright {
  width: 100%;
  height: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
  background-image: url(ph01.jpg);
  background-size: cover;
  font-size: 200px;
  box-sizing: border-box;
  cursor: default;
}
$(function(){
  $(window).on('mousemove', function(e){
     $('.spotright').css({'padding-top':e.pageY - 100, 'padding-left': e.pageX - 100});
  });
});