Of course, it’s not just for WordPress! But since I’m focusing on WordPress here, this is a cool effect you can apply to your WordPress Footer.
It will work on most themes with some modifications, mostly CSS and positioning.
You can copy the code from below and check out the jsfiddle demo.[vc_btn title=”jsfiddle demo” style=”custom” custom_background=”#4db2ec” custom_text=”#ffffff” shape=”square” align=”left” link=”url:https%3A%2F%2Fjsfiddle.net%2Fn2k8svey%2F2%2F||target:%20_blank|rel:nofollow”]water-effect.js is shown below and edit per your likings. There is one other script you need to include in your header. That is paper-full.min.js
<canvas id="water-spring"></canvas> <div class="footer"> <div class="toggle"><span>?</span></div> <p class="info">Footer</p> </div>
// The canvas
#water-spring {
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
background: #ffffff;
}
// The footer
@import url(http://fonts.googleapis.com/css?family=Karla:700,400);
body {
font-family: Karla, sans-serif;
font-size: 11px;
font-weight: 700;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: underline;
text-transform: uppercase;
}
.footer {
position: fixed;
bottom: 0;
right: 0;
padding: 0 20px 0 50px;
height: 50px;
line-height: 50px;
text-align: right;
z-index: 1;
overflow: hidden;
.info {
position: absolute;
top: -1000px;
color: #fff;
z-index: 1;
background: #000;
border-radius: 10px;
line-height: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
padding: 0 10px;
}
.toggle {
opacity: 1;
position: absolute;
top: 0;
right: 20px;
width: 20px;
height: 100%;
text-align: center;
cursor: pointer;
z-index: 2;
span {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
background: black;
color: white;
}
}
&:hover {
.info {
position: relative;
top: 0;
}
.toggle {
display: none;
}
}
}
(function($){
"use strict";
var mypaper;
$(document).ready(function() {
// initialize the paper animation
mypaper = new PaperWrap( $('#water-spring')[0] );
});
function PaperWrap( canvasElement ) {
var mypaper = new paper.PaperScope();
mypaper.setup( canvasElement );
var view = mypaper.view,
Point = mypaper.Point,
Path = mypaper.Path,
Group = mypaper.Group,
Tool = mypaper.Tool,
Item = mypaper.Item;
// Values for the spring
var values = {
friction: 80.9,
timeStep: 0.008,
mass: 0.4
};
values.invMass = 2 / values.mass;
var springs = [];
var pendulumForce = 1 - values.friction * values.timeStep;
var Spring = function(a, b, strength, restLength) {
this.a = a;
this.b = b;
this.restLength = restLength;
this.strength = strength;
this.mamb = values.invMass * values.invMass;
};
Spring.prototype.update = function() {
var delta = this.b.subtract( this.a );
var dist = delta.length;
var normDistStrength = (dist - this.restLength) / (dist * this.mamb) * this.strength;
delta = delta.multiply( normDistStrength * values.invMass * 0.25 );
if ( !this.a.fixed ) {
this.a.y += delta.y;
}
if ( !this.b.fixed ) {
this.b.y -= delta.y;
}
};
// Surface
var surface = new Path();
function createSurface() {
if( surface ) {
surface.remove();
}
surface = new Path();
// surface.fullySelected = true;
surface.fillColor = "rgba(0,191,243,1)";
var margin = -500;
var waterDepth = view.size.height;
surface.add( new Point(margin, view.size.height / 4) );
surface.add( new Point(view.size.width - margin, view.size.height / 4) );
var segmentAmount = 40;
var segmentWidth = Math.floor( surface.length / segmentAmount) ;
// Add Segments every 100 px
surface.flatten(segmentWidth);
// Save the point positions in the point objects
for( var i = 0; i < surface.segments.length; i++ ) {
var segment = surface.segments[i];
var point = segment.point;
point.anchor = new Point(point.x, point.y);
point.px = point.x;
point.py = point.y;
point.fixed = false;
if( i > 0 ) {
var spring = new Spring(segment.previous.point, point, 3.5, segmentWidth * 0.4);
springs.push(spring);
}
}
surface.firstSegment.point.fixed = true;
surface.lastSegment.point.fixed = true;
surface.add( new Point(view.size.width - margin, view.size.height / 2 + waterDepth) );
surface.lastSegment.point.fixed = true;
surface.add( new Point(margin, view.size.height / 2 + waterDepth) );
surface.lastSegment.point.fixed = true;
surface.closePath();
}
createSurface();
// Mouse Path
var mousePos = view.center.add( new Point(100, 50) );
var lastMousePos = view.center.add( new Point(-300, -100) );
var mousePath = new Path( lastMousePos, mousePos );
/*mousePath.strokeColor = '#ccc';*/
mousePath.fullySelected = false;
var mouseVector = new Point(0,0);
function resetLastMousePos() {
//setTimeout( resetLastMousePos, 200 );
}
resetLastMousePos();
var tool = new Tool();
tool.onMouseMove = function( event ) {
mousePos = event.point;
};
view.onFrame = function(event) {
// Adjust the Mouse Path
//lastMousePos = lastMousePos.add( mousePos.subtract( lastMousePos ).divide(12) );
mousePath.removeSegments();
mousePath.addSegments( [lastMousePos, mousePos] );
mouseVector = mousePos.subtract( lastMousePos );
lastMousePos = mousePos;
// disable the x coordinate on the vector
mouseVector.x = 0;
for( var i = 0; i < surface.segments.length; i++ ) {
if( i > 0 && i < surface.segments.length - 1 ) {
//surface.segments[i].selected = false;
} else {
//surface.segments[i].selected = true;
}
// surface.segments[i].selected = true;
}
//console.log( mousePath.angle );
var intersections = surface.getIntersections( mousePath );
if( intersections.length ) {
var hitLocation = intersections[0];
var segment = hitLocation.segment || hitLocation._segment1;
if( "undefined" === typeof segment ) {
segment = hitLocation.segment1;
}
if( !segment.point.fixed ) {
segment.point = segment.point.add( mouseVector.divide(1.01) );
}
var next = segment.next;
var previous = segment.previous;
if( next && !next.point.fixed) {
next.point = next.point.add( mouseVector.divide(6) );
}
if( previous && !previous.point.fixed) {
previous.point = previous.point.add( mouseVector.divide(6) );
}
}
var surfaceLength = surface.firstSegment.point.getDistance( surface.lastSegment.point );
var maxDist = view.size.height / 2;
for( i = 0; i < surface.segments.length; i++ ) {
var point = surface.segments[i].point;
var anchor = point.anchor;
if( !point.fixed ) {
var dy = (point.y - point.py) * pendulumForce;
point.py = point.y;
point.y = Math.min( point.anchor.y + maxDist, Math.max(point.anchor.y - maxDist, point.y + dy) );
// Uncomment this if you want to have a more jelly-like behaviour
// point.y += ( anchor.y - point.y) / 80;
}
}
for (var j = 0; j < springs.length; j++) {
springs[j].update();
}
surface.smooth();
};
view.onResize = function() {
createSurface();
};
var fit = this.fit = function() {
var $canvas = $( view.element );
var canvasWidth = $canvas.width();
var canvasHeight = $canvas.height();
$canvas
.attr("width", canvasWidth)
.attr("height", canvasHeight);
mypaper.view.viewSize = new mypaper.Size( canvasWidth, canvasHeight);
};
}
// Utilities
function fitPaperWraps() {
mypaper.fit();
}
$(window).resize(function() {
waitForFinalEvent(fitPaperWraps, 150, "resizing-papers");
});
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
})(jQuery);
