Skip to content

Instantly share code, notes, and snippets.

@KustomDeveloper

KustomDeveloper/index.html

Last active July 14, 2022 06:39
Show Gist options
  • Save KustomDeveloper/43150670e0ee43afea7f25607e38cd0f to your computer and use it in GitHub Desktop.
Save KustomDeveloper/43150670e0ee43afea7f25607e38cd0f to your computer and use it in GitHub Desktop.
Download ZIP
Simple website with GSAP animations
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AlphaStar</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css"> </head>
<body>
<header>
<nav>
<ul class="navMenu">
<li><a href="#0">Home</a></li>
<li><a href="#0">About us</a></li>
<li><a href="#0">Our services</a></li>
<li><a href="#0">The blog</a></li>
<li><a href="#0">Contact us</a></li>
</ul>
<p class="closeButton">X</p>
</nav>
<div class="burgerIcon">
<div class="burgerLine"></div>
<div class="burgerLine"></div>
<div class="burgerLine"></div>
</div>
<!--burger icon -->
</header>
<section id="hero">
<img class="logo" src="images/alphastarlogo.svg" alt="">
<h1>We are AlphaStar</h1>
<a href="#0" class="learnMoreButton">Learn more</a>
<img class="ovalDivider" src="images/circle-divider.svg" alt="">
</section>
<section class="fourColSection">
<hgroup>
<h2>Over 30 years experience</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do. Lorem dolor amet elit. </h3>
<div class="blueDividerLine"></div>
<!--blue divider line -->
</hgroup>
<div class="fourColContainer container">
<div class="fourColItem"> <img src="images/factory.jpg" alt="">
<div class="fourColText">
<h3>The Factory</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. </p> <a href="#0" class="fourColButton">Learn more</a> </div>
<!--four col text -->
</div>
<!-- four col item -->
<div class="fourColItem"> <img src="images/equipment.jpg" alt="">
<div class="fourColText">
<h3>The Equipment</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. </p> <a href="#0" class="fourColButton">Learn more</a> </div>
<!--four col text -->
</div>
<!-- four col item -->
<div class="fourColItem"> <img src="images/team.jpg" alt="">
<div class="fourColText">
<h3>The Team</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. </p> <a href="#0" class="fourColButton">Learn more</a> </div>
<!--four col text -->
</div>
<!-- four col item -->
<div class="fourColItem"> <img src="images/training.jpg" alt="">
<div class="fourColText">
<h3>The Training</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. </p> <a href="#0" class="fourColButton">Learn more</a> </div>
<!--four col text -->
</div>
<!-- four col item -->
</div>
<!--four col container -->
</section>
<section class="services">
<div class="serviceBox">
<div class="serviceBoxInner">
<h2>We are Dedicated</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse impedit, nobis neque vitae rerum cumque.</p>
</div>
<!--service box inner -->
</div>
<!--service box -->
<div class="serviceBox">
<div class="serviceBoxInner">
<h2>We are Responsive</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse impedit, nobis neque vitae rerum cumque.</p>
</div>
<!--service box inner -->
</div>
<!--service box -->
<div class="serviceBox">
<div class="serviceBoxInner">
<h2>We are Dynamic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse impedit, nobis neque vitae rerum cumque.</p>
</div>
<!--service box inner -->
</div>
<!--service box -->
</section>
<section class="cogSection">
<hgroup>
<h2>Our Cogs Never Stop Turning...</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</h3>
<div class="blueDividerLine"></div>
<!--blue divider line -->
</hgroup>
<div class="cogTwoCols container">
<div class="cogTextCol">
<h3 class="introText">We strive for 100% customer satisfaction</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. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. </p>
</div>
<div class="cogImageCol">
<img class="cogLeft" src="images/cog-left.svg" alt="">
<img class="cogRight" src="images/cog-right.svg" alt="">
</div>
<!--cog image col-->
<!--cog text col -->
</div>
<!-- cog two cols -->
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
// Menu hover effect
$('.burgerIcon').on('mouseenter', () => {
gsap.to('.burgerLine:first-child', 0.2, { x: -10 });
gsap.to('.burgerLine:last-child', 0.2, { x: 10 });
}).on('mouseleave', () => {
gsap.to('.burgerLine:first-child', 0.2, { x: 0 });
gsap.to('.burgerLine:last-child', 0.2, { x: 0 });
});
// Mobile Menu animation
const tlmenu = new TimelineMax({paused: true});
tlmenu.to('nav', 0.3, { autoAlpha: 1 })
.staggerFromTo('nav li', 0.5, { y: 100, opacity: 0 }, { y: 0, opacity: 1 }, 0.1);
$('.burgerIcon').on('click', () => {
tlmenu.play(0);
})
$('.closeButton').on('click', () => {
tlmenu.reverse(0);
})
//Hero Animation
gsap.fromTo('#hero h1', 0.6, { y: 80, opacity: 0 }, { y: 0, opacity: 1, delay: 0.5 });
gsap.fromTo('.learnMoreButton', 1.2, { y: 80, opacity: 0 }, { y: 20, opacity: 1, delay: 1.3, ease: Back.easeOut });
// Hover effect for 4 columns section
$('.fourColItem').on('mouseenter', function() {
gsap.to($(this), 0.5, { y: -10, scale: 1.03 });
gsap.to($(this), 0.5, { boxShadow: "0 0 20px rgba(0,0,0,0.36)" });
}).on('mouseleave', function() {
gsap.to($(this), 0.5, { y: 0, scale: 1 });
gsap.to($(this), 0.5, { boxShadow: "0 0 20px rgba(0,0,0,0.06)" });
})
// Services Section
gsap.set('.serviceBoxInner', { y: 200, opacity: 0 });
$('.serviceBox').on('mouseenter', function() {
gsap.to($(this).find('.serviceBoxInner'), 0.5, { y:0, opacity: 1 });
}).on('mouseleave', function() {
gsap.to($(this).find('.serviceBoxInner'), 0.5, { y:200, opacity: 0 });
})
// Animating cogs
gsap.to('.cogLeft', 8, { rotation: 360, repeat: -1, ease: Linear.easeNone });
gsap.to('.cogRight', 8, { rotation: -360, repeat: -1, ease: Linear.easeNone });
Raw
style.css
/*GENERAL STYLES*/
body,h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', sans-serif;
}
body {
background-color: #f2f3f7;
}
p {
line-height:1.4em;
font-weight: normal;
}
.container {
width: 1140px;
margin: 0 auto;
}
img {
max-width:100%;
height: auto;
}
/*NAV MENU*/
header {
position: relative;
}
nav {
position: fixed;
height:100vh;
width: 100%;
z-index: 200;
visibility: hidden;
display:flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #0074c4;
}
.closeButton {
color: #fff;
font-size: 48px;
margin: 0;
position: absolute;
top: 10px;
right: 30px;
cursor:pointer;
}
.burgerIcon {
position: absolute;
top: 30px;
right: 36px;
cursor: pointer;
z-index: 20;
}
.burgerLine {
width: 90px;
height: 5px;
background-color: #fff;
margin-bottom: 10px;
}
.navMenu {
flex-flow: column wrap;
}
.navMenu li {
list-style: none;
}
.navMenu li a {
color: #fff;
text-decoration: none;
font-size: 55px;
display: inline-block;
padding: 15px 50px;
text-transform: uppercase;
border-bottom:1px solid #142d5f;
transition: 0.2s ease all;
}
.navMenu li:last-child a {
border-bottom:none;
}
.navMenu li:hover a {
background-color: #ff6500;
}
/*HERO SECTION*/
#hero {
background-size: cover;
background-image: url(../images/banner-bg.jpg);
height:85vh;
display:flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
position: relative;
background-image: url(../images/bg-pattern.png);
background-repeat: repeat;
background: rgb(79,162,249); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79,162,249,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79,162,249,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(79,162,249,1) 0%,rgba(32,124,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fa2f9', endColorstr='#207ce5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#hero h1 {
color: #fff;
font-size: 88px;
font-weight: 700;
margin: 0;
position: relative;
top: 30px;
opacity:0;
}
.logo {
position: absolute;
top: 20px;
left: 20px;
width: 260px;
}
#hero .learnMoreButton {
background-color: #ff6500;
padding: 17px 65px;
font-size: 26px;
text-decoration: none;
color: #ffffff;
font-weight: bold;
display: inline-block;
border: 3px solid #3c1c07;
position: relative;
top: 45px;
text-transform: uppercase;
opacity:0;
}
.buttonSlide {
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
width: 0;
}
.ovalDivider {
position: absolute;
bottom: -47px;
width: 100%;
}
/*FOUR COLUMN SECTION*/
.fourColSection {
padding-top: 80px;
padding-bottom: 100px;
}
.fourColContainer {
display:flex;
margin-top: 60px;
}
.fourColSection hgroup h2 {
text-align: center;
font-size: 48px;
color: #0068af;
margin-bottom: 10px;
}
hgroup {
text-align: center;
}
.blueDividerLine {
width: 90px;
background-color: #ff6500;
height: 3px;
text-align: center;
display: inline-block;
}
.fourColSection hgroup h3 {
text-align: center;
font-size: 18px;
color: #323232;
margin-top: 5px;
}
.fourColItem {
flex:1;
margin-right: 30px;
padding-bottom: 15px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.06);
}
.fourColItem:last-child {
margin-right: 0;
}
.fourColText {
padding: 0px 10px 10px 10px;
text-align: center;
}
.fourColItem h3 {
font-size: 22px;
color: #0068af;
margin-bottom: 5px;
margin-top: 15px;
}
.fourColButton {
background-color: #ff6500;
display: inline-block;
padding: 10px 37px;
text-decoration: none;
color: white;
margin-top: 0;
}
/*COG SECTION*/
.cogSection {
background-image: url('../images/cog-bg.jpg');
padding-top: 40px;
padding-bottom: 60px;
border-top:1px solid #ddd;
}
.cogSection hgroup {
text-align: center;
margin-bottom: 50px;
}
.cogSection hgroup h2 {
font-size: 48px;
color: #0068af;
margin-bottom: 5px;
}
.cogSection hgroup h3 {
margin-top: 8px;
}
.cogTwoCols {
display:flex;
}
.cogTextCol {
flex:1;
}
.cogImageCol {
flex:1;
position: relative;
padding-top: 40px;
}
.introText {
color: #1d68af;
font-size: 27px;
}
.cogLeft {
width: 220px;
position: absolute;
left: 80px;
top: 60px;
}
.cogRight {
width: 220px;
position: absolute;
left: 264px;
top: 158px;
}
/*SERVICES */
.services {
display:flex;
flex-flow: row wrap;
}
.serviceBox {
flex:1;
height: 400px;
display:flex;
justify-content: center;
align-items: center;
overflow:hidden;
}
.serviceBox:first-child {
background-image: url(../images/engine.jpg);
}
.serviceBox:nth-child(2) {
background-image: url(../images/city.jpg);
}
.serviceBox:nth-child(3) {
background-image: url(../images/truck.jpg);
}
.serviceBoxInner {
background-color: rgba(255,255,255,0.8);
padding: 25px;
text-align: center;
}
.serviceBoxInner h2 {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment