pommiegranit/background-shifting.js

## background-shifting.js
// build scenes for background shifting
new ScrollScene({triggerElement: 'header', duration: jQuery('header').height() + win_height})
.setClassToggle(bg_el, 'middle') // add class toggle
.addTo(controller);

new ScrollScene({offset: jQuery('#pg-1574-5').offset().top - parseInt(jQuery('#pg-1574-5').css('margin-top')) - win_height, duration: parseInt(jQuery('#pg-1574-5').css('margin-top')) + jQuery('#pg-1574-5').height()})
.setClassToggle(bg_el, 'topright') // add class toggle
.addTo(controller);

new ScrollScene({offset: jQuery('#pg-1574-6').offset().top - win_height, duration: jQuery('#pg-1574-6').height() + win_height})
.setClassToggle(bg_el, 'topleft') // add class toggle
.addTo(controller);

## basic-story-template.php
<?php
/*
Template Name: Machines For Life
 */
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title><?php wp_title( '|', true, 'right' ); ?></title>
        <meta name="description" content="<?php the_excerpt();?>">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <style>
           /* custom styles go here */
        </style>
    </head>

    <body>
        <article>

        <?php while ( have_posts() ) : the_post(); ?>

            <header>
	        <h1 class="maintitle">
	            <?php the_title(); ?>
	        </h1>

	        <div class="credits">
	            <?php echo get_post_meta( get_the_ID(), 'credits', true );?>
	        </div>

	        <div class="excerpt">
	            <?php the_excerpt(); ?>
	        </div>
            </header>

	    <?php the_content(); ?>

	<?php endwhile; // end of the loop. ?>

        </article>

        <!-- script libraries go here -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- custom script goes here -->
    </body>
<html>

## covervid-snippets.css
.covervid-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

## image-tweens.js
// Create image tweens
var tween1 = TweenMax.to("#panel-1574-0-0-3 img", 1.0, {opacity: 0});
var tween2 = TweenMax.to("#panel-1574-0-0-2 img", 1.0, {opacity: 0});
var tween3 = TweenMax.to("#panel-1574-0-0-1 img", 1.0, {opacity: 0});

// Add Tweens to scene 1
var scene = new ScrollScene({offset: s1_offset + s1_interval })
	.setTween(tween1)
	.addTo(controller);

// build scene
var scene = new ScrollScene({offset: s1_offset + (s1_interval * 2) })
	.setTween(tween2)
	.addTo(controller);

// build scene
var scene = new ScrollScene({offset: s1_offset + (s1_interval * 3) })
	.setTween(tween3)
	.addTo(controller);

## pinning.js
// Add pinning of slideshow
var scene = new ScrollScene({offset: s1_offset, duration: s1_duration })
	.setPin("#slideshow1")
	.addTo(controller);

## sample-layout.html
<div class="panel-grid" id="pg-1574-0" >
 <div class="panel-grid-cell" id="pgc-1574-0-0">
		<div class="panel widget widget_widget_sp_image panel-first-child" id="panel-1574-0-0-0"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-0v2.jpg" /></div>
		<div class="panel widget widget_widget_sp_image" id="panel-1574-0-0-1"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-1v2.jpg" /></div>
		<div class="panel widget widget_widget_sp_image" id="panel-1574-0-0-2"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-2v2.jpg" /></div>
		<div class="panel widget widget_widget_sp_image panel-last-child" id="panel-1574-0-0-3"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-4v2.jpg" /></div>
 </div>
 <div class="panel-grid-cell" id="pgc-1574-0-1" >
	<div class="panel widget widget_enhancedtextwidget panel-first-child panel-last-child" id="panel-1574-0-1-0">
	   <div class="textwidget widget-text">
		  <p>Daft Punk are standing on a helipad overlooking downtown Los Angeles as fireballs make their sequined suits glisten with hot heat. It's a few days before this year's Coachella, where the duo's shiny new duds will premiere by way of a Jumbotron trailer for their new album, Random Access Memories. But for now, only a very select few have laid eyes on the outfits—and everyone involved in today's photo shoot desperately wants to keep it that way.</p>
	   </div>
	</div>
 </div>
