Forked from: norahiko's スポットライト的なもの diff(66) 暗闇に浮かぶ文字 norahiko Follow 2011-03-23 23:45:27 License: MIT License Fork3 Fav10 View1539 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 Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> css3 Tweet twitter Tags CSS3職人 css3 text visualeffect Favorite by Clockwi_shed.. termat gakkaridesu nehahelo pypupypa sugyan kyo_ago A_456 chapa0106: CSS3職人 achichen: textvisualeffect Forked sort new page view favorite forked forked from: 暗闇に浮かぶ文字 yyhayashi303.. 00 151views 35/19/51 css3 forked from: 暗闇に浮かぶ文字 masanori.nag.. 00 153views 35/19/51 css3 forked from: 暗闇に浮かぶ文字 masanori.nag.. 00 172views 35/19/51 css3