Backed by UXR

Developer
Rob Levin
Size
4,056 Kb
Views
6,072
  1. Backed by UXR Previews
  2. Backed by UXR HTML Codes
  3. Backed by UXR CSS Codes
  4. Backed by UXR JS Codes

How do I make an backed by uxr?

What is a backed by uxr? How do you make a backed by uxr? This script and codes were developed by Rob Levin on 13 December 2022, Tuesday.

Backed by UXR Previews
IQ Test

Backed by UXR - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Backed by UXR</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 282"> <defs> </defs> <title>ux-research</title> <g class="ux-test"> <path class="circle-stroke" d="M95.15,60.58a15.33,15.33,0,0,1-9.13,14,9.52,9.52,0,0,0-12.41,0A15.34,15.34,0,1,1,95.15,60.58Z"/> <circle class="circle" cx="79.81" cy="60.58" r="10.28"/> <path class="finger" d="M70.6,151V83.94c0-3.48.4-6.61,2.44-8.71a9.91,9.91,0,0,1,6.74-2.76,8.73,8.73,0,0,1,6.46,2.76s0,0,0,0c1.64,2.14,2.36,5.56,2.36,8.71V152"/> <path class="finger" d="M88.6,108.59a8.86,8.86,0,0,1,8.86-9h1.31a9.11,9.11,0,0,1,9.09,9.09V147"/> <path class="finger" d="M107.86,114.72c0-4.16,3.88-7.56,8.61-7.56h2.26c4.74,0,8.61,3.4,8.61,7.56v20.35"/> <path class="finger" d="M127.46,125c0-3.56,3.38-6.47,7.51-6.47h6.49"/> <g class="question"> <path class="question-mark" d="M77,114.6q0.16-8.94,2.75-14.65t9.78-12.41A78.54,78.54,0,0,0,99.64,76.77a29.1,29.1,0,0,0,4.19-8.45,36.83,36.83,0,0,0,1.32-10.52c0-7.7-2.57-13.76-6.67-18.17s-8.67-6.27-16.39-6.58-15.62,2.25-20,6.81a25.47,25.47,0,0,0-7.51,17.58H50.25a28.68,28.68,0,0,1,9.15-20.83c5.48-5.27,14.34-8.37,22.68-7.87,8.83,0.53,14.48,2.6,19.43,7.87s7.95,12.37,7.95,21.31a35.84,35.84,0,0,1-3.59,16.32q-3.59,7.14-14,16.56Q81.36,99,81.36,114.6H77Zm-1.92,28a4.37,4.37,0,0,1,1.28-3.15,4.17,4.17,0,0,1,3.11-1.32A4.5,4.5,0,0,1,84,142.61a4.17,4.17,0,0,1-1.32,3.11A4.37,4.37,0,0,1,79.52,147,4.36,4.36,0,0,1,75.13,142.61Z"/> </g> </g> <path class="glass" d="M226,199.08l-74.57-74.57A81.19,81.19,0,0,0,82.17,1,81.17,81.17,0,0,0,24.78,139.57a81.21,81.21,0,0,0,101.48,10.78L200.5,224.6a8.36,8.36,0,0,0,11.78,0L226,210.86A8.34,8.34,0,0,0,226,199.08ZM32.9,131.45A69.69,69.69,0,1,1,131.45,32.9,69.69,69.69,0,0,1,32.9,131.45Z"/> <g class="people"> <g class="person"> <circle class="i" cx="106.3" cy="196.13" r="18.15"/> <path class="i" d="M75.13,279V245.44a31.25,31.25,0,0,1,31.16-31.16h0a31.25,31.25,0,0,1,31.16,31.16V279H75.13Z"/> </g> <g class="person"> <circle class="i" cx="84.62" cy="189.63" r="15.63"/> <path class="i" d="M57.77,261V232.11a26.92,26.92,0,0,1,26.84-26.84h0a26.92,26.92,0,0,1,26.84,26.84V261H57.77Z"/> </g> </g> <path class="checkmark" d="M73.29,118.4L47.91,87.49l4.15-3.9,20.48,25.25L110.1,39.12l4.52,3Z"/>
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Backed by UXR - Script Codes CSS Codes

