Post
Ask Question

Rotate Web Page Title in HTML 5

Introduction

 
This is a simple application for beginners that shows how to create a rotation of a title on a web page using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a rotation of a title on a web page application. We know that HTML is HyperText Markup Language and is used to display data on a browser. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed.
 
Step 1: First Open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Rotation."
notepad.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "India.aspx".
new application.gif
 
openapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Rotation.html".
html.gif
 
Step 5: Create an onload function that is used to set a color, height, width and rotation angle of a title.
 
Code :
  1. window.onload = function ()   
  2. {  
  3.     var M = ctx("holder", 1240, 480),  
  4.     fonts = [0, M.getFont("1"), M.getFont("2"), M.getFont("3"), M.getFont("Arial Black")],  
  5.     rax = M.print(20, 240, "CShorpCorner", fonts[4], 120).attr({ fill: "#00ff99" })  
  6.     NUMBERS = [  
  7.         M.print(800, 380, "3", fonts[3], 180).attr({ fill: "#00ff99" }),  
  8.         ], times = 3;  
  9.     for (var i = 0, ii =rax.length; i < ii; i++) {  
  10.     rax[i].animate({ fill: ctx.getColor() }, 2000);  
  11. }  
Step 6: Add one CSS file named design.css that is used to set the properties of a body.
 
Code
  1. body {  
  2.   background: #fff;  
  3.   color: Fuchsiafont: 100.1% "Lucida Grande", Lucida, Verdana, sans-serif;  
  4. }  
  5. #holder {  
  6.   height: 500px;  
  7.   left: 100%;  
  8.   margin: 0 0 0 -420px;  
  9.   position: fixed;  
  10.   top: 0;  
  11.   width: 640px;  
  12. }  
  13. #copy {  
  14.   bottom: 0;  
  15.   font-size: .7em;  
  16.   position: fixed;  
  17.   right: 1em;  
  18.   text-align: right;  
  19. }  
Step 7: Now some CSS and js files are used in the application.
  • design1.css: The css file helps set a text alignment, position, font -size, and background color feature of rotation font web page.
  • work.js: work.js is a Javascript file that helps to set a rotation angle according to the font position of a  font.
  • fontstyle.js: fontstyle.js is a Javascript file that helps set a font on a title.
  • Use all the above files in an application.
Code
  1. < link rel = "stylesheet"  
  2. href = "design1.css"  
  3. media = "screen" / ><  
  4.  script type = "text/jscript"  
  5. src = "Scripts/Work.js" >< /script><  
  6.  script type = "text/javascript"  
  7. src = "Scripts/fontstyle.js" >< /script>  
Step 8: Set the animation properties that are used for visualization of a font.
 
Code
  1. NUMBERS[0].animate({ fill: ctx.getColor() }, 2000);  
  2. NUMBERS[1].animate({ fill: ctx.getColor() }, 2000);  
  3. NUMBERS[2].animate({ fill: ctx.getColor() }, 2000,   
  4. function ()   
  5. {  
  6.     rax.animate({ transform: "...r360" }, 1000);  
  7. }  
Step 9: Press Ctrl + F5 to run the code in a browser.
 
Output :
 
out1.gif 
 
 out2.gif
 
out4.gif
 
Resource
 
Here are some useful resources:


Similar Articles