Customisation of any website is not so much easy for those who don't have any knowledge about web design but for me it's not difficult. I have created an floating author profile revealer for you I think you will like it.
Welcome programmers today we are going to create Floating Author Profile Revealer
As you know the HTML markup is required for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.
Create New folder because we are going to work in that folder give it a name Floating Author Profile Revealer and save all the files in it as they are said in the steps below.
The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.
There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
https://use.typekit.net/ekp8ytl.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js
Save It As Floating Author Profile Revealer/index.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel='stylesheet' href='https://use.typekit.net/ekp8ytl.css'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"><button class="me-toggle"><svg xmlns="http://www.w3.org/2000/svg" class="me-logo__device--small" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0.5 0.5 700 700"><image x="-9" y="-9" width="719" height="719" xlink:href="data:img/png;base64,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"/></svg><p class="me-toggle__info">Bio</p><div class="me-toggle__base"></div></button><div class="me-panel"><div class="me-close-icon"><div class="me-close-icon__line"></div><div class="me-close-icon__line"></div></div><div class="me-panel__content"><div class="me-panel__content-top"><div class="me-logo"><svg xmlns="http://www.w3.org/2000/svg" class="me-logo__device" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0.5 0.5 700 700"><image x="-9" y="-9" width="719" height="719" xlink:href="data:img/png;base64,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"/></svg></div><h1 class="me-title">Designer & Coder <span>Muhammad Muzammil</span></h1><div class="me-thanks"><div class="me-line me-thanks__line1"></div><p class="me-thanks__title">Thanks!</p><div class="me-line me-thanks__line2"></div></div><p class="me-intro">Hi Thanks for checking my creativity i apricaite it..</p></div><div class="me-panel__content-btm"><div class="me-profile"><div class="me-line-vert"></div><a href="https://codepen.io/softwebtuts" class="me-profile__link me-profile__link-disabled" target="_top"><svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 262 108"></div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js'></script><scriptsrc="js/index.js"></script> Make External Stylesheet:
With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css folder.
The main code that will be included in the header section will be similar to this <link rel='stylesheet' href='Floating Author Profile Revealer/css/style.css' />.
In the code provided above i have added some icons using fontawesome css library that's why i have included the fontawesome library if you will remove it then you will see squares instead icons.
I have encoded the image in base64 code but if you want to use the URL of an image you can use that URL instead of base64 code.
But keep in mind image that in encoded in base64 loads faster then the direct URL.
Without CSS our this script (Floating Author Profile Revealer) will never look marvelous. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.
So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new child folder called css in parent folder called Floating Author Profile Revealer and put this file to that folder.
The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.
Save It As Floating Author Profile Revealer/css/style.css :
html{box-sizing:border-box}*, *:before, *:after{box-sizing:inherit}.me-toggle{position:fixed;z-index:9999;top:8px;left:8px;display:none;width:48px;height:48px;cursor:pointer;outline:none;border:none;background:transparent;padding:0;margin:0;overflow:visible}@media only screen and (max-width:800px){.me-toggle{display:none}}.me-toggle__info{position:absolute;z-index:2;top:30px;left:30px;margin:0;color:white;text-transform:uppercase;font-size:10px;opacity:0;letter-spacing:1px;font-weight:300}.me-logo__device--small{position:absolute;top:0px;left:0px;z-index:1;width:48px;height:48px}.me-close{visibility:hidden;opacity:0}.me-toggle__base{width:100%;height:48px;background:black;background-image:linear-gradient(205deg, #313346 0%, #15161D 76%);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.2);border-radius:2px}.me-panel{position:absolute;z-index:9998;top:0;left:0;display:flex;justify-content:center;width:50%;height:100%;-webkit-transform:translateX(-101%);transform:translateX(-101%);color:white;margin:auto;background-image:linear-gradient(205deg, #313346 0%, #15161D 76%);box-shadow:0 2px 48px 0 rgba(0, 0, 0, 0.3);font-family:noto-sans-condensed, sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:1.357;text-align:center;-webkit-font-kerning:normal;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-y:scroll;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none}.me-panel::-webkit-scrollbar{display:none}@media only screen and (max-width:800px){.me-panel{display:none}}.me-panel__content{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:90%;max-width:376px;height:100%;min-height:630px;visibility:hidden;opacity:0}.me-panel__content-top{flex-basis:60%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.me-panel__content-btm{flex-basis:40%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.me-logo{width:76px;height:66px}.me-logo__device{opacity:0}.me-title{position:relative;top:auto;left:auto;margin:26px 0 35px;font-family:noto-sans-extracondensed, sans-serif;font-weight:400;font-style:normal;font-size:14px;text-transform:uppercase;letter-spacing:5px}.me-title span{display:block;margin-top:5px;opacity:0.5;font-family:noto-sans-condensed, sans-serif;font-weight:400;font-style:normal;font-size:14px}.me-thanks{margin-bottom:16px;overflow:hidden}.me-thanks__title{margin:0 0 2px;font-family:noto-sans-extracondensed, sans-serif;font-weight:700;font-style:normal;font-size:104px;text-transform:uppercase;letter-spacing:5px;line-height:1}.me-line{width:100%;height:1px;background:white;opacity:0.16}.me-intro{margin:0;opacity:0.5}.me-profile{position:relative;display:flex;justify-content:center;width:100%;height:100%;margin-top:18px;min-height:20vh}.me-profile__link{position:absolute;top:calc(50% - 54px);left:calc(50% - 132px);width:262px;height:108px;border-radius:50%}.me-profile__link.me-profile__link-disabled{pointer-events:none;cursor:default}.me-line-vert{width:1px;height:100%;min-height:20vh;background:white;opacity:0.16}.me-links{width:100%}.me-links__list{display:flex;justify-content:space-between;margin:0;padding:0;height:92px;overflow:hidden}.me-links__item{list-style-type:none}.me-links__link{position:relative;display:flex;align-items:center;height:100%;color:white;opacity:0.5;text-decoration:none;text-transform:uppercase;letter-spacing:2px;transition:scale 0.2s linear, color 0.2s linear}.me-links__link:hover{color:#4A90E2;opacity:1}.me-links__link:hover .me-links__item-marker{-webkit-transform:scale(1);transform:scale(1)}.me-links__item-marker{position:absolute;left:50%;bottom:0;z-index:1;width:1px;height:30px;background-color:#4A90E2;-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);transition:transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);transition:transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform-origin:center bottom;transform-origin:center bottom}Action button is fixed at top left corner please don't change it's alignment. If you want to change alignment comment below because with the alignment of this action button you have change many other things.
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
I have used @media rule in the above CSS code for making this project responsive for all kind of devices.
These are some css selectors that are used in the above css code with their description and example.
| Selector | Example | Example description |
|---|---|---|
| :hover | a:hover | Selects links on mouse over |
To make this project (Floating Author Profile Revealer) work properly for that we will use JavaScript.
So here is a JavaScript code for our project (Floating Author Profile Revealer) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.
The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.
Save It As Floating Author Profile Revealer/js/index.js :
// Be sure to include JS, CSS and Font dependancies into the parent pen, e.g. GSAP!
console.clear();
let meSelect = e => document.querySelector(e);
let meSelectAll = e => document.querySelectorAll(e);
let meToggle = meSelect('.me-toggle');
let mePanel = meSelect('.me-panel');
let codepenLink = meSelect('.me-profile__link');
let meDisplay = false; // is the panel displayed?
let meIsAnimating = false; // is the panel (alone, not the content) animating?
let firstLoad = true;
let closePanelTime = 0.6;
let tlContentIn = new TimelineMax({ onComplete: function() {
codepenLink.classList.remove('me-profile__link-disabled');
} });
initMeOpenAnim();
meToggle.onclick = () => {
if(!meIsAnimating) {
if (meDisplay === true) {
meClose();
} else if (meDisplay === false) {
meOpen()
}
}
};
meToggle.onmouseenter = () => {
if(!meDisplay && !meIsAnimating) {
TweenMax.to('.me-toggle__base', 0.6, { scaleX: 2, ease: Elastic.easeOut.config(0.9, 0.5), transformOrigin: "left top" });
TweenMax.to('.me-logo__device-small', 0.3, { x: 6, y: -12, ease: Power4.easeOut });
TweenMax.to('.me-toggle__info', 0.3, { x: 26, opacity: 1, ease: Expo.easeOut });
// TweenMax.to("#turbwave", 1, {
// attr:{"baseFrequency":2},
// repeat:-1,
// yoyo:true
// });
}
else {
showMeCloseHover();
}
};
meToggle.onmouseleave = () => {
if(!meDisplay & !meIsAnimating) {
TweenMax.to('.me-toggle__base', 0.6, { scaleX: 1, ease: Elastic.easeOut.config(0.7, 0.5) });
TweenMax.to('.me-logo__device-small', 1, { x: 0, y: 0, ease: Elastic.easeOut.config(1, 0.4) });
TweenMax.to('.me-toggle__info', 0.3, { x: 0, opacity: 0, ease: Power4.easeOut });
// TweenMax.to("#turbwave", 0.2, {
// attr:{"baseFrequency":0}
// // ease: Power2.easeOut
// });
}
else {
showMeCloseOut();
}
};
codepenLink.onmouseenter = () => {
if(meDisplay & !meIsAnimating) {
TweenMax.to('.me-profile__logo-circ', 0.6, { scale: 1.2, ease: Elastic.easeOut });
TweenMax.to('.me-profile__codepen', 0.7, { scale: 1.1, ease: Elastic.easeOut });
TweenMax.to('.me-profile__text', 0.4, { scale: 0, ease: Expo.easeInOut });
}
else {
}
};
codepenLink.onmouseleave = () => {
if(meDisplay & !meIsAnimating) {
TweenMax.to('.me-profile__logo-circ', 0.4, { scale: 1, ease: Elastic.easeOut.config(0.7, 0.5) });
TweenMax.to('.me-profile__codepen', 0.5, { scale: 1, ease: Elastic.easeOut });
TweenMax.to('.me-profile__text', 0.3, { scale: 1, ease: Expo.easeOut });
}
else {
}
};
function meHideToggleDefault() {
TweenMax.to('.me-toggle__info', 0.3, { x: 0, opacity: 0, ease: Power4.easeOut });
let tl = new TimelineMax({ });
tl.to('.me-toggle__base', 0.4, { scaleX: 0, ease: Back.easeIn }, 0.2)
.to('.me-logo__device-small', 0.4, { x: 100, y: -200, opacity: 0, ease: Power4.easeIn }, 0)
.to('.me-logo__device-large', 0.4, { x: -135, y: 280, opacity: 0, ease: Power4.easeIn }, 0)
// .to("#turbwave", 0.2, {
// attr:{"baseFrequency":0}
// // ease: Power2.easeOut
// });
// .to('.me-toggle__base', 0.4, { x: -60, ease: Expo.easeIn}, 0)
}
function meShowToggleDefault() {
let showDelay = 0.4;
if(!firstLoad) {
showDelay = closePanelTime;
}
let tl = new TimelineMax({delay: showDelay, onComplete: function() {
meIsAnimating = false;
}});
tl.set('.me-toggle', { display: 'flex' })
.fromTo('.me-toggle__base', 0.7, { scaleX: 0 }, { scaleX: 1, ease: Elastic.easeOut.config(0.7, 0.5), transformOrigin: "left top" }, 0.10)
.fromTo('.me-logo__device-small', 0.4, { x: 100, y: -200, opacity: 0 }, { x: 0, y: 0, opacity: 1, ease: Expo.easeOut }, 0.2)
.fromTo('.me-logo__device-large', 0.4, { x: -135, y: 280, opacity: 0 }, { x: 0, y: 0, opacity: 1, ease: Expo.easeOut }, 0.2)
firstLoad = false;
}
function meOpen() {
meHideToggleDefault();
TweenMax.to(mePanel, 0.6, { x: "0%", ease: Expo.easeInOut, delay: 0.7, onComplete: function() {
meIsAnimating = false;
meOpenAnim();
showMeCloseIcon();
} });
meDisplay = true;
meIsAnimating = true;
}
function meClose() {
meShowToggleDefault();
TweenMax.to(mePanel, closePanelTime, { x: "-101%", ease: Expo.easeInOut, delay: 0.3, onComplete: function() {
} });
meCloseAnim();
meDisplay = false;
meIsAnimating = true;
hideMeCloseIcon();
codepenLink.classList.add('me-profile__link-disabled');
}
function meOpenAnim() {
TweenMax.set('.me-panel__content', { autoAlpha: 1 });
tlContentIn.restart();
}
function initMeOpenAnim() {
// TweenMax.set('.me-panel__content', { autoAlpha: 1 });
TweenMax.set('.me-panel__content', { perspective: 300 });
TweenMax.set(['.me-thanks__title', '.me-title'], { transformStyle: "preserve-3d" });
TweenMax.set(['.me-profile__base-circ', '.me-profile__logo-circ', '.me-profile__codepen'], { transformOrigin: "50% 50%" });
TweenMax.set('.me-profile__text', { transformOrigin: "50% 48px" });
tlContentIn.fromTo('.me-logo__device', 2, { opacity: 0, y: 30 }, { opacity: 1, y: 0, ease: Expo.easeOut }, 0)
.fromTo('.me-title', 0.6, { rotationX: 90, opacity: 0 }, { rotationX: 0, opacity: 1, transformOrigin: "center center -45", ease: Expo.easeOut, force3D:true }, 0.1)
.fromTo('.me-thanks__line1', 0.6, { scaleX: 0 }, { scaleX: 1, ease: Expo.easeOut }, 0.2)
.fromTo('.me-thanks__line2', 0.6, { scaleX: 0 }, { scaleX: 1, ease: Expo.easeOut }, 0.3)
.fromTo('.me-thanks__title', 1.0, { rotationX: 90, opacity: 0 }, { rotationX: 0, opacity: 1, transformOrigin: "center center -90", ease: Expo.easeOut, force3D:true }, 0.4)
.fromTo('.me-intro', 1, { y: 40, opacity: 0 }, { y: 0, opacity: 1, ease: Expo.easeOut }, 0.7)
.fromTo('.me-line-vert', 0.5, { scaleY: 0 }, { scaleY: 1, ease: Expo.easeIn, transformOrigin: "center top" }, "-=1.6")
.fromTo('.me-links__line', 0.5, { scaleX: 0 }, { scaleX: 1, ease: Expo.easeOut, transformOrigin: "center center" }, "-=1.1")
.fromTo('.me-profile__base-circ', 0.5, { scale: 0 }, { scale: 1, ease: Expo.easeOut }, "-=1.0")
.fromTo('.me-profile__logo-circ', 0.8, { scale: 0 }, { scale: 1, ease: Elastic.easeOut.config(0.7, 0.5) }, "-=0.9")
.fromTo('.me-profile__codepen', 0.5, { scale: 0 }, { scale: 1, ease: Elastic.easeOut.config(0.7, 0.5) }, "-=0.7")
.fromTo('.me-profile__text', 0.5, { rotation: 180, opacity: 0 }, { rotation: 0, opacity: 1, ease: Elastic.easeOut.config(0.7, 0.5) }, "-=0.6")
.staggerFromTo('.me-links__link', 0.8, { y: 20, opacity: 0 }, { y: 0, opacity: 1, ease: Expo.easeOut }, 0.05, "-=1.0")
.pause();
}
function meCloseAnim() {
TweenMax.to('.me-panel__content', 0.3, { autoAlpha: 0 });
}
function showMeCloseIcon() {
TweenMax.set('.me-close', { autoAlpha: 1 })
TweenMax.set(['.me-close__line1', '.me-close__line2'], { transformOrigin: "center center" })
TweenMax.fromTo('.me-close__line1', 0.8, { opacity: 0, rotation: -90, scale: 0 }, { opacity: 1, rotation: 45, scale: 1, ease: Elastic.easeOut.config(1, 0.4) })
TweenMax.fromTo('.me-close__line2', 0.8, { opacity: 0, rotation: 90, scale: 0 }, { opacity: 1,rotation: -45, scale: 1, ease: Elastic.easeOut.config(1, 0.4) })
}
function hideMeCloseIcon() {
// TweenMax.set(['.me-close__line1', '.me-close__line2'], { transformOrigin: "50% 50%" })
TweenMax.fromTo('.me-close__line1', 0.4, { opacity: 1, scale: 1 }, { opacity: 0, scale: 0, ease: Expo.easeIn })
TweenMax.fromTo('.me-close__line2', 0.4, { opacity: 1, scale: 1 }, { opacity: 0, scale: 0, ease: Expo.easeIn })
}
function showMeCloseHover() {
TweenMax.to('.me-close', 0.6, { rotation: 180, ease: Expo.easeInOut, transformOrigin: "50% 50%" });
}
function showMeCloseOut() {
TweenMax.to('.me-close', 0.6, { rotation: -180, ease: Expo.easeInOut, transformOrigin: "50% 50%" });
}
meShowToggleDefault();
// window.addEventListener("resize", meClose);Denouement :
So here we are, We have done and our project Floating Author Profile Revealer is ready now you can save all the files as provided.Like CSS files in css folder and JavaScript files in a js folder name. Below is folder tree of the files and folders of this project.
- Floating Author Profile Revealer
- css
- style.css
- js
- index.js
- index.html
- css
If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.
Download Project (Floating Author Profile Revealer) File :
DownloadThat's pretty much today's topic is completed and now I am winding it up and in the last I want to say that subscribe to the newsletters of this blog.
Thank you !