Skip to content

Instantly share code, notes, and snippets.

@pommiegranit

pommiegranit/background-shifting.js

Last active August 29, 2015 14:08
Show Gist options
  • Save pommiegranit/8e646a14995957f0b7f1 to your computer and use it in GitHub Desktop.
Save pommiegranit/8e646a14995957f0b7f1 to your computer and use it in GitHub Desktop.
Download ZIP
Snippets for WordPress Story creation
Raw
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);
Raw
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>
Raw
covervid-snippets.css
.covervid-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
Raw
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);
Raw
pinning.js
// Add pinning of slideshow
var scene = new ScrollScene({offset: s1_offset, duration: s1_duration })
.setPin("#slideshow1")
.addTo(controller);
Raw
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>
Raw
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);
Raw
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>');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment