Generative Gradient Layers
How do I make an generative gradient layers?
Originally made by Guus Baggermans http://www.guusbaggermans.nl/generative-gradient-layers.htmThis version is added a feature for preventing to scroll both axises simultaneously. What is a generative gradient layers? How do you make a generative gradient layers? This script and codes were developed by Seoh Char on 14 December 2022, Wednesday.
Generative Gradient Layers - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Generative Gradient Layers</title>
</head>
<body> <script src='https://bgrins.github.io/TinyColor/tinycolor.js'></script>
<script src='https://builds.framerjs.com/1b13e7f/framer.js'></script> <script src="js/index.js"></script>
</body>
</html>
Generative Gradient Layers - Script Codes JS Codes
(function() { var bgLayer, button, colors, container, curve, epsillon, itemHeight, j, mapColors, numRows, reDrawColors, results, rows, screenHeight, screenWidth; Framer.Device = new Framer.DeviceView({ orientationName: "landscape", deviceType: "iphone-6-spacegray" }); Framer.Device.setupContext(); bgLayer = new BackgroundLayer({ backgroundColor: "black" }); screenWidth = Framer.Device.screen.width; screenHeight = Framer.Device.screen.height; itemHeight = 120; numRows = 16; epsillon = .1; container = new Layer({ x: 0, y: 0, width: screenWidth, height: itemHeight * (numRows + 1), backgroundColor: "black" }); container.draggable.enabled = true; container.draggable.speedX = 0; container.on(Events.DragMove, function() { var velocity; velocity = this.draggable.calculateVelocity(); if (epsillon < Math.abs(velocity.y)) { return this.subLayers.forEach(function(layer) { return layer.draggable.enabled = false; }); } }); container.on(Events.DragEnd, function(event, container) { var calcHeight, constant1, constant2, curve, distanceY, velocity; this.subLayers.forEach(function(layer) { return layer.draggable.enabled = true; }); calcHeight = itemHeight * container.subLayers.length; if (calcHeight > screenHeight) { if (container.y < 0 && container.y > screenHeight - calcHeight) { constant1 = 650; constant2 = 10; velocity = this.draggable.calculateVelocity(); curve = "bezier-curve(0,0.5,0.5,1)"; distanceY = velocity.y * constant1; if (velocity.y < 0) { if (container.y + distanceY < screenHeight - calcHeight) { distanceY = screenHeight - calcHeight; } } else { if (container.y + distanceY > 0) { distanceY = 0; } } return container.animate({ properties: { y: distanceY }, curve: curve }); } else if (container.y < screenHeight - calcHeight) { return container.animate({ properties: { y: screenHeight - calcHeight }, curve: "spring(200,20,0)" }); } else if (container.y > 0) { return container.animate({ properties: { y: 0 }, curve: "spring(200,20,0)" }); } } else { return container.animate({ properties: { y: 0 }, curve: "spring(200,20,0)" }); } }); rows = []; (function() { results = []; for (var j = 0; 0 <= numRows ? j <= numRows : j >= numRows; 0 <= numRows ? j++ : j--){ results.push(j); } return results; }).apply(this).map(function(rowNumber) { var row; row = new Layer({ x: 0, y: 0 + rowNumber * itemHeight, width: screenWidth, height: itemHeight + 2, superLayer: container }); row.html = "Row " + rowNumber; row.style = { "text-align": "center", "font-size": "32px", "color": "#FFF", "padding-top": itemHeight / 2 - 10 + "px" }; row.draggable.enabled = true; row.draggable.speedY = 0; row.on(Events.DragMove, function(event, row) { var velocity; velocity = this.draggable.calculateVelocity(); if (epsillon < Math.abs(velocity.x)) { container.draggable.enabled = false; } return row.opacity = Utils.modulate(Math.abs(this.x), [0, screenWidth / 2], [1, 0]); }); return row.on(Events.DragEnd, function(event, row) { var i, j, len, ref, results, sibling; container.draggable.enabled = true; if (row.x < -row.width / 2 || row.x > screenWidth / 2) { container.removeSubLayer(row); row.destroy(); container.animate({ properties: { height: (container.subLayers.length + 1) * itemHeight }, delay: 1 }); ref = container.subLayers; results = []; for (i = j = 0, len = ref.length; j < len; i = ++j) { sibling = ref[i]; sibling.animateStop(); results.push(sibling.animate({ properties: { y: i * itemHeight }, curve: "spring(200,20,0)" })); } return results; } else { return row.animate({ properties: { x: 0, opacity: 1 }, curve: "spring(600,50,0)" }); } }); }); button = new Layer({ x: screenWidth + 120, y: screenHeight - 120, width: 100, height: 100, backgroundColor: "rgba(255,255,255,0.5)" }); button.style = { borderRadius: "100%" }; button.on(Events.Click, function() { button.scale = 0.7; button.animate({ properties: { scale: 1.0 }, curve: "spring(800,20,0)" }); return reDrawColors(); }); colors = []; mapColors = function(c1, c2) { var amount, colorCount, index, k, ref, results1; colorCount = container.subLayers.length; colors[0] = tinycolor(c1); colors[colorCount] = tinycolor(c2); results1 = []; for (index = k = 1, ref = colorCount; 1 <= ref ? k <= ref : k >= ref; index = 1 <= ref ? ++k : --k) { results1.push(colors[index] = tinycolor.mix(colors[0], colors[colorCount], amount = 100 * (index * (1 / colorCount)))); } return results1; }; mapColors(Utils.randomColor(1), Utils.randomColor(1)); reDrawColors = function() { var i, k, len, ref, results1, sibling; mapColors(Utils.randomColor(1), Utils.randomColor(1)); ref = container.subLayers; results1 = []; for (i = k = 0, len = ref.length; k < len; i = ++k) { sibling = ref[i]; results1.push(sibling.backgroundColor = colors[i].toHexString()); } return results1; }; reDrawColors(); container.opacity = 0; container.animate({ properties: { opacity: 1 } }, curve = "bezier-curve(0,0.5,0.5,1)"); button.x = screenWidth + button.width; button.animate({ properties: { x: screenWidth - 120 }, curve: "spring(600,100,0)", delay: 0.5 });
}).call(this);
Developer | Seoh Char |
Username | seoh |
Uploaded | December 14, 2022 |
Rating | 3 |
Size | 5,192 Kb |
Views | 16,192 |
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!
Name | Size |
SubLayer event bubbling | 1,913 Kb |
Stopwatch using react | 4,215 Kb |
Video Capture | 2,691 Kb |
JSON string to Form string | 2,526 Kb |
Trick of Switching BackgroundColor | 1,755 Kb |
Constant-time Queue using Stack | 2,175 Kb |
A Pen by Seoh Char | 5,325 Kb |
Switch states with different options | 1,870 Kb |
Animation loop chaining | 2,325 Kb |
Coverflow | 3,516 Kb |
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!
Name | Username | Size |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Pink expansion tunnel | Vez | 1,738 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!