</div>
<div class="panel-grid" id="pg-1574-1" >
 <div class="panel-grid-cell" id="pgc-1574-1-0" >
	<div class="panel widget widget_enhancedtextwidget panel-first-child panel-last-child" id="panel-1574-1-0-0">
	   <div class="textwidget widget-text">
		  <p>ON THE EDGE OF THE SAN JACINTO MOUNTAINS in Rancho Mirage, California—somewhere between Frank Sinatra Dr. and a sunstruck Bentley dealership—is the Bing Crosby Estate, where Daft Punk are staying while in town for this year's Coachella. The house's name is not a misnomer: The famed crooner had it built in 1957, as he eased into his golden years. Now, anyone with a healthy bank account can enjoy the saltwater pool, valley-wide view, and old-school-celebrity aura—JFK and Marilyn Monroe supposedly had a fling here in the early 60s—for just $3,000 a night.</p>
	   </div>
	</div>
 </div>
 <div class="panel-grid-cell" id="pgc-1574-1-1" >
	<div class="panel widget widget_widget_sp_image panel-first-child panel-last-child" id="panel-1574-1-1-0"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s3-0v2.jpg" /></div>
 </div>
</div>
<div class="panel-grid" id="pg-1574-2" >
 <div class="panel-grid-cell" id="pgc-1574-2-0" >
	<div class="binary-text-area panel widget widget_enhancedtextwidget panel-first-child" id="panel-1574-2-0-0">
	   <div class="textwidget widget-text">
		  <p>'Looking at robots is not like looking at an idol. It's not a human being, so it's more like a mirror - the energy people send to the stage bounces back and everybody has a good time together rather than focusing on us.'<br />
			 -Guy-Manuel de Homem-Christo
		  </p>
	   </div>
	</div>
	<div class="panel widget widget_widget_sp_image panel-last-child" id="panel-1574-2-0-1"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/pq1v2.jpg" /></div>
 </div>
</div>

## sliding.js
// Create TimeLine
var slideinright = new TimelineMax()
	.add(TweenMax.to('#pg-1574-2', 1, {left: '-100%'}));

// add scene
new ScrollScene({
	offset: $('#pg-1574-3').offset().top - (win_height / 2),
	duration:win_height * 1.5,
})
	.setTween(slideinright)
	.addTo(controller);

