Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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 -->
              
            
!

CSS

              
                @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 .9s ease;
  &.night-mode{
    background: #121212;
  } 
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



html {
  scroll-behavior: smooth;   
}

h1 {
  font-size: 3.5rem;
  font-weight: 900;
  transition: color .9s ease;
  .night-mode &{
    color: #e0e1dd;
  } 
  
}

h2 {
  transition: color .9s ease;
  .night-mode &{
    color: #e0e1dd;
  } 
 
}

p {
  font-size: .9rem;
  color: #121212;
  transition: color .9s ease;
  .night-mode &{
    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 .9s ease;
  .night-mode &{
    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: .9rem;
  }

  .cta {
    font-size: .8rem;
    font-weight: 700;
    margin-top: 15rem;
    margin-left: 10rem;
    
  }

}

/*      Night Mode */

#night {
  cursor: pointer;
  z-index: 2;
  .night-mode &{
    transition: color .9s ease;
    color: #e0e1dd;
  } 
}



// Scrollbar

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;
  .night-mode &{
    background: #e0e1dd;
  } 
  background-attachment: fixed;
}
progress::-moz-progress-bar {
  background: #121212;
  .night-mode &{
    background: #e0e1dd;
  } 
  background-attachment: fixed;
}



/*        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 .9s ease;
  .night-mode &{
    background: #121212;
  } 
  opacity: 0;
  position: fixed;
  top: 0;
  padding: 50px 0;
  overflow: hidden;
  z-index: 1;
}
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:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
  text-decoration: none;
}

.navbar {
  position: fixed;
  right: 0;
  margin: 1em;
  color: #121212;
  .night-mode &{
    color: #e0e1dd;
  } 
  z-index: 20;
  cursor: pointer;
}

.close {
  display: none;
  opacity: 0;
  position: fixed;
  right: 0;
  margin: 1em;
  z-index: 20;
  color: #121212;
  transition: color .9s ease;
  .night-mode &{
    color: #e0e1dd;
  } 
  cursor: pointer;
}

.social {
  margin-top: 5em;
  justify-content: center;
  text-align: center;
}

.social a {
  align-items: center;
  color: #484848;
  color: white;
  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
  text-decoration: none;
}
.social a:hover {
  transition: color .9s ease;
  color: #121212;
  .night-mode &{
    color: #e0e1dd;
  } 
}

.social .fa {
  padding-right: 12px;
  font-size: 1.8em !important;
  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
  color: #121212;
  transition: color .9s ease;
  .night-mode &{
    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 .9s ease;
  .night-mode &{
    -webkit-text-stroke: 2px #e0e1dd!important;
  } 
  }

}

.menu ul li a {
  color: transparent;
  -webkit-text-stroke: 3px #121212;
  .night-mode &{
    -webkit-text-stroke: 3px #e0e1dd;
  } 
  
  text-transform: uppercase !important;
}

.menu ul li a:hover {
  text-decoration: none;
  color: #121212;
  .night-mode &{
    color: #e0e1dd;
  } 
}


.logo {
  position: fixed;
  line-height: 4rem;
  margin-left: 2rem;
  font-size: .8rem;
  letter-spacing: .2rem;
  font-weight: 600;
  list-style: none;
  z-index: 2; 

  a {
    color: #121212;
    transition: color .9s ease;
  .night-mode &{
    color: #e0e1dd;
  } 
    text-decoration: none;
  }
}

@media (max-width: 900px) {
  .logo {
    line-height: 3.5rem;
    margin-left: 1rem;
    font-size: .6rem;
    letter-spacing: .1rem;
  }

  progress {
    display: none;
  }
}


/*      Home  */

#home {

  h1 {
    margin-top: 15%;
  }

  h2 {
    margin-top: 10%;
  }

  p {
    margin-top: 8%;
    width: 80%;
  }
}

@media screen and (max-width: 768px) {

  #home h1 {
    
    margin-top: 3rem;
  }
  
  span {

    margin-bottom: 1rem;
    font-size: .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;

  

  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: .6rem;
  margin-left: 2em;
  bottom: 40px;
  
}

.footer p {
  font-size: .7rem;
}

.footer p span {
  font-weight: 900;
}

.disclaimer p {
  position: fixed;
  z-index: 2;
  font-size: .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 .9s ease;
  .night-mode &{
    color: #e0e1dd;
  } 
  text-decoration: none;  
}
              
            
!

JS

              
                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
  );
              
            
!
999px

Console