Letter Shadows from User Input

Goal: User types name into user input field, selects Animate button, and name is printed vertically with each letter containing a drop shadow of each letter. The Javascript library Raphael may be desirable.

Problem: So far what I have is the name being printed vertically twice side by side. Obviously the second column should be the letters as drop shadows, but I don't know how to change the style of them to look like shadows.

My manager gave me one hint: "I had to create a 2nd text line placed underneath the text...and I used the .blur() method on it. If I have to give you another hint I'll be hinting you to the door."

I'm in some real trouble here. If anyone has suggestions, solutions, anything it would be very much appreciated.

<html> 
<head> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script>  
<script type="text/javascript">   

function animate() {  

var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");

document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;          
document.getElementById("msg").innerHTML = txt;          

r.clear();      
// Make our pink rectangle 
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"}); 
ellipse.glow({width:10});  
}      

</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}

#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);  
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>

</head> 

<body>  

Text: <input type="text" id="words" value="" /> 
<input type="button" value="Animate" onclick="animate()" /> 
<div id='msg'></div> 
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;"> 
</div> 
<div id="elps" style="margin-left:100px;"/>  

<script type="text/javascript"> //all your javascript goes here  
var r = new Raphael("draw-here-raphael");  

</script>

</body> 
</html>

Live Long and Prosper.

标签： javascript css animation raphael

2条回答

叛逆

2楼-- · 2019-03-06 19:23

Here is also the text output function with Raphael:

function draw_text() {
  var txt = document.getElementById("words").value;
  var posy = txt.length*10;
  r.clear();
  var attr = {font: "50px Helvetica", opacity: 0.5};
  var text = r.text(40, 40+posy, txt).attr(attr).attr({fill: "#0f0"}); // underlayer or "shadow"
  text.attr({transform: "r270"}); // rotate 270 degrees
  var text2 = r.text(43, 43+posy, txt).attr(attr).attr({fill: "#aa0"}); // text above
  text2.attr({transform: "r270"}); // rotate 270 degrees
  r.safari();
}

var r = new Raphael("draw-here-raphael");

The full script, based on this example, is here.

0人赞添加讨论(0) 举报

Evening l夕情丶

3楼-- · 2019-03-06 19:32

Do you really need raphael? What I did was simply print out your words onto an element and get the shadow with css's text-shadow. To get the vertical text I added a </br> after each letter.

Take a look at the fiddle: http://jsfiddle.net/joplomacedo/wVGbF/

Here's the code in case you can't see the fiddle:

HTML

Text: <input type="text" id="words" value="" /> 
      <input id="animateBtn" type="button" value="Animate" />
      <div class="print"></div>

CSS

.print {
    font: 44px/0.8em "Lobster", cursive;
    color: gold;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

var join = Array.prototype.join;

$('#animateBtn').on('click', function() {
    var txt = $('#words').val(),
        spaced_txt = join.call(txt, "</br>");

    $('.print').html(spaced_txt);
});

0人赞添加讨论(0) 举报

Letter Shadows from User Input

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间