## wrapper.js
// add wrapper for slides 1, 2 and 3 so they can share same background using class .wrap1
$('#pg-1574-1,#pg-1574-2,#pg-1574-3').wrapAll('<div class="wrap1"></div>');
	// build scenes for background shifting
	new ScrollScene({triggerElement: 'header', duration: jQuery('header').height() + win_height})
	.setClassToggle(bg_el, 'middle') // add class toggle
	.addTo(controller);

	new ScrollScene({offset: jQuery('#pg-1574-5').offset().top - parseInt(jQuery('#pg-1574-5').css('margin-top')) - win_height, duration: parseInt(jQuery('#pg-1574-5').css('margin-top')) + jQuery('#pg-1574-5').height()})
	.setClassToggle(bg_el, 'topright') // add class toggle
	.addTo(controller);

	new ScrollScene({offset: jQuery('#pg-1574-6').offset().top - win_height, duration: jQuery('#pg-1574-6').height() + win_height})
	.setClassToggle(bg_el, 'topleft') // add class toggle
	.addTo(controller);
	<?php
	/*
	Template Name: Machines For Life
	*/
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title><?php wp_title( '\|', true, 'right' ); ?></title>
	<meta name="description" content="<?php the_excerpt();?>">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<style>
	/* custom styles go here */
	</style>
	</head>

	<body>
	<article>

	<?php while ( have_posts() ) : the_post(); ?>

	<header>
	<h1 class="maintitle">
	<?php the_title(); ?>
	</h1>

	<div class="credits">
	<?php echo get_post_meta( get_the_ID(), 'credits', true );?>
	</div>

	<div class="excerpt">
	<?php the_excerpt(); ?>
	</div>
	</header>

	<?php the_content(); ?>

	<?php endwhile; // end of the loop. ?>

	</article>

	<!-- script libraries go here -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- custom script goes here -->
	</body>
	<html>
	.covervid-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	}
	// Create image tweens
	var tween1 = TweenMax.to("#panel-1574-0-0-3 img", 1.0, {opacity: 0});
	var tween2 = TweenMax.to("#panel-1574-0-0-2 img", 1.0, {opacity: 0});
	var tween3 = TweenMax.to("#panel-1574-0-0-1 img", 1.0, {opacity: 0});

	// Add Tweens to scene 1
	var scene = new ScrollScene({offset: s1_offset + s1_interval })
	.setTween(tween1)
	.addTo(controller);

	// build scene
	var scene = new ScrollScene({offset: s1_offset + (s1_interval * 2) })
	.setTween(tween2)
	.addTo(controller);

	// build scene
	var scene = new ScrollScene({offset: s1_offset + (s1_interval * 3) })
	.setTween(tween3)
	.addTo(controller);
	// Add pinning of slideshow
	var scene = new ScrollScene({offset: s1_offset, duration: s1_duration })
	.setPin("#slideshow1")
	.addTo(controller);
	<div class="panel-grid" id="pg-1574-0" >
	<div class="panel-grid-cell" id="pgc-1574-0-0">
	<div class="panel widget widget_widget_sp_image panel-first-child" id="panel-1574-0-0-0"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-0v2.jpg" /></div>
	<div class="panel widget widget_widget_sp_image" id="panel-1574-0-0-1"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-1v2.jpg" /></div>
	<div class="panel widget widget_widget_sp_image" id="panel-1574-0-0-2"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-2v2.jpg" /></div>
	<div class="panel widget widget_widget_sp_image panel-last-child" id="panel-1574-0-0-3"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s2-4v2.jpg" /></div>
	</div>
	<div class="panel-grid-cell" id="pgc-1574-0-1" >
	<div class="panel widget widget_enhancedtextwidget panel-first-child panel-last-child" id="panel-1574-0-1-0">
	<div class="textwidget widget-text">
	<p>Daft Punk are standing on a helipad overlooking downtown Los Angeles as fireballs make their sequined suits glisten with hot heat. It's a few days before this year's Coachella, where the duo's shiny new duds will premiere by way of a Jumbotron trailer for their new album, Random Access Memories. But for now, only a very select few have laid eyes on the outfits—and everyone involved in today's photo shoot desperately wants to keep it that way.</p>
	</div>
	</div>
	</div>
	</div>
	<div class="panel-grid" id="pg-1574-1" >
	<div class="panel-grid-cell" id="pgc-1574-1-0" >
	<div class="panel widget widget_enhancedtextwidget panel-first-child panel-last-child" id="panel-1574-1-0-0">
	<div class="textwidget widget-text">
	<p>ON THE EDGE OF THE SAN JACINTO MOUNTAINS in Rancho Mirage, California—somewhere between Frank Sinatra Dr. and a sunstruck Bentley dealership—is the Bing Crosby Estate, where Daft Punk are staying while in town for this year's Coachella. The house's name is not a misnomer: The famed crooner had it built in 1957, as he eased into his golden years. Now, anyone with a healthy bank account can enjoy the saltwater pool, valley-wide view, and old-school-celebrity aura—JFK and Marilyn Monroe supposedly had a fling here in the early 60s—for just $3,000 a night.</p>
	</div>
	</div>
	</div>
	<div class="panel-grid-cell" id="pgc-1574-1-1" >
	<div class="panel widget widget_widget_sp_image panel-first-child panel-last-child" id="panel-1574-1-1-0"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/s3-0v2.jpg" /></div>
	</div>
	</div>
	<div class="panel-grid" id="pg-1574-2" >
	<div class="panel-grid-cell" id="pgc-1574-2-0" >
	<div class="binary-text-area panel widget widget_enhancedtextwidget panel-first-child" id="panel-1574-2-0-0">
	<div class="textwidget widget-text">
	<p>'Looking at robots is not like looking at an idol. It's not a human being, so it's more like a mirror - the energy people send to the stage bounces back and everybody has a good time together rather than focusing on us.'<br />
	-Guy-Manuel de Homem-Christo
	</p>
	</div>
	</div>
	<div class="panel widget widget_widget_sp_image panel-last-child" id="panel-1574-2-0-1"><img alt="" class="attachment-full" style="max-width: 100%;" src="assets/pq1v2.jpg" /></div>
	</div>
	</div>
	// Create TimeLine
	var slideinright = new TimelineMax()
	.add(TweenMax.to('#pg-1574-2', 1, {left: '-100%'}));

	// add scene
	new ScrollScene({
	offset: $('#pg-1574-3').offset().top - (win_height / 2),
	duration:win_height * 1.5,
	})
	.setTween(slideinright)
	.addTo(controller);
	// add wrapper for slides 1, 2 and 3 so they can share same background using class .wrap1
	$('#pg-1574-1,#pg-1574-2,#pg-1574-3').wrapAll('<div class="wrap1"></div>');