Full-page background made with JavaScript and Canvas: the animation follows movement on non-touch devices
Forked from Marco Guglielmelli's Pen Animated Background.
<!-- DNN STYLEHELPER OBJECT --> | |
<object id="dnnSH1" codetype="dotnetnuke/server" codebase="STYLEHELPER"> | |
<param name="AddCssFile" value="[S]css/bootstrap.css /> | |
<param name="AddMetaTags" value="viewport:width=device-width,initial-scale=1" /> | |
</object> | |
<!-- RESPONSIVE DNN DDR MENU NAVIGATION BAR -- USING BOOTSTRAP COLLAPSE --> | |
<div class="navbar navbar-inverse navbar-static-top"> | |
<div class="navbar-inner"> | |
<div class="container"> |
<?php | |
/** | |
* Starkers functions and definitions | |
* | |
* For more information on hooks, actions, and filters, see http://codex.wordpress.org/Plugin_API. | |
* | |
* @package WordPress | |
* @subpackage Starkers | |
* @since Starkers 4.0 | |
*/ |
.main-about-us { | |
position: relative; | |
width:100%; | |
height:auto; | |
min-height:31.25em; | |
color:#fff; | |
/*background:url(images/allaboutyou.jpg);*/ | |
/* background:url(images/about-image.jpg); | |
background-size:cover; | |
background-position:center center;*/ |
$element.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { | |
// your event handler | |
}); | |
$element.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { | |
// your event handler | |
}); |
<!DOCTYPE html> | |
<meta charset=utf-8> | |
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<meta name=apple-mobile-web-app-capable content=yes> | |
<meta name=apple-mobile-web-app-status-bar-style content=black> | |
<title>Test fullscreen</title> | |
<style> | |
html, body { | |
margin: 0; | |
padding: 0; |
-webkit-touch-callout:none; | |
-webkit-user-select:none; | |
-khtml-user-select:none; | |
-moz-user-select:none; | |
-ms-user-select:none; | |
user-select:none; | |
-webkit-tap-highlight-color:rgba(0,0,0,0); |
// CSS3 Animations Helper | |
(function($) { | |
var delay = 0; | |
$.fn.translate3d = function(translations, speed, easing, complete) { | |
var opt = $.speed(speed, easing, complete); | |
opt.easing = opt.easing || 'ease'; | |
translations = $.extend({x: 0, y: 0, z: 0}, translations); | |
return this.each(function() { | |
var $this = $(this); |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
<title>Google Maps Multiple Markers</title> | |
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script> | |
</head> | |
<body> | |
<div id="map" style="width: 500px; height: 400px;"></div> |
Full-page background made with JavaScript and Canvas: the animation follows movement on non-touch devices
Forked from Marco Guglielmelli's Pen Animated Background.
// "use strict"; | |
var $home = (function () { | |
var home = {}, // create the 'global local' -- within our primary home function -- app object {} | |
saywhit = "you wot mayte?", | |
isTouch = $('.touch').length, | |
isIE8andBelow = $('.lt-ie9').length, | |
hasCssAnimations = $('.csstransforms').length, | |
siteH, siteW, |