Ships Ahoy!

Developer
Pedro Tavares
Size
6,072 Kb
Views
12,144
  1. Ships Ahoy! Previews
  2. Ships Ahoy! HTML Codes
  3. Ships Ahoy! CSS Codes
  4. Ships Ahoy! JS Codes

How do I make an ships ahoy!?

Playing with SVG patterns and GSAP tools to create a semi-random responsive look.. What is a ships ahoy!? How do you make a ships ahoy!? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.

Ships Ahoy! Previews
IQ Test

Ships Ahoy! - Script Codes HTML Codes

<!DOCTYPE html>
<html class="dipscom">
<head> <meta charset="UTF-8"> <title>Ships Ahoy!</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Shame this is not very mobile performant
-->
<svg xmlns="http://www.w3.org/2000/svg">	<defs>	<!--	Did you know you can nest SVG inside SVGs?	-->	<svg id="boat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <defs> <style> .cls-1, .cls-4 { fill: #8c6239; } .cls-1, .cls-2, .cls-4, .cls-5 { stroke: #42210b; stroke-linecap: round; stroke-linejoin: round; } .cls-1 {
<!-- stroke-width: 2px; --> } .cls-2 { fill: #4d4d4d; } .cls-3 { fill: #1a1a1a; } .cls-5 { fill: #e6e6e6; } </style> </defs> <title>ship</title> <path id="body" class="cls-1" d="M86.7,55c-9.2.7,2.6,43.2-45.2,43.2-25.8,0-29.5-27-30-39.2C11.4,56.1,5,55.6,5,55.6L3.7,38.7l-2-4.6H6.5l4,4.6H22.9s5.4,12.2,9.3,12.7,2.8,7,2.8,7H70.3s1-9,5.4-9c16.9,0,22.3-2.9,22.3-2.9S102.7,53.7,86.7,55Z"/> <circle class="cls-2" cx="34.4" cy="71.7" r="4.5"/> <circle class="cls-2" cx="49.3" cy="71.7" r="4.5"/> <circle class="cls-2" cx="64.2" cy="71.7" r="4.5"/> <polygon class="cls-2" points="25.8 52.5 14 52.5 16.5 42.4 20.5 42.4 25.8 52.5"/> <path id="flag" class="cls-3" d="M50.3,1.1L50.1,13.5S43.8,6.7,27.1,6.7C36.6,0.5,50.3,1.1,50.3,1.1Z"/> <polygon id="mast" class="cls-4" points="50.2 1 52.2 1 56.1 58.3 49.2 58.3 50.2 1"/> <polygon class="cls-2" points="11.6 52.5 7.6 52.5 7.1 42.4 14 42.4 11.6 52.5"/> <path id="sail" class="cls-5" d="M71.7,48.8c-1.2,1.6-6-.8-16.4,2S34.7,62.4,26.9,62.4c3.6-10.2,10.2-36.6-2.1-49C46.2,8.3,64.6,6.6,67.7,8.1,90.2,18.6,74,45.7,71.7,48.8Z"/>
</svg>	<!--	A gradient to be used	-->	<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">	<stop offset="0%" style="stop-color:rgb(0,160,230);stop-opacity:1" />	<stop offset="100%" style="stop-color:rgb(0,140,230);stop-opacity:1" />	</linearGradient>	<!--	The path used to create the wave pattern and wave mask	-->	<symbol id="wave"> <path class="waveBody" d="M0,60H100l0.2-38C78.6,43.6,60.7,35.8,50.5,18.3,39.9,35.7,21.6,43.6,0,22V60Z"/> <path class="waveSurface" d="M0,22c21.6,21.6,39.9,13.7,50.5-3.7C60.7,35.8,78.6,43.6,100.2,22"/>	</symbol>	<!--	Bellow are the three patterns used in this pen We have to create three of the because we want	to create an infinite loop	-->	<pattern id="patternLeft" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">	<use x="0" y="0" xlink:href="#wave" />	</pattern>	<!--	Move the second pattern down by 50 units, because the total height is 100	-->	<pattern id="patternRight" x="0" y="50" width="100" height="100" patternUnits="userSpaceOnUse">	<use x="0" y="0" xlink:href="#wave" />	</pattern>	<!--	This third pattern will be placed in front of the ship and does not repeat vertically	-->	<pattern id="patternMask" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">	<use x="0" y="0" xlink:href="#wave" />	</pattern>	</defs>	<title>Ships Ahoy!</title>	<!--	The two animated patterns	-->	<rect class="pattern1" x="0" y="0" width="100%" height="100%" fill="url(#patternLeft)" />	<rect class="pattern2" x="0" y="0" width="100%" height="100%" fill="url(#patternRight)" />	<!--	The ship itself. Note the several <g> tags. They are necessary to create the various movements of the ship and sea	-->	<g id="shipMasterPosition" transform="translate(0, 0)">	<g id="shipWavePosition" transform="translate(0, 0)">	<g id="shipTranslation" x="0" y="0">	<g id="shipDirection" transform="scale(1, 1)" >	<use id="ship" x="0" y="0" width="100" height="100" xlink:href="#boat" />	</g>	</g>	</g>	</g>	<!--	The wave that is in front of the ship, makes it look nice	-->	<g id="shipMask" transform="translate(0, 0)">	<rect class="pattern3" x="0" y="0" width="100%" height="100" fill="url(#patternMask)" />	</g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ships Ahoy! - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
svg { /*	The root svg has to be absolutely positioned	so we can have a pattern covering all available area */ position: absolute; width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; background: #008ce6;
}
.waveSurface { stroke: #00a0e6; stroke-miterlimit: 3; stroke-width: 8px; fill: none;
}
.waveBody { fill: url(#grad1); opacity: 0.96;
}
#boat { fill: #643232; stroke: #461e1e; background: grey; overflow: visible; stroke-width: 2.4px;
}
#ship { visibility: hidden;
}

