Long Shadow Text

Developer
Toshiyuki TAKAHASHI
Size
3,230 Kb
Views
30,360
  1. Long Shadow Text Previews
  2. Long Shadow Text HTML Codes
  3. Long Shadow Text CSS Codes
  4. Long Shadow Text JS Codes

How do I make an long shadow text?

What is a long shadow text? How do you make a long shadow text? This script and codes were developed by Toshiyuki TAKAHASHI on 30 September 2022, Friday.

Long Shadow Text Previews
IQ Test

Long Shadow Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Long Shadow Text</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
body { font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background: #3c7896;
}
body p { padding: 0 1em; font-weight: bold; font-size: 4em; color: #fff;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p class="longshadow">ジョバンニが学校の門を出るとき、同じ組の七八人は家へ帰らずカムパネルラをまん中にして校庭の隅の桜の木のところに集まっていました。</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Long Shadow Text - Script Codes CSS Codes

@charset "UTF-8";
body { font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background: #3c7896;
}
body p { padding: 0 1em; font-weight: bold; font-size: 4em; color: #fff;
}

Long Shadow Text - Script Codes JS Codes

var shadow = { 'distance': 50, 'opacity': 0.4, 'blur': 0.15, 'angle': 60, 'bgcolor': [60, 120, 150]
}
function refreshLongshadow() { var val = ''; var point = getPoint(1, shadow.angle); for(var i = 1; i <= shadow.distance; i++) { var per = (100 - 100 / shadow.distance * i) / 100; var tempColor = Math.round((shadow.bgcolor[0] * (1 - shadow.opacity * per))) + ', ' + Math.round((shadow.bgcolor[1] * (1 - shadow.opacity * per))) + ', ' + Math.round((shadow.bgcolor[2] * (1 - shadow.opacity * per))) ; val += Math.round(point.x * i) + 'px ' + Math.round(point.y * i) + 'px ' + i * shadow.blur + 'px rgb(' + tempColor + ')'; if(i != shadow.distance) val += ', '; } // console.log(val); $('.longshadow').css('text-shadow', val);
}
function getPoint(dis, deg){ var point = {}; var rad = Math.PI / 180 * deg; point.x = Math.cos(rad) * dis; point.y = Math.sin(rad) * dis; return point;
}
refreshLongshadow();
$('body').bind('mousemove',function(event) { var centerPoint = [$(this).width()/2, $(this).height()/2]; var radian = Math.atan2(centerPoint[1] - event.pageY, centerPoint[0] - event.pageX); // console.log(event.pageX); // console.log(radian); shadow.angle = radian * 180 / Math.PI; refreshLongshadow();
});
Long Shadow Text - Script Codes
Long Shadow Text - Script Codes
Home Page Home
Developer Toshiyuki TAKAHASHI
Username gau
Uploaded September 30, 2022
Rating 4.5
Size 3,230 Kb
Views 30,360
Do you need developer help for Long Shadow Text?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Toshiyuki TAKAHASHI (gau) Script Codes
Name
Slash Background Test
Add lines on both sides of the title by flex-box
Bxslider hover test
OpenType features for body text
Off-registration button
STAR WARS OPENING CSS
StopWatch
Screen effect
Blue light button
Digital Clock with Vue.js
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!