So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
All Images used for the website tutorial:
Please guys, these images are just to help copy the style of the website for learning purposes.
I don’t own any rights to the copyrighted material.
The Following are the css class names I used in the tutorial:
feastanimationbackground
feast-movement-reverse
feast-movement-2
banner-button
feast-twist
feast-movement
feast-shadow-animation
The Following code goes into the Banner Button:
.banner-button:hover{
box-shadow: black 4px 4px 0px!important;
border-radius:6px;
}
The Following code goes into the Carousel:
selector .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
-moz-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
The Following code goes into the Form Custom css:
selector .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
-moz-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
The Following code goes into the Spin Animation html widget:
<style>
.feastanimationbackground {
position: relative;
overflow: hidden;
}
.feastanimationbackground::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 200%;
background-size: cover;
background-position: center;
transform-origin: center;
z-index: -1;
transform: translate(-50%, -50%) scale(1.5);
animation: spinBackground 15s linear infinite;
}
@keyframes spinBackground {
from { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); }
to { transform: translate(-50%, -50%) scale(1.5) rotate(360deg); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.feastanimationbackground');
elements.forEach((element, index) => {
const computedStyle = window.getComputedStyle(element);
const backgroundImage = computedStyle.backgroundImage;
const styleSheet = document.createElement('style');
styleSheet.textContent = `
.feastanimationbackground:nth-of-type(${index + 1})::before {
background-image: ${backgroundImage};
}
.feastanimationbackground:nth-of-type(${index + 1}) {
background-image: none !important;
}
`;
document.head.appendChild(styleSheet);
});
});
</script>
The Following code goes into the Floating animation html widget:
<style>
.feast-movement {
animation: float 3s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes float {
0%, 100% {
transform: translateY(0); /* Starting and ending position */
}
50% {
transform: translateY(-10px); /* Move up slightly */
}
}
</style>
<style>
.feast-movement-reverse {
animation: float 5s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes float {
0%, 100% {
transform: translateY(0); /* Starting and ending position */
}
50% {
transform: translateY(10px); /* Move up slightly */
}
}
</style>
<style>
.feast-movement-2 {
animation: float 3s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes float {
0%, 100% {
transform: translateY(0) scale(1.025); /* Starting and ending position */
}
50% {
transform: translateY(-10px) scale(1.03);
}
</style>
<style>
.feast-twist {
animation: twist 2s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes twist {
0%, 100% {
transform: rotate(0); /* Starting and ending position */
}
50% {
transform: rotate(5deg); /* Move up slightly */
}
}
</style>
The Following code goes into the Shadow animation html widget:
<style>
.feast-shadow-animation {
animation: shadow-grow 2.5s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes shadow-grow {
0%, 100% {
text-shadow: 0px 0px 0px black, 0px 0px 0px red;
}
50% {
text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black, 4px 4px 1px black, 5px 5px 0px black, 6px 6px 0px black, 7px 7px 0px black;
}
}
</style>