Ships Ahoy! - Script Codes JS Codes

var shipGroup = document.getElementById("shipMasterPosition"),	shipX = 0,	shipDirection,	shipSpeed = 1.7,	w = window.innerWidth,	h = window.innerHeight,	factor = 50, // The height of the tile	rows = Math.floor(h / factor),	row,	end = w + factor,	startedLeft = 0,	startedRight = 0,	shouldLoop = false;
// Make a timeline that runs once, at the end of each cycle, it checks to see if it should loop again
var main_tl = new TimelineLite({paused:true, onUpdate:moveShip, onComplete:repeat});
main_tl.add(waveMoveVert(patternLeft, 2), 0);
main_tl.add(waveMoveHorz(patternLeft, 2, "+"), 0);
main_tl.add(waveMoveVert(patternRight, 2), 0);
main_tl.add(waveMoveHorz(patternRight, 2, "-"), 0);
main_tl.add(waveMoveVert(patternMask, 2), 0);
// A secondary motion
var waveMask_tl = new TimelineLite({paused:true});
waveMask_tl.add(waveMoveHorz(patternMask, 2, "-"));
function boatRock(dur) {	this.dur = dur || 1;	var ease = Power1.easeInOut;	TweenMax.fromTo(shipTranslation, this.dur*2, {y:0, x:"-=30"}, {y:"-=10", x:"+=30", ease:ease, repeat:-1, yoyo:true});	TweenMax.fromTo(ship, this.dur, {rotation:"-4", transformOrigin:"50% 100%"}, {rotation:"4", ease:ease, repeat:-1, yoyo:true});
}
function moveShip() {	TweenMax.set(shipWavePosition, {attr:{transform:"translate(" + shipX + ", " + "0)"}});
// TO DO: Check if mobile, because the preceived speed of the boat is different when viewing in a phone
if(shipDirection === "+" ? shipX += shipSpeed : shipX -= shipSpeed);
}
// Because the pattern sits inside a <defs> tag, you must animate it using the attrPlugin. You also have to make sure the attribute to be tweened exist in the tag otherwise GSAP cannot affect it.
function waveMoveVert(el, dur) {	return TweenMax.to(el, dur * 0.5, {attr:{y:"-=10"}, ease:Power1.easeInOut, repeat:1, yoyo:true});
}
function waveMoveHorz(el, dur, direction) {	return TweenMax.to(el, dur, {attr:{x:direction+"=100"}, ease:Linear.easeNone});
}
function positionShip() {	// Pick a random vertical position	row = getRandomRow(1, (rows - 2));	// Pick a random horizontal position	var shipXStart = getRandomInterger(0,1) * w;	// Make sure the ship does not start from the same side too many times	if(startedLeft < 3) {	if(startedRight < 3) {	if(shipXStart === 0) {	positionShipHorz("left");	} else {	positionShipHorz("right");	}	} else {	shipXStart = 0;	positionShipHorz("left");	startedRight = 0;	}	} else {	shipXStart = w;	positionShipHorz("right");	startedLeft = 0;	}	// Flip the direction in which the ship moves	if(shipX < w ? shipDirection = "+" : shipDirection = "-");	var shipY = row * factor;	var waveY = shipY + factor; // offset the wave by one row	// Check which direction to move	var direction = getDirection();	// Position the ship and the ship mask at the same level	TweenMax.set(shipMasterPosition, {attr:{transform:"translate(0, " + shipY + ")"}})	TweenMax.set(shipMask, {attr:{transform:"translate(0, " + waveY + ")"}})
}
function positionShipHorz (side) {	if(side === "left" ) {	shipX = -(factor * 2);	TweenMax.set("#shipDirection", {attr:{transform:"scale(1, 1)"}});	startedLeft++;	} else {	shipX = w + (factor * 2);	TweenMax.set("#shipDirection", {attr:{transform:"scale(-1, 1)"}});	startedRight++;	}	// console.log("positionShipHorz:", shipX)
}
function getRandomRow(min,max) {	return getRandomInterger(min,max);
}
function getRandomInterger(min,max) {	return Math.floor(Math.random()*(max-min+1)+min);
}
function getDirection () {	if(row % 2 !== 0) {	return "+";	} else {	return "-";	}
}
function repeat() {	// Check to see if ship has left the screen	if( shipX > end || shipX < -(factor * 2) ) {	// console.log("End of the world", "W:", w, "ShipX:", shipX, "End:", end, "Factor:", (factor*2));	// Should we stop the secondary motion?	// Reposition the ship	positionShip();	// Start it all again	start();	} else {	// console.log("Not the end yet")	start();	}
}
function start() {	// Adjust the wave mask direction accordingly	waveMaskDirection();	// play the animations	main_tl.play(0);
}
function waveMaskDirection() {	if(getDirection() === "-") {	return waveMask_tl.play(0);	} else {	return waveMask_tl.totalProgress(1).reverse();	}
}
var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
};
function onResize() {	// Hide the ship as we recalculate things	TweenMax.set([ship,shipMask], {autoAlpha:0});	w = window.innerWidth;	h = window.innerHeight;	end = w + factor;	rows = Math.floor(h / factor);	positionShip();	// Show the ship after we recalculate things	TweenMax.set([ship,shipMask], {autoAlpha:1});
}
function init() {	// Is this a mobile device?	if( isMobile.any() ) {	// Yes	// Update the speed of the ship	shipSpeed = 5;	// Listen for resize changes so we can recaltulate the inner.width and inner height in mobile devices	window.addEventListener("resize", onResize)	}	boatRock();	positionShip(); start();	TweenMax.set(ship, {autoAlpha:1});
} // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window, stylesheets, images, links, and other media assets are loaded window.onload = function() { // All ready, start!	init(); }; });
Ships Ahoy! - Script Codes
Ships Ahoy! - Script Codes
Home Page Home
Developer Pedro Tavares
Username dipscom
Uploaded December 01, 2022
Rating 4.5
Size 6,072 Kb
Views 12,144
Do you need developer help for Ships Ahoy!?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pedro Tavares (dipscom) Script Codes
Name
Shooting Hoops
Falling tomatoes
SVGText - Pattern Fill
Responsive Animated Moving Things
GSAP - Fun with Cycle and Bezier
MOMO BROS
Using Functions to Build a timeline - Broken
Mask Within Mask
GSAP - Fun with Cycle and Bezier 2
Catch Me If You Can
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!