About / Contact Animation
How do I make an about / contact animation?
Created an about and contact section for my portfolio site. Wanted something a little animated to better illustrate my style.. What is a about / contact animation? How do you make a about / contact animation? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.
About / Contact Animation Previews
About / Contact Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>About / Contact Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.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! */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #333; position: relative; font-family: 'Quicksand', sans-serif;
}
.ima { font-family: 'Asap', sans-serif; font-size: 40px; text-transform: uppercase;
}
.body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/about-character.png) 0 0 no-repeat;
}
.character, .body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background-size: 1070px; position: absolute; display: block;
}
.contactcharacter { position: relative; display: block; overflow: hidden; background: #efefef;
}
.contactcharacter .contentwrapper { width: 1280px; height: 750px; margin: 10px auto 0; position: relative; transition: height 1s ease-in-out;
}
.contactcharacter .character { width: 100%; height: 750px; margin: 0 auto; bottom: 0px; transition: height 1s ease-in-out;
}
.contactcharacter .body { width: 900px; height: 425px; bottom: -9px; left: 0; background-position: 0px 0px;
}
.contactcharacter .arm { width: 445px; height: 115px; bottom: -50px; left: 25px; background-position: -19px -1094px; transform: rotateZ(-58deg); transform-origin: 2% 50%; transition: all .5s ease-in-out;
}
.contactcharacter .arm.active { transform: rotateZ(0deg);
}
.contactcharacter .head { width: 235px; height: 337px; bottom: 294px; left: 250px; background-position: -506px -1093px; transform: rotateZ(-24deg); transform-origin: 50% 82%; transition: all 0.75s cubic-bezier(0.34, -0.305, 0, 1);
}
.contactcharacter .head.caffeine { animation: twitch 1s ease-in-out infinite;
}
.contactcharacter .head.active { transform: rotateZ(0deg);
}
.contactcharacter .eyes { width: 110px; height: 25px; top: 160px; left: 63px; background-position: -788px -1246px; animation: blink 10s steps(2) infinite;
}
.contactcharacter .caffeine .eyes { animation: blink-fast 1s steps(2) infinite;
}
.contactcharacter .mug { width: 184px; height: 188px; bottom: -3px; right: 180px; background-position: -732px -857px;
}
.contactcharacter .mug .steam { animation: steam 3s ease-in-out infinite alternate; opacity: 0.5;
}
.contactcharacter .mug .steam:nth-child(1) { width: 34px; height: 158px; top: -140px; left: 30px; background-position: -537px -855px; animation-delay: 0s;
}
.contactcharacter .mug .steam:nth-child(2) { width: 37px; height: 194px; top: -187px; left: 80px; background-position: -594px -855px; animation-delay: 2s;
}
.contactcharacter .mug .steam:nth-child(3) { width: 38px; height: 187px; top: -170px; left: 131px; background-position: -658px -855px; animation-delay: 1s;
}
.contactcharacter .thoughts { width: 751px; height: 390px; top: 0px; right: 0px; background-position: -321px -459px; animation: bob 4s ease-in-out infinite alternate; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .abouttype { text-align: center; padding: 90px 80px 60px 100px;
}
.contactcharacter .thoughts .abouttype #ima { font-size: 40px; text-transform: uppercase;
}
.contactcharacter .thoughts .abouttype p { font-size: 24px; line-height: 1.45em;
}
.contactcharacter .thoughts .abouttype p:nth-child(1) { margin-bottom: 0;
}
.contactcharacter .thoughts .abouttype p:nth-child(3) { margin-top: 0;
}
.contactcharacter .thoughts .imawhat { display: none;
}
.contactcharacter .thoughts .bubble { animation: bob 2s ease-in-out infinite alternate;
}
.contactcharacter .thoughts .bubble:nth-child(2) { width: 120px; height: 116px; top: 40px; left: -100px; background-position: -191px -472px; animation-delay: 0s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(3) { width: 91px; height: 86px; top: 80px; left: -190px; background-position: -86px -472px; animation-delay: 2s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(4) { width: 67px; height: 65px; top: 120px; left: -260px; background-position: 0px -474px; animation-delay: 1s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .contactme { width: 207px; height: 196px; bottom: -3px; right: 309px; background-position: -300px -856px; cursor: pointer;
}
.contactcharacter .contactme .arrow { width: 263px; height: 146px; top: -95px; left: -23px; background-position: -17px -856px; animation: bob 1s ease-in-out infinite alternate; cursor: arrow;
}
.contactcharacter button { position: absolute; bottom: 0; right: 0;
}
.contactcharacter .contact { width: 750px; position: absolute; left: 50%; bottom: -40px; transform: translateY(360px); margin-left: -375px;
}
.contactcharacter .contact.inactive { animation: popout 0.5s forwards linear;
}
.contactcharacter .contact.active { animation: popin 0.35s forwards linear;
}
.contactcharacter .contact.active .closer { background: #333; border: 2px solid white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); top: -15px; left: -15px; width: 30px; height: 30px; position: absolute; cursor: pointer; border-radius: 15px;
}
.contactcharacter .contact.active .closer:after, .contactcharacter .contact.active .closer:before { content: " "; position: absolute; top: 11px; left: 4px; width: 18px; height: 4px; background: white;
}
.contactcharacter .contact.active .closer:after { transform: rotate(45deg);
}
.contactcharacter .contact.active .closer:before { transform: rotate(-45deg);
}
@keyframes blink { 0% { background-position: -788px -1246px; } 90% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast { 0% { background-position: -788px -1246px; } 50% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast-small { 0% { background-position: -559px -884px; } 50% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes blink-medium { 0% { background-position: -559px -884px; } 90% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes twitch { 0% { transform: rotateZ(-24deg); } 25% { transform: rotateZ(-25deg); } 50% { transform: rotateZ(-23deg); } 75% { transform: rotateZ(-25deg); } 100% { transform: rotateZ(-24deg); }
}
@keyframes twitch-medium { 0% { background-position: -578px -1px; } 50% { background-position: -578px -1px; } 100% { background-position: -720px -1px; }
}
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(20px); }
}
@keyframes steam { 0% { opacity: 0.5; } 100% { opacity: 1; }
}
@keyframes popin { 0% { transform: translateY(350px) rotateZ(2.2deg); } 38% { transform: translateY(100px) rotateZ(7deg); } 52% { transform: translateY(25px) rotateZ(7deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(-65px) rotateZ(-4.1deg); } 90% { transform: translateY(-54px) rotateZ(-3.3deg); } 100% { transform: translateY(-40px) rotateZ(0deg); }
}
@keyframes popout { 0% { transform: translateY(-40px) rotateZ(0deg); } 38% { transform: translateY(-54px) rotateZ(-3.3deg); } 52% { transform: translateY(-65px) rotateZ(-4.1deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(25px) rotateZ(7deg); } 90% { transform: translateY(100px) rotateZ(7deg); } 100% { transform: translateY(360px) rotateZ(0deg); }
}
@keyframes wiggle { 0% { transform: translateY(-5px) rotateZ(5deg); } 100% { transform: translateY(-5px) rotateZ(-5deg); }
}
@keyframes pulse-hover { 0% { fill-opacity: 0.8; } 100% { fill-opacity: 1; }
}
.contact { width: 600px;
}
form { background: #b3c33a; padding: 20px; transition: all 2s ease;
}
input[type="text"], input[type="email"], textarea { padding: 10px; margin-bottom: 10px; display: block; width: 100%; border: none; background: #8f9c2e; color: #eff3d6; letter-spacing: 1px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { background: #6b7423; outline: none;
}
input[type="text"], input[type="email"] { width: 100%;
}
.input { width: 100%;
}
textarea { height: 200px; resize: none;
}
.contact .input.error { border-left: 5px solid red; animation: borderColor 0.5s ease-in-out infinite alternate;
}
::-webkit-input-placeholder { color: #b3c33a; text-transform: uppercase; letter-spacing: 2px;
}
input[type="submit"] { background: #8f9c2e; margin-top: 10px; border: none; padding: 6.66667px 20px; text-transform: uppercase; letter-spacing: 2px; color: white; position: relative;
}
input[type="submit"]:hover, input[type="submit"]:focus { outline: none; transform: translateY(-3px); box-shadow: 0 3px 0 #6b7423;
}
input[type="submit"]:active { transform: translateY(0); box-shadow: none; background: #7d8828;
}
@keyframes borderColor { 0% { border-color: red; } 100% { border-color: #990000; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Quicksand|Asap:700' rel='stylesheet' type='text/css'>
<section class="contactcharacter" id="about"> <div class="contentwrapper" id="contact"> <div class="character"> <div class="body"></div> <div class="arm"></div> <div class="head"> <div class="eyes"></div> </div> <div class="mug"> <div class="steam"></div> <div class="steam"></div> <div class="steam"></div> </div> <div class="contactme"> <div class="arrow"></div> </div> <div class="thoughts"> <div class="abouttype"> <p>My name is Mark Thomes. I am a...</p> <div class="imacontainer"><span class="ima"></span></div> <p>I live in the Twin Cities metro area. I like to craft solutions.</p> <span class="imawhat">web designer</span> <span class="imawhat">wordpress plugin author</span> <span class="imawhat">web developer</span> <span class="imawhat">animator</span> </div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> </div> </div> </div> <div class="contact"> <span class="closer"></span> <form> <input class="input name" name="name" type="text" value="" placeholder="name"> <input class="input email" name="email" type="email" value="" placeholder="email"> <textarea class="input message" name="message" placeholder="my awesome message!"></textarea> <input name="commit" type="submit" value="submit" class="submit"> </form> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script> <script src="js/index.js"></script>
</body>
</html>
About / Contact Animation - Script Codes CSS Codes
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #333; position: relative; font-family: 'Quicksand', sans-serif;
}
.ima { font-family: 'Asap', sans-serif; font-size: 40px; text-transform: uppercase;
}
.body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/about-character.png) 0 0 no-repeat;
}
.character, .body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background-size: 1070px; position: absolute; display: block;
}
.contactcharacter { position: relative; display: block; overflow: hidden; background: #efefef;
}
.contactcharacter .contentwrapper { width: 1280px; height: 750px; margin: 10px auto 0; position: relative; transition: height 1s ease-in-out;
}
.contactcharacter .character { width: 100%; height: 750px; margin: 0 auto; bottom: 0px; transition: height 1s ease-in-out;
}
.contactcharacter .body { width: 900px; height: 425px; bottom: -9px; left: 0; background-position: 0px 0px;
}
.contactcharacter .arm { width: 445px; height: 115px; bottom: -50px; left: 25px; background-position: -19px -1094px; transform: rotateZ(-58deg); transform-origin: 2% 50%; transition: all .5s ease-in-out;
}
.contactcharacter .arm.active { transform: rotateZ(0deg);
}
.contactcharacter .head { width: 235px; height: 337px; bottom: 294px; left: 250px; background-position: -506px -1093px; transform: rotateZ(-24deg); transform-origin: 50% 82%; transition: all 0.75s cubic-bezier(0.34, -0.305, 0, 1);
}
.contactcharacter .head.caffeine { animation: twitch 1s ease-in-out infinite;
}
.contactcharacter .head.active { transform: rotateZ(0deg);
}
.contactcharacter .eyes { width: 110px; height: 25px; top: 160px; left: 63px; background-position: -788px -1246px; animation: blink 10s steps(2) infinite;
}
.contactcharacter .caffeine .eyes { animation: blink-fast 1s steps(2) infinite;
}
.contactcharacter .mug { width: 184px; height: 188px; bottom: -3px; right: 180px; background-position: -732px -857px;
}
.contactcharacter .mug .steam { animation: steam 3s ease-in-out infinite alternate; opacity: 0.5;
}
.contactcharacter .mug .steam:nth-child(1) { width: 34px; height: 158px; top: -140px; left: 30px; background-position: -537px -855px; animation-delay: 0s;
}
.contactcharacter .mug .steam:nth-child(2) { width: 37px; height: 194px; top: -187px; left: 80px; background-position: -594px -855px; animation-delay: 2s;
}
.contactcharacter .mug .steam:nth-child(3) { width: 38px; height: 187px; top: -170px; left: 131px; background-position: -658px -855px; animation-delay: 1s;
}
.contactcharacter .thoughts { width: 751px; height: 390px; top: 0px; right: 0px; background-position: -321px -459px; animation: bob 4s ease-in-out infinite alternate; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .abouttype { text-align: center; padding: 90px 80px 60px 100px;
}
.contactcharacter .thoughts .abouttype #ima { font-size: 40px; text-transform: uppercase;
}
.contactcharacter .thoughts .abouttype p { font-size: 24px; line-height: 1.45em;
}
.contactcharacter .thoughts .abouttype p:nth-child(1) { margin-bottom: 0;
}
.contactcharacter .thoughts .abouttype p:nth-child(3) { margin-top: 0;
}
.contactcharacter .thoughts .imawhat { display: none;
}
.contactcharacter .thoughts .bubble { animation: bob 2s ease-in-out infinite alternate;
}
.contactcharacter .thoughts .bubble:nth-child(2) { width: 120px; height: 116px; top: 40px; left: -100px; background-position: -191px -472px; animation-delay: 0s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(3) { width: 91px; height: 86px; top: 80px; left: -190px; background-position: -86px -472px; animation-delay: 2s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(4) { width: 67px; height: 65px; top: 120px; left: -260px; background-position: 0px -474px; animation-delay: 1s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .contactme { width: 207px; height: 196px; bottom: -3px; right: 309px; background-position: -300px -856px; cursor: pointer;
}
.contactcharacter .contactme .arrow { width: 263px; height: 146px; top: -95px; left: -23px; background-position: -17px -856px; animation: bob 1s ease-in-out infinite alternate; cursor: arrow;
}
.contactcharacter button { position: absolute; bottom: 0; right: 0;
}
.contactcharacter .contact { width: 750px; position: absolute; left: 50%; bottom: -40px; transform: translateY(360px); margin-left: -375px;
}
.contactcharacter .contact.inactive { animation: popout 0.5s forwards linear;
}
.contactcharacter .contact.active { animation: popin 0.35s forwards linear;
}
.contactcharacter .contact.active .closer { background: #333; border: 2px solid white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); top: -15px; left: -15px; width: 30px; height: 30px; position: absolute; cursor: pointer; border-radius: 15px;
}
.contactcharacter .contact.active .closer:after, .contactcharacter .contact.active .closer:before { content: " "; position: absolute; top: 11px; left: 4px; width: 18px; height: 4px; background: white;
}
.contactcharacter .contact.active .closer:after { transform: rotate(45deg);
}
.contactcharacter .contact.active .closer:before { transform: rotate(-45deg);
}
@keyframes blink { 0% { background-position: -788px -1246px; } 90% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast { 0% { background-position: -788px -1246px; } 50% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast-small { 0% { background-position: -559px -884px; } 50% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes blink-medium { 0% { background-position: -559px -884px; } 90% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes twitch { 0% { transform: rotateZ(-24deg); } 25% { transform: rotateZ(-25deg); } 50% { transform: rotateZ(-23deg); } 75% { transform: rotateZ(-25deg); } 100% { transform: rotateZ(-24deg); }
}
@keyframes twitch-medium { 0% { background-position: -578px -1px; } 50% { background-position: -578px -1px; } 100% { background-position: -720px -1px; }
}
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(20px); }
}
@keyframes steam { 0% { opacity: 0.5; } 100% { opacity: 1; }
}
@keyframes popin { 0% { transform: translateY(350px) rotateZ(2.2deg); } 38% { transform: translateY(100px) rotateZ(7deg); } 52% { transform: translateY(25px) rotateZ(7deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(-65px) rotateZ(-4.1deg); } 90% { transform: translateY(-54px) rotateZ(-3.3deg); } 100% { transform: translateY(-40px) rotateZ(0deg); }
}
@keyframes popout { 0% { transform: translateY(-40px) rotateZ(0deg); } 38% { transform: translateY(-54px) rotateZ(-3.3deg); } 52% { transform: translateY(-65px) rotateZ(-4.1deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(25px) rotateZ(7deg); } 90% { transform: translateY(100px) rotateZ(7deg); } 100% { transform: translateY(360px) rotateZ(0deg); }
}
@keyframes wiggle { 0% { transform: translateY(-5px) rotateZ(5deg); } 100% { transform: translateY(-5px) rotateZ(-5deg); }
}
@keyframes pulse-hover { 0% { fill-opacity: 0.8; } 100% { fill-opacity: 1; }
}
.contact { width: 600px;
}
form { background: #b3c33a; padding: 20px; transition: all 2s ease;
}
input[type="text"], input[type="email"], textarea { padding: 10px; margin-bottom: 10px; display: block; width: 100%; border: none; background: #8f9c2e; color: #eff3d6; letter-spacing: 1px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { background: #6b7423; outline: none;
}
input[type="text"], input[type="email"] { width: 100%;
}
.input { width: 100%;
}
textarea { height: 200px; resize: none;
}
.contact .input.error { border-left: 5px solid red; animation: borderColor 0.5s ease-in-out infinite alternate;
}
::-webkit-input-placeholder { color: #b3c33a; text-transform: uppercase; letter-spacing: 2px;
}
input[type="submit"] { background: #8f9c2e; margin-top: 10px; border: none; padding: 6.66667px 20px; text-transform: uppercase; letter-spacing: 2px; color: white; position: relative;
}
input[type="submit"]:hover, input[type="submit"]:focus { outline: none; transform: translateY(-3px); box-shadow: 0 3px 0 #6b7423;
}
input[type="submit"]:active { transform: translateY(0); box-shadow: none; background: #7d8828;
}
@keyframes borderColor { 0% { border-color: red; } 100% { border-color: #990000; }
}
About / Contact Animation - Script Codes JS Codes
var cnt=0, texts=[];
var $fclick = false;
$(".imawhat").each(function() { texts[cnt++]=$(this).text();
});
function fadeText() { if (cnt>=texts.length) { cnt=0; } $('.ima').html(texts[cnt++]); $('.ima') .fadeIn('fast').animate({opacity: 1.0}, 5000).fadeOut('fast', function() { return fadeText(); } );
}
function toggleForm() { if ($fclick === true) { $(".contact, .head, .arm").toggleClass("active inactive"); } else { $(".contact, .head, .arm").addClass("active"); $fclick = true; }
}
$(".contactme, .arrow, .closer, .submit").on("click", toggleForm);
fadeText();
| Developer | Mark Thomes |
| Username | WithAnEs |
| Uploaded | July 04, 2022 |
| Rating | 4 |
| Size | 13,077 Kb |
| Views | 46,552 |
Do you need developer help for About / Contact Animation?
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!
Mark Thomes (WithAnEs) Script Codes
| Name | Size |
| Sidebar Nav | 3,808 Kb |
| Twitter Feed Loading Animation | 6,763 Kb |
| 404 Animated Character | 8,559 Kb |
| CSS Birthday Cake | 8,353 Kb |
| Save Bar | 2,719 Kb |
| Hiding in a box | 3,138 Kb |
| SVG Stroke Pie Chart | 10,209 Kb |
| Popup Footer | 3,488 Kb |
| Basic Menu CSS | 2,787 Kb |
| CSS Books | 7,833 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Flat UI Button | Honchoman | 2,289 Kb |
| Wip elementary os navbar | Nickcolley | 2,993 Kb |
| 404 Error Page | WebSonick | 3,203 Kb |
| Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
| Minimelephant | Smashlee | 2,507 Kb |
| Wikipedia viewer | Chpecson | 2,865 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
| LeMandinque | Aadesida | 9,046 Kb |
| Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
| Angular Route | Arun_v606 | 1,837 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!