02/18/17 | Mys2010 on Codepen

Memasang Kode Slide Full Page Js
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;} 
body {
background:#000;} 
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: "untitled-font-1";
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:after,
[class*=" icon-"]:after {
  font-family: "untitled-font-1";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-up-open-big { display: inline-block; }
.icon-up-open-big:after {
  content: "a";
  font-size: 2.5em;
  display: block;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  color: black;
  -webkit-transition: color .3s;
          transition: color .3s;
}
.icon-up-open-big:hover:after {
 color: white; 
}
.scroll-icon {
 position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
}
/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.l-left {
 float: left;
}
.l-right {
 float: right;
}
.end {
 margin-top: 30px;
 font-size: 3em;
 font-weight: bold;
 opacity: 0;
 -webkit-transform: translateY(300px);
         transform: translateY(300px);
 -webkit-transition: opacity, -webkit-transform 1s;
         transition: opacity, -webkit-transform 1s;
         transition: opacity, transform 1s;
         transition: opacity, transform 1s, -webkit-transform 1s;
 -webkit-transition-delay: 1s;
         transition-delay: 1s;
}
/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
 margin: 0;
 padding: 0;
 font-family: 'Alegreya Sans', Arial, sans-serif;
 text-transform: uppercase;
}
html {
 font-size: 62.5%;
}
body {
 color: black;
 letter-spacing: .18em;
}
a {
 text-decoration: none;
 color: white;
}
ul, li {
 list-style-type: none;
}
/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-top {
 background: rgba(0, 47, 77, .3);
 height: 70px;
 padding: 0 10px;
 position: fixed;
 top: 52px;
 width: 100%;
 z-index: 12;
 box-sizing: border-box;
}
h1 {
 line-height: 70px;
 height: 70px;
}
h1 a {
 display: block;
 padding: 0 10px;
}
.toggle-menu {
 width: 50px;
 height: 50px;
 display: inline-block;
 position: relative;
 top: 10px;
}
.toggle-menu i {
 position: absolute;
 display: block;
 height: 2px;
 background: white;
 width: 30px;
 left: 10px;
 -webkit-transition: all .3s;
         transition: all .3s;
}
.toggle-menu i:nth-child(1) {
 top: 16px;
}
.toggle-menu i:nth-child(2) {
 top: 24px;
}
.toggle-menu i:nth-child(3) {
 top: 32px;
}
.open-menu i:nth-child(1) {
 top: 25px;
 -webkit-transform: rotateZ(45deg);
         transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
 background: transparent;
}
.open-menu i:nth-child(3) {
 top: 25px;
 -webkit-transform: rotateZ(-45deg);
         transform: rotateZ(-45deg);
}
nav {
  height: 0;
 opacity: 0;
  box-sizing: border-box;
 background: rgba(0, 47, 77, .25);
 position: fixed;
 top: 70px;
 width: 100%;
  -webkit-transition: all 3s;
          transition: all 3s;
}
.open-menu ~ nav {
 opacity: 1;
  padding: 80px 0;
 z-index: 15;
 height: calc(90vh - 70px);
}
nav ul {
 padding: 0 10px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}
nav li {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
}
nav li a {
 font-size: 2em;
 display: block;
 padding: 30px;
 text-align: center;
 -webkit-transition: background .3s;
         transition: background .3s;
}
nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
 background: #962D3E;
}
nav li:nth-child(even) a {
 background: #aa3346;
}
nav li:nth-child(odd) a:hover {
 background: #9e2f41;
}

