fullPage.js

\r\n

This is the first section

\r\n

Check new demo with fullPage.js v4 here\r\n

\r\n

Jump into the last slide

\r\n \r\n

\r\n

fullPage.js

\r\n

This is the second section

\r\n

fullPage.js

\r\n

This is the third section

\r\n

fullPage.js

\r\n

This is the fourth section

\r\n

fullPage.js

\r\n

This is the fifth section and it contains the first slide (actually section == first slide)

\r\n

fullPage.js

\r\n

This is the second slide

\r\n

Thank you!

\r\n

","css":"@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);\r\n\r\n\r\n\r\n/* ICON STYLES - ICON FROM: http://fontastic.me/\r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\n@font-face {\r\n font-family: \"untitled-font-1\";\r\n src: url(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot\");\r\n src: url(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix\") format(\"embedded-opentype\"),\r\n url(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff\") format(\"woff\"),\r\n url(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf\") format(\"truetype\"),\r\n url(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1\") format(\"svg\");\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n\r\n[class^=\"icon-\"]:after,\r\n[class*=\" icon-\"]:after {\r\n font-family: \"untitled-font-1\";\r\n font-style: normal;\r\n font-weight: normal;\r\n font-variant: normal;\r\n text-transform: none;\r\n speak: none;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.icon-up-open-big {\r\n display: inline-block;\r\n}\r\n\r\n.icon-up-open-big:after {\r\n content: \"a\";\r\n font-size: 2.5em;\r\n display: block;\r\n -webkit-transform: rotateX(180deg);\r\n transform: rotateX(180deg);\r\n color: black;\r\n -webkit-transition: color .3s;\r\n transition: color .3s;\r\n}\r\n\r\n.icon-up-open-big:hover:after {\r\n color: white;\r\n}\r\n\r\n.scroll-icon {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 30px;\r\n padding: 0 10px;\r\n -webkit-transform: translateX(-50%);\r\n -ms-transform: translateX(-50%);\r\n transform: translateX(-50%);\r\n}\r\n\r\n\r\n\r\n/* HELPER CLASSES\r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\n.clearfix:before,\r\n.clearfix:after {\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.clearfix:after {\r\n clear: both;\r\n}\r\n\r\n.l-left {\r\n float: left;\r\n}\r\n\r\n.l-right {\r\n float: right;\r\n}\r\n\r\n.end {\r\n margin-top: 30px;\r\n font-size: 3em;\r\n font-weight: bold;\r\n opacity: 0;\r\n -webkit-transform: translateY(300px);\r\n -ms-transform: translateY(300px);\r\n transform: translateY(300px);\r\n -webkit-transition: opacity, -webkit-transform 1s;\r\n transition: opacity, transform 1s;\r\n -webkit-transition-delay: 1s;\r\n transition-delay: 1s;\r\n}\r\n\r\n\r\n\r\n/* RESET-GENERAL STYLES\r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Alegreya Sans', Arial, sans-serif;\r\n text-transform: uppercase;\r\n}\r\n\r\nhtml {\r\n font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n color: black;\r\n letter-spacing: .18em;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n color: white;\r\n}\r\n\r\nul,\r\nli {\r\n list-style-type: none;\r\n}\r\n\r\n\r\n\r\n/* NAV STYLES\r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\n.header-top {\r\n background: rgba(0, 47, 77, .3);\r\n height: 70px;\r\n padding: 0 10px;\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n z-index: 12;\r\n box-sizing: border-box;\r\n}\r\n\r\nh1 {\r\n line-height: 70px;\r\n height: 70px;\r\n}\r\n\r\nh1 a {\r\n display: block;\r\n padding: 0 10px;\r\n}\r\n\r\n.toggle-menu {\r\n width: 50px;\r\n height: 50px;\r\n display: inline-block;\r\n position: relative;\r\n top: 10px;\r\n}\r\n\r\n.toggle-menu i {\r\n position: absolute;\r\n display: block;\r\n height: 2px;\r\n background: white;\r\n width: 30px;\r\n left: 10px;\r\n -webkit-transition: all .3s;\r\n transition: all .3s;\r\n}\r\n\r\n.toggle-menu i:nth-child(1) {\r\n top: 16px;\r\n}\r\n\r\n.toggle-menu i:nth-child(2) {\r\n top: 24px;\r\n}\r\n\r\n.toggle-menu i:nth-child(3) {\r\n top: 32px;\r\n}\r\n\r\n.open-menu i:nth-child(1) {\r\n top: 25px;\r\n -webkit-transform: rotateZ(45deg);\r\n transform: rotateZ(45deg);\r\n}\r\n\r\n.open-menu i:nth-child(2) {\r\n background: transparent;\r\n}\r\n\r\n.open-menu i:nth-child(3) {\r\n top: 25px;\r\n -webkit-transform: rotateZ(-45deg);\r\n transform: rotateZ(-45deg);\r\n}\r\n\r\nnav {\r\n height: 0;\r\n opacity: 0;\r\n box-sizing: border-box;\r\n background: rgba(0, 47, 77, .25);\r\n position: fixed;\r\n top: 70px;\r\n width: 100%;\r\n -webkit-transition: all 3s;\r\n transition: all 3s;\r\n}\r\n\r\n.open-menu~nav {\r\n opacity: 1;\r\n padding: 80px 0;\r\n z-index: 15;\r\n height: calc(90vh - 70px);\r\n}\r\n\r\nnav ul {\r\n padding: 0 10px;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\nnav li {\r\n -webkit-box-flex: 1;\r\n -webkit-flex: 1;\r\n -ms-flex: 1;\r\n flex: 1;\r\n}\r\n\r\nnav li a {\r\n font-size: 2em;\r\n display: block;\r\n padding: 30px;\r\n text-align: center;\r\n -webkit-transition: background .3s;\r\n transition: background .3s;\r\n}\r\n\r\nnav li:nth-child(odd) a,\r\nbody.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {\r\n background: #962D3E;\r\n}\r\n\r\nnav li:nth-child(even) a {\r\n background: #aa3346;\r\n}\r\n\r\nnav li:nth-child(odd) a:hover {\r\n background: #9e2f41;\r\n}\r\n\r\nnav li:nth-child(even) a:hover {\r\n background: #c53c52;\r\n}\r\n\r\nnav li.active a,\r\nbody.fp-viewing-fifthSection-1 #menu li:last-child a {\r\n background: #453659;\r\n}\r\n\r\n\r\n\r\n/* SECTION STYLES - fullPage.js \r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\nsection {\r\n text-align: center;\r\n /*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/\r\n}\r\n\r\nh2 {\r\n text-transform: lowercase;\r\n font-size: 4em;\r\n margin-bottom: 20px;\r\n}\r\n\r\nh3 {\r\n font-weight: 300;\r\n font-size: 2.8em;\r\n}\r\n\r\n\r\n\r\n/* SLIDENAV STYLES - fullPage.js \r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\n#fp-nav ul li a span,\r\n.fp-slidesNav ul li a span {\r\n background: white;\r\n width: 8px;\r\n height: 8px;\r\n margin: -4px 0 0 -4px;\r\n}\r\n\r\n#fp-nav ul li a.active span,\r\n.fp-slidesNav ul li a.active span,\r\n#fp-nav ul li:hover a.active span,\r\n.fp-slidesNav ul li:hover a.active span {\r\n width: 16px;\r\n height: 16px;\r\n margin: -8px 0 0 -8px;\r\n background: transparent;\r\n box-sizing: border-box;\r\n border: 1px solid #24221F;\r\n}\r\n\r\n\r\n\r\n/* MQ STYLES\r\n–––––––––––––––––––––––––––––––––––––––––––––––––– */\r\n\r\n@media screen and (max-width: 767px) {\r\n nav ul {\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: column;\r\n -ms-flex-direction: column;\r\n flex-direction: column;\r\n }\r\n\r\n nav li {\r\n margin-top: 1px;\r\n }\r\n\r\n nav li a {\r\n font-size: 1.5em;\r\n }\r\n\r\n .scroll-icon {\r\n display: none;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 400px) {\r\n html {\r\n font-size: 50%;\r\n }\r\n\r\n .open-menu~nav {\r\n padding: 20px 0;\r\n }\r\n\r\n nav li a {\r\n padding: 3px;\r\n }\r\n}","js":"//https://unpkg.com/fullpage.js@3.1.2/dist/fullpage.min.js\r\n\r\n// variables\r\nvar headerTop = document.querySelector('.header-top');\r\nvar nav = document.querySelector('nav');\r\n\r\n// toggle menu\r\nvar headerLinks = headerTop.querySelectorAll('a');\r\nheaderLinks.forEach(function (link) {\r\n link.addEventListener('click', function () {\r\n link.parentNode.classList.toggle('open-menu');\r\n });\r\n});\r\n\r\n// fullpage customization\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n var fullpage = new fullpage('#fullpage', {\r\n sectionsColor: ['#B8AE9C', '#348899', '#F2AE72', '#5C832F', '#B8B89F'],\r\n sectionSelector: '.vertical-scrolling',\r\n slideSelector: '.horizontal-scrolling',\r\n navigation: true,\r\n slidesNavigation: true,\r\n controlArrows: false,\r\n anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],\r\n menu: '#menu',\r\n\r\n afterLoad: function (anchorLink, index) {\r\n headerTop.style.background = 'rgba(0, 47, 77, .3)';\r\n nav.style.background = 'rgba(0, 47, 77, .25)';\r\n if (index === 5) {\r\n document.querySelector('#fp-nav').style.display = 'none';\r\n }\r\n },\r\n\r\n onLeave: function (index, nextIndex, direction) {\r\n if (index === 5) {\r\n document.querySelector('#fp-nav').style.display = 'block';\r\n }\r\n },\r\n\r\n afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {\r\n if (anchorLink === 'fifthSection' && slideIndex === 1) {\r\n fullpage_api.setAllowScrolling(false, 'up');\r\n headerTop.style.background = 'transparent';\r\n nav.style.background = 'transparent';\r\n document.querySelector('.horizontal-scrolling:nth-child(5)').style.background = '#374140';\r\n document.querySelector('.horizontal-scrolling:nth-child(5) h2').style.color = 'white';\r\n document.querySelector('.horizontal-scrolling:nth-child(5) h3').style.color = 'white';\r\n var paragraphs = document.querySelectorAll('.horizontal-scrolling:nth-child(5) p');\r\n paragraphs.forEach(function (paragraph) {\r\n paragraph.style.color = '#DC3522';\r\n paragraph.style.opacity = 1;\r\n paragraph.style.transform = 'translateY(0)';\r\n });\r\n }\r\n },\r\n\r\n onSlideLeave: function (anchorLink, index, slideIndex, direction) {\r\n if (anchorLink === 'fifthSection' && slideIndex === 1) {\r\n fullpage_api.setAllowScrolling(true, 'up');\r\n headerTop.style.background = 'rgba(0, 47, 77, .3)';\r\n nav.style.background = 'rgba(0, 47, 77, .25)';\r\n }\r\n }\r\n });\r\n});\r\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"ELAKbI","description":"Fullpage.Js","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":305}],"profiles":{"username":"devcanvas"}}]