cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <!--
		//	projects
		///////////////////////////////////-->
<div class="page__style projects">
  <div class="page__description">
    <div id="projects">

      <h1>Projects</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>
<!--
		//	skills
		///////////////////////////////////-->
<div class="page__style skills">
  <div class="page__description">
    <div id="skills">
      <h1>Skills</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>

<!--
		//	about
		///////////////////////////////////-->
<div class="page__style about">
  <div class="page__description">
    <div id="about">
      <h1>About</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>
<!--
		//	contact
		///////////////////////////////////-->
<div class="page__style contact">
  <div class="page__description">
    <div id="contact">
      <h1>Contact</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>
<!--
		//	home
		///////////////////////////////////-->
<div class="page__style home">
  <div class="page__description">
    <div id="home">

      <div class="box"></div>

      <h1>Home</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>
    </div>
  </div>
</div>
            
          
!
            
              // reset
*, :before, :after 
	box-sizing border-box
	padding 0
	margin 0
  
// styles
.hide 
	display none

.page__style 
	background #6D326D
	font-family OpenSans-Regular, sans-serif
	position fixed
	top 0
	right 0
	bottom 0
	left 0
	height 100%
	width 100%
	margin auto auto
	overflow hidden
	
	.page__description
		color #ffffff
		font-weight 300
		text-align center
	h1
		font-weight 300
		margin-top 200px
		margin-bottom 30px

	.btn_nav
		background #002A32
		border-radius 30px
		border none
		color #fff
		cursor pointer
		font-family inherit
		font-size 15px
		font-weight bold
		text-transform uppercase
		letter-spacing 1px
		margin-bottom 20px
		padding 17px 30px
		width 146px
		&:focus,
		&:active
			outline none
			
	a
		text-decoration none
		color #fff
		&:hover
			color darken(#fff, 20%)



// Animation class
.animate_content
	animation animate 3s ease

@keyframes animate
	10%
		transform scale(1, 0.002)
	35%
		transform scale(0.2, 0.002)
		opacity 1
	50%
		transform scale(0.2, 0.002)
		opacity 0
	85%
		transform scale(1, 0.002)
		opacity 1
	100%
		transform scale(1, 1)


.fadeIn
	z-index 10
		
/*  home
-----------------------------------*/
.home
	background #5DA9E9

/*  Projects
-----------------------------------*/
.projects
	background #BD5DE9

/*  Skills
-----------------------------------*/
.skills
	background #5DE974

/*  About
-----------------------------------*/
.about
	background #FB9B33

/*  Contact
-----------------------------------*/
.contact
	background #C9CDC0
			
/*****************************************************************
~ Mobile media-queries (max-width: 767px)
******************************************************************/

@media only screen and (max-width: 767px)
	.page__description
		h1
			margin-top 100px
            
          
!
            
              $('.btn_nav').click(function() {
  // animate content
  $('.page__style').addClass('animate_content');
  $('.page__description').fadeOut(100).delay(2800).fadeIn();

  setTimeout(function() {
    $('.page__style').removeClass('animate_content');
  }, 3200);

  //remove fadeIn class after 1500ms
  setTimeout(function() {
    $('.page__style').removeClass('fadeIn');
  }, 1500);

});

// on click show page after 1500ms
$('.home_link').click(function() {
  setTimeout(function() {
    $('.home').addClass('fadeIn');
  }, 1500);
});

$('.projects_link').click(function() {
  setTimeout(function() {
    $('.projects').addClass('fadeIn');
  }, 1500);
});

$('.skills_link').click(function() {
  setTimeout(function() {
    $('.skills').addClass('fadeIn');
  }, 1500);
});

$('.about_link').click(function() {
  setTimeout(function() {
    $('.about').addClass('fadeIn');
  }, 1500);
});

$('.contact_link').click(function() {
  setTimeout(function() {
    $('.contact').addClass('fadeIn');
  }, 1500);
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console