Forked from: norahiko's スポットライト的なもの diff(66)

暗闇に浮かぶ文字

norahiko

2011-03-23 23:45:27

License: MIT License

Fork: 3

Fav: 10

View: 1539

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 34 lines
HTML 19 lines
CSS 51 lines

暗闇に浮かぶ文字
jQuery v1.5.1

var strings = $(".string-container > span")
  var stringElementStyle = []
  
  strings.each(function(i, string){
    var offset = $(string).offset()
    stringElementStyle[i] = {
      width: $(string).width(),
      height: $(string).height(),
      left: offset.left,
      top: offset.top
    }
  })
  
  $(".layer").mousemove(function(event){
    spotlight.css({
      left: event.clientX- (spotlight.width / 2),
      top: event.clientY - (spotlight.height / 2)
    })
    strings.each(function(i, string){
      var style = stringElementStyle[i]
      
      var shadowX = ((style.left + (style.width / 2)) - event.clientX) / 15
      var shadowY = ((style.top + (style.height / 2)) - event.clientY) / 15
      $(string).css("text-shadow", shadowX + "px " + shadowY + "px 5px rgba(0, 0, 0, 0.5)")
    })
  })
})

暗闇に浮かぶ文字
html5doctor.com Reset Stylesheet

// forked from norahiko's "スポットライト的なもの" http://jsdo.it/norahiko/jiSP $(function(){ var spotlight = $(".spotlight") spotlight.width = spotlight.width() spotlight.height = spotlight.height() var strings = $(".string-container > span") var stringElementStyle = [] strings.each(function(i, string){ var offset = $(string).offset() stringElementStyle[i] = { width: $(string).width(), height: $(string).height(), left: offset.left, top: offset.top } }) $(".layer").mousemove(function(event){ spotlight.css({ left: event.clientX- (spotlight.width / 2), top: event.clientY - (spotlight.height / 2) }) strings.each(function(i, string){ var style = stringElementStyle[i] var shadowX = ((style.left + (style.width / 2)) - event.clientX) / 15 var shadowY = ((style.top + (style.height / 2)) - event.clientY) / 15 $(string).css("text-shadow", shadowX + "px " + shadowY + "px 5px rgba(0, 0, 0, 0.5)") }) }) }) <div class="spotlight"> <div class="ring"></div> </div> <div class="layer"> <div class="string-container"> <span style="left: 250px; top: 10px;"><Canvas></span> <span style="left: 10px; top: 50px">Semantic Web</span> <span style="left: 290px; top: 80px;">CSS3</span> <span style="left: 80px; top: 140px;">SVG</span> <span style="left: 130px; top: 200px; font-size: 60px;">HTML5</span> <span style="left: 280px; top: 180px;">Web Workers</span> <span style="left: 10px; top: 240px;">WebGL</span> <span style="left: 250px; top: 310px;"><Audio></span> <span style="left: 40px; top: 330px;">Storage</span> <span style="left: 10px; top: 400px">Geolocation</span> <span style="left: 320px; top: 420px;"><Video></span> </div> </div>>html, body{ width: 100%; height: 100%; overflow: hidden; } .layer{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: none; } .spotlight{ position: absolute; top: -600px; left: -600px; width: 600px; height: 600px; border-radius: 50%; -moz-border-radius: 50%; box-shadow: 0px 0px 0px 2000px black, 0px 0px 150px 150px black inset; -moz-box-shadow: 0px 0px 0px 2000px black, 0px 0px 150px 150px black inset; } .spotlight .ring{ position: absolute; left: -5px; top: -5px; width: 590px; height: 590px; border-radius: 50%; -moz-border-radius: 50%; border: 10px solid black; } .layer .string-container span{ position: absolute; white-space: nowrap; font-weight: bold; font-size: 40px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/za76/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/norahiko/za76" title="暗闇に浮かぶ文字">暗闇に浮かぶ文字 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code