About me Sliding

Developer
Soufiane Abid
Size
3,722 Kb
Views
18,216
  1. About me Sliding Previews
  2. About me Sliding HTML Codes
  3. About me Sliding CSS Codes
  4. About me Sliding JS Codes

How do I make an about me sliding?

What is a about me sliding? How do you make a about me sliding? This script and codes were developed by Soufiane Abid on 10 October 2022, Monday.

About me Sliding Previews
IQ Test

About me Sliding - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>About me Sliding</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<section class="about-me">	<div class="about-btn">	<h3>About me</h3>	<i class="fa fa-angle-down"></i>	<div class="circle"></div>	</div>	<div class="about">	<img class="avatar" src="https://f9ir.github.io/loading2/Photo.png" alt="">	<h3>Bruce Harris</h3>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint </p>	<div class="social-btn">	<a href="#facebook" class="fa fa-facebook"></a>	<a href="#github" class="fa fa-github"></a>	<a href="#twitter" class="fa fa-twitter"></a>	</div>	</div>	</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

About me Sliding - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
* { margin: 0; padding: 0;
}
body { background: #FFF;
}
.about-me { width: 360px; margin: 40px auto;
}
.about-me .about-btn { height: 52px; background-color: #4dbd94; overflow: hidden; position: relative;
}
.about-me .about-btn h3 { display: inline-block; margin-left: 60%; font-family: "Montserrat", sans-serif; line-height: 52px; color: #366;
}
.about-me .about-btn > i { padding: 10px; color: #366;
}
.about-me .about-btn .circle { width: 47px; height: 47px; background: #FFF; border-radius: 50%; position: absolute; top: 2.5px; left: -35px;
}
.about-me .about { width: 360px; height: 522px; background-color: #366; text-align: center; box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden;
}
.about-me .about h3::after { content: ''; display: block; width: 100%; height: 1px; background: #4dbd94; position: absolute; top: 94px;
}
.about-me .about .avatar { border-radius: 50%; margin: 24px; z-index: 100; position: relative; box-shadow: 0px 0px 70px 30px #366;
}
.about-me .about h3 { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 400; line-height: 48px; color: #FFF;
}
.about-me .about p { font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; color: #FFF; text-align: left; margin: 0 20px 10px 20px;
}
.about-me .about .social-btn a { display: inline-block; width: calc(360px/3); height: 72px; margin-right: -4px; line-height: 72px; text-decoration: none; font-size: 20px; color: #FFF;
}
.about-me .about .social-btn :first-child { background: #336699;
}
.about-me .about .social-btn :nth-child(2) { background: #f1f1f1; color: #000;
}
.about-me .about .social-btn :last-child { background: #5ea9dd; margin-right: 0px;
}

About me Sliding - Script Codes JS Codes

$(function ($) {	var $button = $('.about-btn'),	$about = $('.about').height(0),	$tl = new TimelineMax();	$tl	.to($about, 0.5,{height:522, ease: Elastic.easeOut.config(1, 0.3)})	.from($about.find('.avatar'), 0.5, {rotation:360},0.5)	.from($about.find('p'), 1, {autoAlpha: 0 , x:-360},0.5)	.staggerFrom($about.find('.fa'), 0.5, {autoAlpha: 0 , scale:2.5})	.pause();	$button.on("mouseover", function (e) {	$tl.play();	});	$about.mouseleave(function (e) {	$tl.reverse();	});
}(jQuery));
About me Sliding - Script Codes
About me Sliding - Script Codes
Home Page Home
Developer Soufiane Abid
Username SoufianeAbid
Uploaded October 10, 2022
Rating 3.5
Size 3,722 Kb
Views 18,216
Do you need developer help for About me Sliding?

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!

Soufiane Abid (SoufianeAbid) Script Codes
Name
ScrollTop
Samatic
Egg hover
Rotation
Small UnderLine
Jump loading
Push Over Menu
A Pen by Soufiane Abid
TTT Plans Pricing Table
Translucent borders
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!