<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper smooth">
<!--<progress max="100" value="0"></progress>-->
<div class='navbar' title='Menu'>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
<!-- Logo -->
<div class="logo">
<a href="index.html">Logo</a>
<a id="night">Night Mode</a>
</div>
<div id="navigationWrap">
<div class="nav-container menu">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="social">
<a href="https://facebook.com" target="_blank" aria-label="facebook" rel="noreferrer noopener"><i class="fa fa-facebook fa-1x"></i></a>
<a href="https://twitter.com" target="_blank" aria-label="facebook" rel="noreferrer noopener"><i class="fa fa-twitter fa-1x" ></i></a>
<a href="https://instagram.com" target="_blank" aria-label="facebook" rel="noreferrer noopener"><i class="fa fa-instagram fa-1x"></i></a>
<a href="https://youtube.com" target="_blank" aria-label="facebook" rel="noreferrer noopener"><i class="fa fa-youtube fa-1x"></i></a>
</div>
</div>
</div>
<!-- Home Section -->
<section id="home" data-scroll-section>
<div class="container-fluid main-content" data-scroll-container>
<div class="row">
<div class="intro col-lg-6 col-md-6 col-sm-12 py-5">
<h1 class="anim1">Banner</h1>
<h2 class="anim1"><span>Some text</span></h2>
<h2 class="anim1"><span>Another Text</span></h2>
<p class="anim1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio at ipsa alias modi natus excepturi?</p>
<a class="anim1 cta" href="#about" data-scroll-section="">Button</a>
</div>
<div class="slider col-lg-6 col-md-6 col-sm-6 py-0">
<div class="slick-slider shadow-lg">
<div></div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="about-section py-5" data-scroll-section>
<div class="container-fluid about-container" data-scroll-container>
<div class="row">
<!--
<div class="about-img col-lg-6 p-0">
<img class="img-fluid shadow-lg z-out" src="https://images.unsplash.com/photo-1504903953708-1a3669833567?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1662&q=80" data-scroll data-scroll-speed="-1">
-->
<div class="about-img col-lg-6 p-0" data-scroll data-scroll-speed="-1">
<img class="img-fluid shadow-lg z-out" src="https://images.unsplash.com/photo-1504903953708-1a3669833567?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1662&q=80">
</div>
<div class="about-content col-lg-6 py-5 z-out" >
<h1 data-scroll data-scroll-speed="2">About us</h1>
<h2 data-scroll data-scroll-speed="1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nesciunt esse autem hic!
</h2>
<p data-scroll data-scroll-speed="1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore
asperiores voluptates, tenetur incidunt libero at aut culpa
atque ab repellat deserunt ullam eaque eum.
</p>
<p data-scroll data-scroll data-scroll-speed="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae quod magnam sequi enim quo laudantium soluta
blanditiis quia consectetur, expedita temporibus, cum officiis
totam doloremque unde harum dolor, veritatis quae sunt!
Repellendus, qui. Corporis voluptas optio doloribus, at quidem
cumque?
</p>
<div class="about-link">
</div>
</div>
</div>
</div>
</section>
<section id="portfolio" class="portfolio-section" data-scroll-section>
<div class="container-fluid py-5" data-scroll-container>
<div class="row">
<div class="col-lg-6">
</div>
<div class="project-heading col-lg-6">
<h1 data-scroll data-scroll-speed="1">Our Portfolio</h1>
<p data-scroll data-scroll data-scroll-speed="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam quaerat sunt architecto veritatis suscipit nostrum
amet dicta ut, nobis modi.
</p>
</div>
</div>
</div>
</section>
<section id="contact" data-scroll-section>
<div class="container contact-container py-5" data-scroll-container>
<h1 class="text-center ">Contact</h1>
</div>
</section>
<!-- Cursor -->
<div class="circle"></div>
<div class="circle-follow"></div>
</div> <!-- Wrapper Ends -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
const locoScroll = new LocomotiveScroll({
el: document.querySelector(".smooth"),
smooth: true,
//smoothMobile: true
smartphone: {
smooth: true
},
tablet: {
smooth: true
},
});
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".smooth", {
scrollTop(value) {
return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
}
});
let images = gsap.utils.toArray('.z-out')
images.forEach((item, index) => {
let exptl = gsap.timeline({
scrollTrigger:{
trigger: item,
start: "top 85%",
end: "top 5%",
scrub: 2,
//markers: true,
scroller: '.smooth'
}
});
exptl.from(item, {
x: 100,
opacity: 0,
duration: 1
});
});
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
// ** Dark Mode **
ScrollTrigger.sort();
$(function(){
triggerNight = $('#night')
triggerNight.on('click', function(){
$('body').toggleClass('night-mode')
});
});
// ** Slider **
$(document).ready(function(){
$('.slick-slider').slick({
infinite: true,
speed: 2400,
fade: true,
autoplay: true,
prevArrow: false,
nextArrow: false,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
touchThreshold: 100
});
});
$(".slick-slider").css("max-width", $(window).width());
// Cursor
var $circle = $('.circle'),
$follow = $('.circle-follow');
function moveCircle(e) {
TweenLite.to($circle, 0.3, {
x: e.clientX,
y: e.clientY
});
TweenLite.to($follow, 0.7, {
x: e.clientX,
y: e.clientY
});
}
function hoverFunc(e) {
TweenLite.to($circle, 0.3, {
opacity: 1,
scale: 0
});
TweenLite.to($follow, 0.3, {
scale: 3
});
}
function unhoverFunc(e) {
TweenLite.to($circle, 0.3, {
opacity: 1,
scale: 1
});
TweenLite.to($follow, 0.3, {
scale: 1
});
}
$(window).on('mousemove', moveCircle);
$("a").hover(hoverFunc, unhoverFunc);
$("i").hover(hoverFunc, unhoverFunc);
gsap.from(".anim1", {duration: 3, y:-40, opacity: 0, ease: "back(6, 0.6)", stagger: .2});
//// Navigation
var navigation = new TimelineLite({paused:true, reversed:true});
navigation.to("#navigationWrap", 0.5, {opacity: 1, display: 'block'})
.to(".navbar", 0.3, {opacity: 0}, "-=0.1")
.to(".close", 0.3, {display: "block", opacity: 1}, "-=0.1")
.from(".menu", 0.5, {opacity: 0, y: 30})
.from(".social", 0.5, {opacity: 0});
$(".navbar, .close").click (function() {
navigation.reversed() ? navigation.play() : navigation.reverse();
})
$(".menu a").click (function(e) {
e.preventDefault()
let target = e.target.getAttribute("href")
console.log(target)
locoScroll.scrollTo(target);
navigation.reversed() ? navigation.play() : navigation.reverse();
})
// Landing Page GSAP Animations
var t1 = new TimelineMax({ paused: true });
TweenMax.staggerFrom(
".disclaimer p",
1,
{
y: 20,
opacity: 0,
ease: Expo.easeInOut,
delay: 1
},
0.1
);
TweenMax.staggerFrom(
".footer p",
1,
{
y: 20,
opacity: 0,
ease: Expo.easeInOut,
delay: 1
},
0.1
);
TweenMax.staggerFrom(
".navbar",
1,
{
y: 20,
opacity: 0,
ease: Expo.easeInOut,
delay: 1
},
0.1
);
</script>
@charset "UTF-8";
@import url("https://use.typekit.net/ngi2bbw.css");
/* Global Settings */
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: termina, sans-serif;
background-color: #e0e1dd;
transition: background-color 0.9s ease;
max-width: 100%;
overflow-x: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body.night-mode {
background: #121212;
}
html {
scroll-behavior: smooth;
}
h1 {
font-size: 3.5rem;
font-weight: 900;
transition: color 0.9s ease;
}
.night-mode h1 {
color: #e0e1dd;
}
h2 {
transition: color 0.9s ease;
}
.night-mode h2 {
color: #e0e1dd;
}
p {
font-size: 0.9rem;
color: #121212;
transition: color 0.9s ease;
}
.night-mode p {
color: #e0e1dd;
}
.p-0 {
padding: 0 !important;
}
section {
height: 100vh;
}
.cta {
font-size: 1.5rem;
font-weight: 700;
margin-top: 5rem;
margin-left: 25rem;
color: #121212;
border: 1px solid #121212;
transition: color 0.9s ease;
}
.night-mode .cta {
color: #e0e1dd;
border: 1px solid #e0e1dd;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.25rem;
}
p {
font-size: 0.9rem;
}
.cta {
font-size: 0.8rem;
font-weight: 700;
margin-top: 15rem;
margin-left: 10rem;
}
}
/* Night Mode */
#night {
cursor: pointer;
z-index: 2;
}
.night-mode #night {
transition: color 0.9s ease;
color: #e0e1dd;
}
progress {
position: fixed;
top: 0;
left: 0;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
border: none;
background: transparent;
z-index: 1;
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
background: #121212;
background-attachment: fixed;
}
.night-mode progress::-webkit-progress-value {
background: #e0e1dd;
}
progress::-moz-progress-bar {
background: #121212;
background-attachment: fixed;
}
.night-mode progress::-moz-progress-bar {
background: #e0e1dd;
}
/* Navigation */
.nav-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%;
}
}
/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav-container:after {
content: "";
display: table;
clear: both;
}
#navigationWrap {
display: none;
width: 100%;
min-height: 100vh;
height: 100%;
background: #e0e1dd;
transition: background 0.9s ease;
opacity: 0;
position: fixed;
top: 0;
padding: 50px 0;
overflow: hidden;
z-index: 1;
}
.night-mode #navigationWrap {
background: #121212;
}
nav ul {
margin-top: 5rem;
list-style-type: none;
padding: 0;
text-align: center;
}
nav ul li {
color: #e0e1dd;
font-size: 4.5rem;
text-transform: uppercase;
overflow: hidden;
font-weight: 700;
}
nav ul li:first-child {
font-size: 8vh;
overflow: visible;
}
@media (max-width: 750px) {
nav ul li {
font-size: 15vw;
}
nav ul li:first-child {
font-size: 8vw;
}
}
nav a {
color: #e0e1dd;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
text-decoration: none;
}
.navbar {
position: fixed;
right: 0;
margin: 1em;
color: #121212;
z-index: 20;
cursor: pointer;
}
.night-mode .navbar {
color: #e0e1dd;
}
.close {
display: none;
opacity: 0;
position: fixed;
right: 0;
margin: 1em;
z-index: 20;
color: #121212;
transition: color 0.9s ease;
cursor: pointer;
}
.night-mode .close {
color: #e0e1dd;
}
.social {
margin-top: 5em;
justify-content: center;
text-align: center;
}
.social a {
align-items: center;
color: #484848;
color: white;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
text-decoration: none;
}
.social a:hover {
transition: color 0.9s ease;
color: #121212;
}
.night-mode .social a:hover {
color: #e0e1dd;
}
.social .fa {
padding-right: 12px;
font-size: 1.8em !important;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
color: #121212;
transition: color 0.9s ease;
}
.night-mode .social .fa {
color: #e0e1dd;
}
/* Media Queries */
@media screen and (max-width: 768px) {
html, body {
overflow-x: hidden;
}
.menu-toggle {
margin-top: 1em;
}
.overlay .close-btn {
margin-top: 1em;
}
.menu ul li {
font-size: 30px;
padding: 10px 0;
}
.menu ul li a {
-webkit-text-stroke: 2px #121212 !important;
transition: color 0.9s ease;
}
.night-mode .menu ul li a {
-webkit-text-stroke: 2px #e0e1dd !important;
}
}
.menu ul li a {
color: transparent;
-webkit-text-stroke: 3px #121212;
text-transform: uppercase !important;
}
.night-mode .menu ul li a {
-webkit-text-stroke: 3px #e0e1dd;
}
.menu ul li a:hover {
text-decoration: none;
color: #121212;
}
.night-mode .menu ul li a:hover {
color: #e0e1dd;
}
.logo {
position: fixed;
line-height: 4rem;
margin-left: 2rem;
font-size: 0.8rem;
letter-spacing: 0.2rem;
font-weight: 600;
list-style: none;
z-index: 2;
}
.logo a {
color: #121212;
transition: color 0.9s ease;
text-decoration: none;
}
.night-mode .logo a {
color: #e0e1dd;
}
@media (max-width: 900px) {
.logo {
line-height: 3.5rem;
margin-left: 1rem;
font-size: 0.6rem;
letter-spacing: 0.1rem;
}
progress {
display: none;
}
}
/* Home */
#home h1 {
margin-top: 15%;
}
#home h2 {
margin-top: 10%;
}
#home p {
margin-top: 8%;
width: 80%;
}
@media screen and (max-width: 768px) {
#home h1 {
margin-top: 3rem;
}
span {
margin-bottom: 1rem;
font-size: 0.7rem;
}
}
/* Slider */
.slick-slider {
position: absolute;
width: 100%;
height: 100vh;
}
.slick-slider img {
display: flex;
object-fit: cover;
width: 100%;
height: 100vh;
}
@media screen and (max-width: 400px) {
.slick-slider {
display: none;
}
}
/* About */
.about-container {
margin-top: 15rem;
display: flex;
}
.about-container img {
object-fit: cover;
height: 80vh;
}
/* Portfolio */
.portfolio-section {
margin-top: 15rem;
}
.section--large {
width: 100vw;
background-color: #e4002b;
color: white;
}
.section--small {
width: 46rem;
}
.section--dark {
color: white;
background-color: black;
}
.center-marker {
position: fixed;
width: 2px;
height: 100vh;
background: tomato;
top: 0;
left: calc(50vw - 1px);
}
/* Footer */
.footer {
position: fixed;
z-index: 2;
font-size: 0.6rem;
margin-left: 2em;
bottom: 40px;
}
.footer p {
font-size: 0.7rem;
}
.footer p span {
font-weight: 900;
}
.disclaimer p {
position: fixed;
z-index: 2;
font-size: 0.7rem;
right: 0;
margin-right: 2em;
bottom: 40px;
}
.social-media {
position: absolute;
top: 38%;
z-index: 2;
right: 5%;
}
.social-media ul {
position: absolute;
list-style: none;
/*border: 5px solid red;*/
}
.social-media ul li {
padding: 12px 0;
}
.social-media a {
color: #12151F;
transition: color 0.9s ease;
text-decoration: none;
}
.night-mode .social-media a {
color: #e0e1dd;
}
