Skip to content

Instantly share code, notes, and snippets.

@joviczarko
Last active September 10, 2016 15:22
Show Gist options
  • Save joviczarko/593ae36019e6d8de02e22491f8bcd4c1 to your computer and use it in GitHub Desktop.
Save joviczarko/593ae36019e6d8de02e22491f8bcd4c1 to your computer and use it in GitHub Desktop.
Full screen splash screen
(function($) {
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
//Jumbotron scroll button click (there is also hide function bellow to hide it after scroll)
var height_jumbotron_scroll = $(window).height()/2+100;
$('a.see-more-button').click(function( event ) {
event.preventDefault();
$('html, body').animate({scrollTop: height_jumbotron_scroll}, 800);
});
})(jQuery);
(function($) {
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vph = $(window).height() +1; //+1 just in case
$('.homepage-jumbotron').css({'min-height': vph + 'px'});
}
})(jQuery);
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div class="homepage-jumbotron" style="background-image: url('<?php echo $image[0]; ?>')">
<div class="jumbotron-content-wrapper">
<h1>QR & barcode revolution</h1>
<p class="big hidden-xs hidden-sm">We revolutionized the tech world by building small and simple<br/>communities around QR and barcodes.</p>
<a class="see-more-button" href=""><img src="<?php echo get_template_directory_uri() . '/assets/img/scroll-down.svg'; ?>" alt=""></a>
</div>
</div>
<?php endif; ?>
// Jumbotron
html, body, .homepage-jumbotron, .jumbotron-content-wrapper {
width:100%;
height:100%;
}
.homepage-jumbotron {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: table;
width: 100%;
}
.jumbotron-content-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
color: white;
padding: 0 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment