Snap.svg Mask faces

Developer
B.
Size
3,545 Kb
Views
26,312
  1. Snap.svg Mask faces Previews
  2. Snap.svg Mask faces HTML Codes
  3. Snap.svg Mask faces CSS Codes
  4. Snap.svg Mask faces JS Codes

How do I make an snap.svg mask faces?

What is a snap.svg mask faces? How do you make a snap.svg mask faces? This script and codes were developed by B. on 21 December 2022, Wednesday.

Snap.svg Mask faces Previews
IQ Test

Snap.svg Mask faces - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Snap.svg Mask faces</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ svg { position: fixed; will-change: all;
}
svg image { will-change: all;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Snap.svg Mask faces - Script Codes CSS Codes

svg { position: fixed; will-change: all;
}
svg image { will-change: all;
}

Snap.svg Mask faces - Script Codes JS Codes

;(function(){ //"use strict"; var root = window || this; // init Snap var s = Snap(1000, 1000); // snap.svg with requestAnimationFrame because of fps http://www.newicon.net/svg-animation-snapsvg/ if (!root.requestAnimFrame) { root.requestAnimFrame = (function(){ return root.requestAnimationFrame || root.webkitRequestAnimationFrame || root.mozRequestAnimationFrame || function(callback) { root.setTimeout(callback, 1000 / 60); }; })(); } // ez anim loop var animate = { frame: 0, updateFrame: 0, imageArray: [ 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-1.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-2.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-3.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-4.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-5.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-1.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-2.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-3.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-4.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-5.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-1.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-2.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-3.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/dev-4.jpg'], loop: function( timestamp ){ animate.update(); animate.render(); root.requestAnimFrame( animate.loop ); }, init: function(){ // do any set up here, grab up selections, etc // Store all images in array // Define all polygons to snap var polygon1 = s.polygon(0, 301.8, 384.46, 0, 445.53, 402.87, 0, 301.8); var polygon2 = s.polygon(445.53, 402.87, 384.9, 0, 533.36, 43.51, 445.53, 402.87); var polygon3 = s.polygon(445.53, 402.87, 533.36, 43.51, 690.96, 347.66, 445.53, 402.87); var polygon4 = s.polygon(690.96, 347.66, 533.36, 43.51, 757.71, 12.89, 690.96, 347.66); var polygon5 = s.polygon(690.96, 347.66, 757.71, 12.89, 986.58, 373.76, 690.96, 347.66); var polygon6 = s.polygon(928.36, 570, 690.96, 347.66, 986.58, 373.76, 928.36, 570); var polygon7 = s.polygon(636.75, 950.95, 690.96, 347.66, 928.36, 570, 636.75, 950.95); var polygon8 = s.polygon(502.95, 696.46, 690.96, 347.66, 636.75, 950.95, 502.95, 696.46); var polygon9 = s.polygon(445.53, 402.87, 690.96, 347.66, 502.95, 696.46, 445.53, 402.87); var polygon10 = s.polygon(294.46, 713.36, 445.53, 402.87, 502.95, 696.46, 294.46, 713.36); var polygon11 = s.polygon(294.46, 713.36, 502.95, 696.46, 345.51, 918.6, 294.46, 713.36); var polygon12 = s.polygon(345.51, 918.6, 502.95, 696.46, 636.75, 950.95, 345.51, 918.6); var polygon13 = s.polygon(112.43, 539.38, 445.53, 402.87, 294.46, 713.36, 112.43, 539.38); var polygon14 = s.polygon(0, 301.8, 445.53, 402.87, 112.43, 539.38, 0, 301.8); // Select all polygons var allPolygons = s.selectAll("polygon"); allPolygons.forEach(function(el) { // adds attribute of fill: white - enables masking el.attr({ fill: 'white', }); }); // Get all images from array animate.imageArray.forEach(function (el, i) { // Define each img as image via snap var img = s.image(el, 0, -50, 1000, 1000); // adds attributte and polygon mask with index img.attr({ width:'100%', height:'100%', mask: allPolygons[i], }); //console.log(img); }); // bind a resize helper just cuz // $(window).resize(function() { // this.resize(); // }.bind(this)); // then request our first animation loop root.requestAnimFrame( animate.loop ); }, update: function(){ // you can calculate stuff here // track the frame ++animate.frame; }, render: function(){ //Per frame if(animate.frame % 6 == 0 || animate.frame % 10 == 0){ animate.updateRefs(); } }, randomImages: function() { var images = s.selectAll("image"), shuffled = animate.shuffleArray(images), sliced, total = 5; return shuffled.splice(0, animate.randomNumber(1, total)); }, updateRefs: function(){ //animate.imageArray[1]; var slicedArray = animate.randomImages(); slicedArray.forEach(function (el, i) { //console.log(el.node.attributes.href.nodeValue); el.node.attributes.href.nodeValue = animate.imageArray[animate.randomNumber(0, animate.imageArray.length-1)]; }); }, shuffleArray: function(input) { for (var i = input.length-1; i >=0; i--) { var randomIndex = Math.floor(Math.random()*(i+1)); var itemAtIndex = input[randomIndex]; input[randomIndex] = input[i]; input[i] = itemAtIndex; } return input; }, randomNumber: function(min, max) { if (max == null) { max = min; min = 0; } return min + Math.floor(Math.random() * (max - min + 1)); } }; animate.resize = function(){ //console.log('resizing!'); // this is where you do fancypants stuff based on window widths etc if you need it }; // initialise the loop animate.init();
}).call(this);
Snap.svg Mask faces - Script Codes
Snap.svg Mask faces - Script Codes
Home Page Home
Developer B.
Username wearebold
Uploaded December 21, 2022
Rating 3
Size 3,545 Kb
Views 26,312
Do you need developer help for Snap.svg Mask faces?

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!

B. (wearebold) Script Codes
Name
Alerts
Particle Earth Map
Center the Unknow
Simple CSS3 Button
Slide Content Module
Simple Slick Sync Slider
Simple Push Menu
Slick Slider with Vimeo API - froogaloop
Instagram Feed with Lightbox2
Simple Accordion
Create amazing web 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!