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

暗闇に浮かぶ文字

norahiko

2011-03-23 23:45:27

License: MIT License

Fork: 3

Fav: 9

View: 1427

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; }

Tweet
QR code
Embed

Design view
Code view
<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>
zip