nav li:nth-child(even) a:hover {
 background: #c53c52;
}
nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
  background: #453659;
}
/* SECTION STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section { 
 text-align: center;
  /*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}
h4 {
text-transform: uppercase;
Little-text-transform: lowercase;
 font-size: 4em;
 margin-bottom:20px;
}
h3 {
 font-weight: 300;
 font-size: 2.8em;
}
/* SLIDENAV STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
 background: white;
 width: 8px;
 height: 8px;
 margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
 width: 16px;
 height: 16px;
 margin: -8px 0 0 -8px;
 background: transparent;
 box-sizing: border-box;
 border: 1px solid #24221F;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
 nav ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
 }
 nav li {
  margin-top: 1px;
 }  
  nav li a {
    font-size: 1.5em;
  }
   .scroll-icon {
    display: none;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 50%;
  }
  .open-menu ~ nav {
  padding: 20px 0;
 }
 nav li a {
  padding: 3px;
 }
}</style>

<header>
<div class="header-top clearfix">
    <h1 class="l-left">
<a href="#firstSection">Your Logo</a></h1>
    <a class="l-right toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
</a></div> 
  <nav class="hide">
    <ul id="menu">
      <h2><li data-menuanchor="firstSection">
        <a href="#firstSection" title="First Section">First Section</a>
      </li>
      <li data-menuanchor="secondSection">
        <a href="#secondSection" title="Second Section">Second Section</a>
      </li>
      <li data-menuanchor="thirdSection">
        <a href="#thirdSection" title="Second Section">Third Section</a>
      </li>
      <li data-menuanchor="fourthSection">
        <a href="#fourthSection" title="Fourth Section">Fourth Section</a>
      </li>
      <li data-menuanchor="fifthSection">
        <a href="#fifthSection" title="First Slide">First Slide</a>
      </li>
      <li data-menuanchor="fifthSection/1">
        <a href="#fifthSection/1" title="Second Slide">Second Slide</a>
      </li>
    </ul> 
  </nav>
 </header>

<div id="fullpage">
  <section class="vertical-scrolling">
  <h4>M-2010</h4> 
    <h3>learn web design<br>This is the first section</h3>
    <div class="scroll-icon">
      <p>Jump into the last slide</p>
      <a href="#fifthSection/1" class="icon-up-open-big"></a>
    </div>
  </section>
  <section class="vertical-scrolling">
   <h4>SSLIDE 2</h4> 
    <h3>This is the second section</h3>
  </section>
  <section class="vertical-scrolling">
    <h4>SLIDE 3</h4>
    <h3>This is the third section</h3>
  </section>
  <section class="vertical-scrolling">
    <h4>SLIDE 4</h4> 
    <h3>This is the fourth section</h3>
  </section>
  <section class="vertical-scrolling">
    <div class="horizontal-scrolling">
      <h4>fullPage.js</h4>
      <h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
    </div>
    <div class="horizontal-scrolling">
      <h4>Myscript2010</h4>
      <h3>This is the second slide</h3> 
      <p class="end">Thank you!</p>
    </div>
  </section>
</div>

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css'>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'>
</script><script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js'>
</script>

<script>
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['#B8AE9C', '#348899', '#F2AE72', '#5C832F', '#B8B89F'],
  sectionSelector: '.vertical-scrolling',
  slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
  anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],
  menu: '#menu',
 afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
        $('#fp-nav').hide();}},
 onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
      $('#fp-nav').show();}},
  afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(false, 'up');
      $header_top.css('background', 'transparent');
      $nav.css('background', 'transparent');
      $(this).css('background', '#374140');
      $(this).find('h4').css('color', 'white');
      $(this).find('h3').css('color', 'white');
      $(this).find('p').css({
          'color': '#DC3522',
          'opacity': 1,
          'transform': 'translateY(0)'});}},
  onSlideLeave: function( anchorLink, index, slideIndex, direction) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(true, 'up');
      $header_top.css('background', 'rgba(0, 47, 77, .3)');
      $nav.css('background', 'rgba(0, 47, 77, .25)');}}}); 
</script>

Desain Webblog Slide Full Page Js untuk menampilkan Menu, Edit Kode Sesuai keinginan

Slide Code by. Alvarotrigo
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

* If you want to directly copy  and  paste you canDownload Here  Slide Full Fage Js

Category: Slide Full Page Js

Mys2010 on Codepen

Slide Full Page Js

POPULAR

Blog Archive