body { background-color: #f8f8f5; width: 100%; height: 100%;
}
.container { width: 100%; height: 100%;
}
.container svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 30px; width: 100%; height: 100%; max-width: 600px; max-height: 600px;
}
.circle-stroke, .finger, .glass { fill: none; stroke-miterlimit: 10;
}
.circle-stroke, .finger { stroke: #4a5c77;
}
.circle, .question-mark, .checkmark { fill: #006a39;
}
.circle, .question, .checkmark { opacity: 0.4;
}
.circle, .question, .person { mix-blend-mode: multiply;
}
.glass { stroke: #f2f2f2; stroke-width: 2px;
}
.person { opacity: 0.2;
}
.person { fill: #afafaf;
}

Backed by UXR - Script Codes JS Codes

//Thanks to GSAP Forum champ, OSUblake, for helping to clean this code up!
$.fn.preset = function(config) { TweenLite.set(this, config); return this;
};
// No need to keep typing this over and over
var center = "center center";
// Select and set your elements
var checkmark = $(".checkmark").preset({ opacity: 0, scale: 0, transformOrigin: center });
var circle = $(".circle").preset({ opacity: 0, scale: 0, transformOrigin: center });
var circleStroke = $(".circle-stroke").preset({ opacity: 0, x: 400, transformOrigin: center });
var finger = $(".finger").preset({ opacity: 0, x: -400, transformOrigin: center });
var glass = $(".glass").preset({ opacity: 0 });
var persons = $(".person").preset({ y: "+=500", transformOrigin: center });
var questionMark = $(".question-mark").preset({ y: -500, opacity: 0 });
var uxTest = $(".ux-test").preset({ svgOrigin: center });
var init = (function() { TweenLite.defaultEase = Linear.easeNone; // We can reuse this ease var ease = Power2.easeOut; var mainTL = new TimelineMax() .set(".container", { autoAlpha: 1 }) // Prevent FOUC .add(startQuestion(ease), "start-question") .add(targetReady(ease), "target-ready") .timeScale(1.5);
})();
function startQuestion(ease) { return new TimelineMax() .add("startQuestion") .staggerTo(persons, 1, { y: 0 }, 0.2) .to(questionMark, 0.7, { y: 0, opacity: 1 }, "startQuestion+=0.5") .to(circle, 0.2, { scale: 1, opacity: 0.4 }) .to(circle, 0.2, { scale: 1.5 }) .to(circle, 0.3, { scale: 1, ease: ease });
}
function targetReady(ease) { return new TimelineMax() .add("targetReady") .to(finger, 0.7, { opacity: 1, x: 0 }, "targetReady-=0.5") .to(circleStroke, 0.7, { opacity: 1, x: 0 }, "targetReady-=0.5") .to(finger, 0.1, { scale: 0.99 }, "targetReady+=0.7") .to(circleStroke, 0.1, { scale: 0.98, y: 1 }, "targetReady+=0.7") .to(finger, 0.1, { scale: 1 }, "targetReady+=0.85") .to(circleStroke, 0.1, { scale: 1, y: 0 }, "targetReady+=0.85") .to(glass, 2, { opacity: 1 }, "targetReady+=2") .to(circle, 1, { scale: 30, opacity: 0 }, "targetReady+=1") .set(circle, { scale: 0, opacity: 0 }, "targetReady+=2.2") .to(circle, 0.5, { scale: 1, opacity: 0.4, ease: ease }, "targetReady+=2.4") .to(uxTest, 2, { opacity: 0, scale: 0 }, "targetReady+=3") .to(checkmark, 2.5, { opacity: 0.4, scale: 1, ease: Back.easeOut.config(1.7) }, "targetReady+=4.5");
}
Backed by UXR - Script Codes
Backed by UXR - Script Codes
Home Page Home
Developer Rob Levin
Username roblevin
Uploaded December 13, 2022
Rating 3
Size 4,056 Kb
Views 6,072
Do you need developer help for Backed by UXR?

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!

Rob Levin (roblevin) Script Codes
Name
A Pen by Rob Levin
Simple Snap.svg Example
Horizontal Formatting
Zero Specificity vs No Specificity
Simple Snap.svg Drawing Example
Inline SVG Fill and Stroke
Linear Step Keyframe Animation
Centering
Collapsing Margins
SVG Frontend Masters Study Notes
Create amazing marketing copy 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!