TikTok Tutorial #22 - How to create a Flex Hover Slider in CSS and jQuery
Learn with us how to create a flex hover slider in CSS and jQuery!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Don’t forget to check the link in bio to access the full code 🤩 #programmingexercises #csscoding #jquery #coding #cssprojects ♬ original sound - Creative Tim
Contents:
1. HTML Code
2. CSS Code
3. Javascript Code
Get your code ⬇️
1. HTML Code
<div class="flex-container">
<div class="spinner"><p>
<div class="cube1"></div>
<div class="cube2"></div>
Loading...
</p>
</div>
<div class="flex-slide home">
<div class="flex-title flex-title-home">Home</div>
<div class="flex-about flex-about-home"><p>Click here to navigate to the home section of the website</p></div>
</div>
<div class="flex-slide about">
<div class="flex-title">About</div>
<div class="flex-about"><p>Click here to navigate to the About section of the website</p></div>
</div>
<div class="flex-slide work">
<div class="flex-title">Work</div>
<div class="flex-about"><p>Our important work projects:</p>
<ul>
<li>Project number 1</li>
<li>Project number 2</li>
<li>Project number 3</li>
</ul>
</div>
</div>
<div class="flex-slide contact">
<div class="flex-title">Contact</div>
<div class="flex-about">
<p>To contact us use the contact form below</p>
<form class="contact-form">
<p>Email <input type="text" name="email"></p>
<p>Comment <textarea type="text" name="comment" row="5"></textarea></p>
<p><input type="submit" name="email" value="Send Message"></p>
</form>
</div>
</div>
</div>
2. CSS Code
@import url('https://fonts.googleapis.com/css?family=Raleway');
$defaultSeconds: 3s;
body {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
.flex-container {
position: absolute;
height: 100vh;
width: 100%;
display: -webkit-flex; /* Safari */
display: flex;
overflow: hidden;
@media screen and (max-width: 768px) {
flex-direction: column;
}
}
.flex-title {
color: #f1f1f1;
position: relative;
font-size: 6vw;
margin: auto;
text-align: center;
transform: rotate(90deg);
top: 15%;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
@media screen and (max-width: 768px) {
transform: rotate(0deg) !important;
}
}
.flex-about {
opacity: 0;
color: #f1f1f1;
position: relative;
width: 70%;
font-size: 2vw;
padding: 5%;
top: 20%;
border: 2px solid #f1f1f1;
border-radius: 10px;
line-height: 1.3;
margin: auto;
text-align: left;
transform: rotate(0deg);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
@media screen and (max-width: 768px) {
padding: 0%;
border: 0px solid #f1f1f1;
}
}
.flex-slide {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
cursor: pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
@media screen and (max-width: 768px) {
overflow: auto;
overflow-x: hidden;
}
}
.flex-slide p {
@media screen and (max-width: 768px) {
font-size: 2em;
}
}
.flex-slide ul li {
@media screen and (max-width: 768px) {
font-size: 2em;
}
}
.flex-slide:hover {
-webkit-flex-grow: 3;
flex-grow: 3;
}
.home {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.im.ge/2022/11/14/SubMo6.beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
@media screen and (min-width: 768px) {
animation: aboutFlexSlide $defaultSeconds 1;
animation-delay: 0s;
}
}
@keyframes aboutFlexSlide {
0% {
-webkit-flex-grow: 1;
flex-grow: 1;
}
50% {
-webkit-flex-grow: 3;
flex-grow: 3;
}
100% {
-webkit-flex-grow: 1;
flex-grow: 1;
}
}
.flex-title-home {
@media screen and (min-width: 768px) {
transform: rotate(90deg);
top: 15%;
animation: aboutFlexSlide $defaultSeconds 1;
animation-delay: 0s;
}
}
@keyframes homeFlextitle {
0% {
transform: rotate(90deg);
top: 15%;
}
50% {
transform: rotate(0deg);
top: 15%;
}
100% {
transform: rotate(90deg);
top: 15%;
}
}
.flex-about-home {
opacity: 0;
@media screen and (min-width: 768px) {
animation: aboutFlexSlide $defaultSeconds 1;
animation-delay: 0s;
}
}
@keyframes flexAboutHome {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.about {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.im.ge/2022/11/14/SubQhF.turquoise-katun-river-gorge-is-surrounded-by-high-mountains-majestic-autumn-sky-stormy-mountain-stream-runs-among-rocks-landscape-altai-mountains-beautiful-places-planet.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.contact-form {
width: 100%;
}
input {
width: 100%;
}
textarea {
width: 100%;
}
.contact {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.im.ge/2022/11/14/Subry8.aerial-shot-beautiful-tree-forest-covered-with-fog-bled-slovenia.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.work {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.im.ge/2022/11/14/SuboB9.colorful-autumn-landscape.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
// Preloader
.spinner {
position: fixed;
top: 0;
left: 0;
background: #222;
height: 100%;
width: 100%;
z-index: 11;
margin-top: 0;
color: #fff;
font-size: 1em;
}
.cube1, .cube2 {
background-color: #fff;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
3. Javascript Code
(function(){
$('.flex-container').waitForImages(function() {
$('.spinner').fadeOut();
}, $.noop, true);
$(".flex-slide").each(function(){
$(this).hover(function(){
$(this).find('.flex-title').css({
transform: 'rotate(0deg)',
top: '10%'
});
$(this).find('.flex-about').css({
opacity: '1'
});
}, function(){
$(this).find('.flex-title').css({
transform: 'rotate(90deg)',
top: '15%'
});
$(this).find('.flex-about').css({
opacity: '0'
});
})
});
})();
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources: