Forked from: norahiko's スポットライト的なもの diff(66) 暗闇に浮かぶ文字 norahiko Follow 2011-03-23 23:45:27 License: MIT License Fork3 Fav9 View1427 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 34 lines HTML 19 lines CSS 51 lines 暗闇に浮かぶ文字 jQuery v1.5.1 // 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>> 暗闇に浮かぶ文字 html5doctor.com Reset Stylesheet 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; } // 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; } use an iframe compat browser, deer 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 tags css3 Tweet twitter Tags css3 text visualeffect Favorite by Clockwi_shed.. termat gakkaridesu nehahelo pypupypa sugyan kyo_ago A_456 achichen: textvisualeffect Forked sort new page view favorite forked forked from: 暗闇に浮かぶ文字 yyhayashi303.. 00 144views 35/19/51 css3 forked from: 暗闇に浮かぶ文字 masanori.nag.. 00 137views 35/19/51 css3 forked from: 暗闇に浮かぶ文字 masanori.nag.. 00 145views 35/19/51 css3