fullPage.js For WordPress
function fullpage_template( $original_template ) {
if ( get_post_meta( get_the_ID(), 'fullpage_js', true ) ) {
return dirname(__FILE__) . '/templates/fullpage.php';
} else {
return $original_template;
}
}
add_filter( 'template_include', 'fullpage_template' );
<?php
/**
* The template for displaying posts that are using fullPage.js
*
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo plugins_url('../css/jquery.fullPage.css',__FILE__); ?>" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo plugins_url('../js/vendors/jquery.slimscroll.min.js',__FILE__); ?> "></script>
<script type="text/javascript" src="<?php echo plugins_url('../js/jquery.fullPage.min.js',__FILE__); ?>"></script>
<?php
$fullpage_css = '<style>' . get_post_meta( get_the_ID(), 'fullpage_css', true ) . '</style>';
echo $fullpage_css;
?>
</head>
<body>
<?php
if ( have_posts() ) : the_post();
remove_filter('the_content', 'wpautop');
the_content();
endif; // end of the loop.
$fullpage_js = get_post_meta( get_the_ID(), 'fullpage_js', true);
if ( empty( $fullpage_js ) ) {
$fullpage_js = '$(document).ready(function() {$(\'#fullpage\').fullpage();});';
}
echo '<script type="text/javascript">' . $fullpage_js . '</script>';
?>
</body>
</html>
[fullpage]
<div id="staticImg">
<div class="imgsContainer">
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone-green.png" alt="iphone" id="iphone-green" />
</div>
</div>
[section id="section0"]
<h1>Apple fullPage.js Demo</h1>
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone1.jpg" alt="iphone" />
[/section]
[section id="section1"]
<div class="wrap">
<div class="imgsContainer">
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone2.png" alt="iphone" id="iphone2" />
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone3.png" alt="iphone" id="iphone3" />
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone4.png" alt="iphone" id="iphone4" />
</div>
<div class="box">
<h2>A powerful plugin</h2>
<strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.
</div>
</div>
[/section]
[section action="moveDown" id="section2"]
<div class="wrap">
<div class="imgsContainer">
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone-red.png" alt="iphone" id="iphone-red" />
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone-blue.png" alt="iphone" id="iphone-blue" />
</div>
<div class="box">
<h2>Amazing stuff</h2>
Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.
</div>
</div>
[/section]
[section action="moveDown" id="section3"]
<div class="wrap">
<div class="box">
<h2>Just a demo</h2>
This is, of course, just a demo. I didn't want to spend much time on it.
Don't expect it to work perfectly in all kind of screens.
It has been designed to work on 1180px width or over on modern browsers with CSS3.
</div>
</div>
<div class="imgsContainer">
<img src="http://www.test.dev/wp-content/uploads/2014/09/iphone-two.png" alt="iphone" id="iphone-two" />
</div>
[/section]
[/fullpage]
$(document).ready(function() {
$('#fullpage').fullpage({
'verticalCentered': false,
'css3': true,
'sectionsColor': ['#F0F2F4', '#fff', '#fff', '#fff'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
afterLoad: function(anchorLink, index){
if(index == 2){
$('#iphone3, #iphone2, #iphone4').addClass('active');
}
},
onLeave: function(index, newIndex, direction){
if (index == 3 && direction == 'down'){
$('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');
}
else if(index == 3 && direction == 'up'){
$('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');
}
$('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
$('#staticImg').toggleClass('moveDown', newIndex == 4);
$('#staticImg').toggleClass('moveUp', index == 4 && direction == 'up');
},
});
});
/* Style for header texts
* --------------------------------------- */
h1{
font-size: 5em;
font-family: arial,helvetica;
margin:0;
padding:0;
}
h2{
font-size: 2em;
margin: 0 0 18px 0;
font-family: arial,helvetica;
}
/* Common styles
* --------------------------------------- */
img{
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.section{
text-align:center;
overflow:hidden;
}
.wrap{
width: 1180px;
height: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.box{
text-align: left;
color: #808080;
font-size: 1.2em;
line-height: 1.6em;
}
/* Section 0
* --------------------------------------- */
#section0{
padding: 60px 0;
}
#section0 img{
height: 100%;
margin: 40px 0 0 0;
}
/* Section 1
* --------------------------------------- */
#section1 img{
position:absolute;
left: 40px;
top: 100px;
}
#section1 .box{
position: absolute;
top: 50%;
left: 50%;
margin-top: -192px;
margin-left: 89px;
width: 395px;
z-index: 1;
}
#section1 .imgsContainer{
display: block;
position: absolute;
z-index: 1;
top: 42%;
left: 58%;
margin-top: -325px;
margin-left: -747px;
width: 800px;
height: 696px;
}
#section1 img{
height: 100%;
}
/*screen resolutions between 620px and 800px*/
@media all and (min-width: 620px) and (max-width: 800px){
#section1 .imgsContainer{
margin-top: -278px;
margin-left: -685px;
width: 647px;
height: 563px;
}
}
/*screen resolutions lower than 620px*/
@media all and (max-width: 620px){
#section1 .imgsContainer{
margin-top: -208px;
margin-left: -516px;
width: 534px;
height: 464px;
}
}
#iphone2{
z-index: 10;
}
#iphone2.active{
-webkit-transform: translate3d(-134px, 0px, 0px);
-moz-transform: translate3d(-134px, 0px, 0px);
-ms-transform:translate3d(-134px, 0px, 0px);
transform: translate3d(-134px, 0px, 0px);
}
#iphone3{
z-index: 12;
}
#iphone3.active{
-webkit-transform: translate3d(213px, 0px, 0px);
-moz-transform: translate3d(213px, 0px, 0px);
-ms-transform:translate3d(213px, 0px, 0px);
transform: translate3d(213px, 0px, 0px);
}
#iphone4{
z-index: 11;
left: 140px;
}
#iphone4.active{
-webkit-transform: translate3d(548px, 0px, 0px);
-moz-transform: translate3d(548px, 0px, 0px);
-ms-transform:translate3d(548px, 0px, 0px);
transform: translate3d(548px, 0px, 0px);
}
/* Section 2
* --------------------------------------- */
#section2 img{
position:absolute;
}
#section2 .imgsContainer,
#staticImg .imgsContainer,
#section3 .imgsContainer{
position: absolute;
z-index: 1;
left: 50%;
display: block;
margin-top: -288px;
margin-left: -636px;
width: 0;
height: 0;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out;
}
#section2.moveUp .imgsContainer{
top: 50%;
}
#section2.moveDown .imgsContainer,
#staticImg .imgsContainer{
top: 90%;
}
#section2.active .imgsContainer{
top: 50%;
}
#section2 .box{
top: 22%;
left: 42%;
position: absolute;
width: 582px;
}
#iphone-yellow{
top: -35px;
left: -222px;
}
#iphone-red{
top: -194px;
left: 106px;
}
#iphone-blue{
top: 320px;
left: 448px;
}
#iphone-green{
left: 106px;
position:absolute;
}
#staticImg{
display: block;
position: absolute;
z-index: 1;
top: 200%;
left: 0;
width: 100%;
min-width: 980px;
height: 100%;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
#staticImg.moveDown{
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
#staticImg.moveUp{
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#staticImg.moveDown .imgsContainer{
top: 50%;
}
#staticImg.moveDown img{
top: 155px;
}
#staticImg.active .imgsContainer{
top: 50%;
}
#staticImg.active img{
top: 487px;
}
/* Section 3
* --------------------------------------- */
#section3 .imgsContainer{
top: 50%;
}
#section3 img{
top: 155px;
left: 455px;
position: absolute;
}
#section3 .box{
text-align: center;
margin: 10% 0 0 0;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
.fp-tooltip{
color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
background: #AAA;
}