A Pen by Florin Pop on CodePen.
Created
February 5, 2020 23:11
-
-
Save CodeMyUI/6dcaa04e203fd33e5502e872f753858f to your computer and use it in GitHub Desktop.
Fun Waving Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Fun Waving Animation</h1> | |
<div class="form-control"> | |
<input type="text" required /> | |
<label>Email</label> | |
</div> | |
<div class="form-control"> | |
<input type="text" required /> | |
<label>Password</label> | |
</div> | |
<!-- SOCIAL PANEL HTML --> | |
<div class="social-panel-container"> | |
<div class="social-panel"> | |
<p>Created with <i class="fa fa-heart"></i> by | |
<a target="_blank" href="https://florin-pop.com">Florin Pop</a></p> | |
<button class="close-btn"><i class="fas fa-times"></i></button> | |
<h4>Get in touch on</h4> | |
<ul> | |
<li> | |
<a href="https://twitter.com/florinpop1705" target="_blank"> | |
<i class="fab fa-twitter"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://linkedin.com/in/florinpop17" target="_blank"> | |
<i class="fab fa-linkedin"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://facebook.com/florinpop17" target="_blank"> | |
<i class="fab fa-facebook"></i> | |
</a> | |
</li> | |
<li> | |
<a href="https://instagram.com/florinpop17" target="_blank"> | |
<i class="fab fa-instagram"></i> | |
</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<button class="floating-btn"> | |
Get in Touch | |
</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const inputs = document.querySelectorAll('.form-control input'); | |
const labels = document.querySelectorAll('.form-control label'); | |
labels.forEach(label => { | |
label.innerHTML = label.innerText | |
.split('') | |
.map((letter, idx) => `<span style=" | |
transition-delay: ${idx * 50}ms | |
">${letter}</span>`) | |
.join(''); | |
}); | |
// SOCIAL PANEL JS | |
const floating_btn = document.querySelector('.floating-btn'); | |
const close_btn = document.querySelector('.close-btn'); | |
const social_panel_container = document.querySelector('.social-panel-container'); | |
floating_btn.addEventListener('click', () => { | |
social_panel_container.classList.toggle('visible') | |
}); | |
close_btn.addEventListener('click', () => { | |
social_panel_container.classList.remove('visible') | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Muli', sans-serif; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
min-height: 100vh; | |
margin: 0; | |
} | |
.form-control { | |
position: relative; | |
margin: 20px 0; | |
width: 300px; | |
} | |
.form-control input { | |
border: 0; | |
border-bottom: 2px solid #333; | |
padding: 15px 0; | |
display: block; | |
font-size: 18px; | |
font-family: 'Muli', sans-serif; | |
width: 100%; | |
transition: 0.1s ease-in; | |
} | |
.form-control input:focus, | |
.form-control input:valid { | |
border-bottom-color: darksalmon; | |
outline: none; | |
} | |
.form-control input:focus + label span , | |
.form-control input:valid + label span{ | |
color: darksalmon; | |
transform: translateY(-30px); | |
} | |
.form-control label { | |
position: absolute; | |
top: 15px; | |
left: 0; | |
} | |
.form-control label span { | |
display: inline-block; | |
font-size: 18px; | |
min-width: 5px; | |
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
} | |
/* SOCIAL PANEL CSS */ | |
.social-panel-container { | |
position: fixed; | |
right: 0; | |
bottom: 80px; | |
transform: translateX(100%); | |
transition: transform 0.4s ease-in-out; | |
} | |
.social-panel-container.visible { | |
transform: translateX(-10px); | |
} | |
.social-panel { | |
background-color: #fff; | |
border-radius: 16px; | |
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); | |
border: 5px solid #001F61; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
font-family: 'Muli'; | |
position: relative; | |
height: 169px; | |
width: 370px; | |
max-width: calc(100% - 10px); | |
} | |
.social-panel button.close-btn { | |
border: 0; | |
color: #97A5CE; | |
cursor: pointer; | |
font-size: 20px; | |
position: absolute; | |
top: 5px; | |
right: 5px; | |
} | |
.social-panel button.close-btn:focus { | |
outline: none; | |
} | |
.social-panel p { | |
background-color: #001F61; | |
border-radius: 0 0 10px 10px; | |
color: #fff; | |
font-size: 14px; | |
line-height: 18px; | |
padding: 2px 17px 6px; | |
position: absolute; | |
top: 0; | |
left: 50%; | |
margin: 0; | |
transform: translateX(-50%); | |
text-align: center; | |
width: 235px; | |
} | |
.social-panel p i { | |
margin: 0 5px; | |
} | |
.social-panel p a { | |
color: #FF7500; | |
text-decoration: none; | |
} | |
.social-panel h4 { | |
margin: 20px 0; | |
color: #97A5CE; | |
font-family: 'Muli'; | |
font-size: 14px; | |
line-height: 18px; | |
text-transform: uppercase; | |
} | |
.social-panel ul { | |
display: flex; | |
list-style-type: none; | |
padding: 0; | |
margin: 0; | |
} | |
.social-panel ul li { | |
margin: 0 10px; | |
} | |
.social-panel ul li a { | |
border: 1px solid #DCE1F2; | |
border-radius: 50%; | |
color: #001F61; | |
font-size: 20px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 50px; | |
width: 50px; | |
text-decoration: none; | |
} | |
.social-panel ul li a:hover { | |
border-color: #FF6A00; | |
box-shadow: 0 9px 12px -9px #FF6A00; | |
} | |
.floating-btn { | |
border-radius: 26.5px; | |
background-color: #001F61; | |
border: 1px solid #001F61; | |
box-shadow: 0 16px 22px -17px #03153B; | |
color: #fff; | |
cursor: pointer; | |
font-size: 16px; | |
line-height: 20px; | |
padding: 12px 20px; | |
position: fixed; | |
bottom: 20px; | |
right: 20px; | |
z-index: 999; | |
} | |
.floating-btn:hover { | |
background-color: #ffffff; | |
color: #001F61; | |
} | |
.floating-btn:focus { | |
outline: none; | |
} | |
@media screen and (max-width: 480px) { | |
.social-panel-container.visible { | |
transform: translateX(0px); | |
} | |
.floating-btn { | |
right: 10px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey! This isn't working for me :(
I did everything exactly the same as you. I attached a picture, on there you can see what happened when I tried it.
Do you think you can help me?