Here's a demo I found: http://clapat.ro/themes/wizzard/
I'm talking about that effect on the burger menu, once you entered it's area, it follows the cursor (and moves with it) for 20px or so.
Obviously found some code in their source:
HTML:
<div id="burger-wrapper" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0px 0px 0px;">
<div id="burger-circle" style="transform: matrix(1, 0, 0, 1, 0, 0);"></div>
<div id="menu-burger" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<span></span>
<span></span>
</div>
</div>
JS:
//Parallax Burger Menu
$('#burger-wrapper').mouseleave(function(e){
TweenMax.to(this, 0.3, {scale: 1});
TweenMax.to('#burger-circle, #menu-burger', 0.3,{scale:1, x: 0, y: 0});
});
$('#burger-wrapper').mouseenter(function(e){
TweenMax.to(this, 0.3, {transformOrigin: '0 0', scale: 1});
TweenMax.to('#burger-circle', 0.3,{scale: 1.3});
});
$('#burger-wrapper').mousemove(function(e){
callParallax(e);
});
function callParallax(e){
parallaxIt(e, '#burger-circle', 60);
parallaxIt(e, '#menu-burger', 40);
}
function parallaxIt(e, target, movement){
var $this = $('#burger-wrapper');
var boundingRect = $this[0].getBoundingClientRect();
var relX = e.pageX - boundingRect.left;
var relY = e.pageY - boundingRect.top;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
TweenMax.to(target, 0.3, {
x: (relX - boundingRect.width/2) / boundingRect.width * movement,
y: (relY - boundingRect.height/2 - scrollTop) / boundingRect.width * movement,
ease: Power2.easeOut
});
}
but I'm not really looking to steal it as it is.
I was wondering if this effect has a specific name?
Shame on me!
Found it after searching again.
If anyones wants to use it:
$('#container').mouseleave(function(e){
TweenMax.to(this, 0.3, {height: 150, width: 150});
TweenMax.to('.circle, .hamburger', 0.3,{scale:1, x: 0, y: 0});
});
$('#container').mouseenter(function(e){
TweenMax.to(this, 0.3, {height: 200, width: 200});
TweenMax.to('.circle', 0.3,{scale:1.3});
});
$('#container').mousemove(function(e){
callParallax(e);
});
function callParallax(e){
parallaxIt(e, '.circle', 80);
parallaxIt(e, '.hamburger', 40);
}
function parallaxIt(e, target, movement){
var $this = $('#container');
var relX = e.pageX - $this.offset().left;
var relY = e.pageY - $this.offset().top;
TweenMax.to(target, 0.3, {
x: (relX - $this.width()/2) / $this.width() * movement,
y: (relY - $this.height()/2) / $this.height() * movement,
ease: Power2.easeOut
});
}
#container{
display: flex;
position: relative;
height: 150px;
width: 150px;
justify-content: center;
align-items: center;
}
.circle{
position: absolute;
height: 50px;
width: 50px;
border: solid 2px gray;
border-radius: 100%;
}
.green{
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
<div class="circle"></div>
<div class="hamburger">=</div>
</div>
Related
The goal is to lock the movable direction of the div on the diagonal axis.
Related to the code below:
The Event #mousedown triggers a boolean to true which activates the move state.
The Event #mousedown calculates the offset
The Event #move calculates the new coordinates of the div based on the users mouse position
With e.clientX + (offsetX * Math.tan(angle * rad)) I can lock the movement to a negative gradient.
I tested it with different angels but it looks like the math is wrong.
What am I missing?
new Vue({
el: '#app',
data: {
x: 0,
y: 0,
coordinates: {
top: "10px",
left: "10px"
},
draggable: false,
offset: [0, 0],
},
methods: {
down(e) {
this.draggable = true;
this.offset = [
e.target.offsetLeft - e.clientX,
e.target.offsetTop - e.clientY
];
},
up(e) {
this.draggable = false;
},
move(e) {
if (this.draggable) {
this.coordinates.left = (e.clientX + this.offset[0]) + "px";
this.coordinates.top = (e.clientX + (this.offset[0] * Math.tan(45 * Math.PI / 180))) + "px";
}
}
}
})
#app {
position: relative;
width: 100vh;
height: 100vh;
}
.draggable{
cursor: pointer;
position: absolute;
border-radius: 100px;
background-color: lightcoral;
width: 30px;
height: 30px;
padding: 10px;
}
<script src="https://unpkg.com/vue"></script>
<div id="app" #mouseup="up" #mousemove="move">
<div class="draggable" :style="coordinates" #mousedown="down">
</div>
</div>
I am building a Swiper carousel (triggered by mouse scrolling) that has a frame on the top of it. this is the design
the red color is the frame that should cover the carousel. the middle hole is transparent
I have tried to make the red image as a mask-image so that I can control the swiper carousel by mouse scrolling, but the center hole goes white and the red color is transparent! and what I want is exactly the opposite I want the hole transplant and the outside the hole the red color.
Is there any way to add the image frame on the top of the swiper carousel and still can trigger and control the carousel positioned under the frame?
Code:
codePen
// https://swiperjs.com/
// ===================== -->
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed: 1200,
grabCursor: true,
mousewheel: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChangeTransitionStart: function() {
// Slide captions
var swiper = this;
setTimeout(function() {
var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
}, 500);
gsap.to($(".current-title"), 0.4, {
autoAlpha: 0,
y: -40,
ease: Power1.easeIn
});
gsap.to($(".current-subtitle"), 0.4, {
autoAlpha: 0,
y: -40,
delay: 0.15,
ease: Power1.easeIn
});
},
slideChangeTransitionEnd: function() {
// Slide captions
var swiper = this;
var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
gsap.from($(".current-title"), 0.4, {
autoAlpha: 0,
y: 40,
ease: Power1.easeOut
});
gsap.from($(".current-subtitle"), 0.4, {
autoAlpha: 0,
y: 40,
delay: 0.15,
ease: Power1.easeOut
});
}
}
});
// Slide captions
var currentTitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-title");
var currentSubtitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
body {
margin: 0;
}
/* Swiper */
.swiper-container {
position: absolute;
width: 100%;
height: 100vh;
mask-image: url(https://i.ibb.co/kmBv430/Frame.png);
mask-size: contain;
}
/* .above{
position:absolute;
left:25%;
background-color: #fff;
width: 200%;
height: 100vh;
z-index:2;
mask-image: radial-gradient(circle at center, transparent 49%, white 50%);
mask-size: contain;
mask-repeat: no-repeat;
} */
/* Swiper slides */
.swiper-slide {
position: relative;
z-index: 1;
}
.slide-1 {
background-color: #e67204;
}
.slide-2 {
background-color: #e67204;
}
.slide-3 {
background-color: #e67204;
}
.rounded-circle {
width: 400px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 30%;
left: 35%
}
.htu {
position: absolute;
color: #fff;
font-size: 50px;
top: 39%;
left: 10%;
z-index: 2;
}
/* Slide captions */
.slide-captions {
position: absolute;
top: 50%;
left: 75%;
color: #FFF;
z-index: 999;
transform: translateY(-50%);
}
.slide-captions .current-title {
position: absolute;
left: 60%;
margin: 0;
font-size: 48px;
}
.slide-captions .current-subtitle {
margin: 10px 0 0 0;
font-size: 28px;
}
/* Swiper arrows */
.swiper-pagination-bullet-active {
background-color: #fff;
}
/* Swiper pagination */
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 50px;
}
.swiper-button-prev,
.swiper-button-next {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
<script src="https://unpkg.com/swiper#6.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<h1 class="htu">HOW TO USE</h1>
<div class="above"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide slide-1" data-title="Slide One" data-subtitle="">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
<div class="swiper-slide slide-2" data-title="Slide Two" data-subtitle=" ">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
<div class="swiper-slide slide-3" data-title="Slide Three" data-subtitle=" ">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
</div>
</div>
<!-- Slide captions -->
<div class="slide-captions"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I have solved my problem by using GSAP scroll Trigger to trigger the movement of each layer and it works for me.
let tl2 = gsap.timeline({
scrollTrigger :{
trigger : "#sec-4",
pin: true,
scrub: true,
start : "center center",
end: "+=" + (window.innerHeight * 8),
}
});
tl2.from('.step-1', 1, {y: 100, opacity:0 })
tl2.to('.step-1', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -300}, 'frist')
tl2.to('.girl-frame', 1 , {x: -300}, 'frist')
tl2.from('.step-2', 1, {y: 100, opacity:0 }, 'frist')
tl2.to('.step-2', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -600}, 'second')
tl2.to('.girl-frame', 1 , {x: -670}, 'second')
tl2.from('.step-3', 1, {y: 100, opacity:0 }, 'second')
tl2.to('.step-3', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -900}, '3rd')
tl2.to('.girl-frame', 1 , {x: -1050}, '3rd')
tl2.from('.step-4', 2, {y: 100, opacity:0 }, '3rd')
I've been searching around and still couldnt find a fix to how to keep this moving object within the borders of my canvas. We tried to put an if statement into each arrow key movement functions, but that didnt seem to work completely. I'm not sure whether or not this is the right way to go about handling game movement since the image that we are moving is defined in the HTML and not defined as a variable in the javascript.
var width = 80;
var height = 40;
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 17+'px';
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 25 +'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 17 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 17 + 'px';
}
function moveSelection(evt) {
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function docReady()
{
window.addEventListener('keydown', moveSelection);
}
var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;
// create grid
for (var i = 0; i < (600 / grid); i++) {
canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}
// add objects
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#faa',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
canvas.add(new fabric.Circle({
left: 300,
top: 300,
radius: 50,
fill: '#9f9',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
// snap to grid
canvas.on('object:moving', function(options) {
options.target.set({
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
});
});
canvas.on('object:moving', function (e) {
var obj = document.getElementById("image1");
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
body {
overflow
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="GridEXEMovement.js"></script>
<title>Test Move Object</title>
<link rel="stylesheet" href="dimRoom.css">
</head>
<body onload="docReady()" onkeydown="" onkeyup="">
<!-- uncomment this div when you want to implement the green desktop Div -->
<nav>
<ul>
<li><button id="zeldaDeskTop">deskTop</button></li>
<span>|</span>
<li><button id="zeldaBrowser">browser</button></li>
<span>|</span>
<li><button id="zeldaExe">.exe</button></li>
<span>|</span>
<li><button id="zeldaGrid">grid</button></li>
</ul>
</nav>
<div id="screen">
<div id="content"></div>
<style>
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
html {
height: 100%;
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
body {
overflow-x: hidden;
}
html {
height: 100%;
}
#content{
background-color: transparent;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:50px 50px;
}
.follow-me {
position:absolute;
bottom:10px;
right:10px;
text-decoration: none;
color: #FFFFFF;
}
</style>
</div>
<img id="image1" src="https://www.bigbluebubble.com/wp-content/uploads/2017/07/PixelDodggers_Classic8-bitExperience.png" style="position: absolute; right: 100; left:980; top:300; z-index: 2; margin:0;" height="50" width="50">
<img id="DigitalCave" src="http://pixelartmaker.com/art/8fb5394537feede.png" style="position:absolute; left:560; top:146; z-index: 1;" height="30" width="40">
<img id="DataNode" src="http://pixelart.studio/Gallery/Image/100b0c98-d22d-4ffc-868a-9862aad1da4a?type=png" style="position:absolute; left:360; top:544; z-index: 1;" height="30" width="40">
<img id="Fire" src="https://cdn.theatlantic.com/assets/media/mt/science/flame-330.png" style="position:absolute; left:510; top:537; z-index: 1;" height="30" width="40">
<script type="text/javascript" src="dimRoom.js"></script>
</body>
</html>
Create a variable for speed:
var yspeed = 17;
var xspeed = 25;
You made a mistake there by the way. You sideways speeds are different each way.
Sideways speed should be the same both ways 25px each way.
If you canvas width is on 50px then the player will move very quickly across the canvas with a speed of 17px and 25px.
Then check if the speed isn’t equal to zero
if (speed !== 0) { // you are moving your character
// put your JavaScript you just created for wish and height checking here
}
Also in order to check if you’ve pressed your arrows return a Boolean when they have been used like this:
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - xspeed+'px';
return true;
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + xspeed +'px';
return true;
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - yspeed + 'px';
return true;
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + yspeed + 'px';
return true;
}
I hope this helps.
I would make an x and y speed, and do something like this for the player:
player = {
x: 0,
y: 0,
width: 50,
height: 50,
xspeed: 0,
yspeed: 0
};
Then I would do an if statement like this:
if (player.x < 0 || player.x > canvas.width) {
player.x = 0;
player.xspeed = 0;
}
if (player.y < 0 || player.y > canvas.height) {
player.y = 0;
player.yspeed = 0;
}
That should keep the player visible. Correct me if I'm wrong.
I am refining a parallax effect trying to create a smooth transition between two positions using where the mouse leaves and enters the window. If you notice the JSFiddle has a 'pop' that I want to replace with the transition. How can I do that?
$(document).ready(function() {
$('#layer-one').mousemove(function(e) {
parallax(e, this, 1);
parallax(e, document.getElementById('layer-two'), 2);
parallax(e, document.getElementById('layer-three'), 3);
});
});
function parallax(e, target, layer) {
var layer_coeff = 10 / layer;
var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
$(target).offset({
top: y,
left: x
});
};
JSFiddle
Thank you in advance.
Perhaps, you can use GSAP libraries to make that offset effect smoother, this is just a fast example, give it a try:
var initPos = $('#layer-one').position();
$(document).ready(function() {
$('#layer-one').mousemove(function(e) {
parallax(e, this, 1);
parallax(e, document.getElementById('layer-two'), 2);
parallax(e, document.getElementById('layer-three'), 3);
});
});
function parallax(e, target, layer) {
var layer_coeff = 10 / layer;
var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
/*$(target).offset({
top: y,
left: x
});*/
TweenLite.to($(target), 2, {x:x, y:y});
};
document.onmouseleave = function() {
$("#layer-one").animate({
opacity: 0.4,
left: 10,
}, 'fast');
};
.layer {
padding: 20px;
color: white;
}
#base-layer {
overflow: hidden;
}
#layer-one {
background: red;
}
#layer-two {
background: green;
}
#layer-three {
background: blue;
}
.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
}
.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="base-layer">
<div id="layer-one" class="layer">
Content
<div id="layer-two" class="layer">
Content
<div id="layer-three" class="layer">
Content
<section class="slider">
<img src="http://i.imgur.com/fVWomWz.png">
</section>
</div>
</div>
</div>
</div>
I am using raphael.js library and created a circle and a small black circle inside it. And now I want to drag that small circle out of the big circle. How can I detect whether the circle was dropped outside the circle or not?
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(function () {
var paper = new Raphael(0, 0, 150,150),
circle = paper.circle(75, 75, 15);
//circle2=false;
circle2=paper.circle(75, 75, 4);
circle2.hide();
circle.attr({
'stroke': '#f00',
'stroke-width': 4,
'fill': '#fff'
});
circle.hover(function(e) {
this.animate({ r: 30 }, 1000,'super_elastic');
circle2.show();
'fill': '#000'
});
}, function() {
this.animate({ r: 15 }, 1000, 'super_elastic');
circle2.hide();
});
circle2.hover(function(e) {
circle.animate({ r: 30 }, 1000,'super_elastic');
circle2.show();
}, function() {
});
/*******/
var p = paper.set(circle2);
circle2.set = p;
p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false;
start = function () {
},
move = function (dx, dy,x,y,cx) {
var a = this.set;$('#circle2').text(dx);
$('#circle3').text(dy);
$('#circlex').text(x);
$('#circley').text(y);
$('#circlez').text(cx);
a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy;
if(a.reInitialize)
{
a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false;
}
else
{
a.newTX+=a.tAddX,a.newTY+=a.tAddY;
a.attr({transform: "t"+a.newTX+","+a.newTY});
}
},
up = function () {
this.set.reInitialize=true;
};
p.drag(move, start, up);
/*******/
// modify this function
Raphael.easing_formulas.super_elastic = function(n) {
return Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI) / .3) + 1;
};
});
</script>
<body>
<div name='circle2' id='circle2' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circle3' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circlex' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circley$$' style="
background: red;
width: 10px;
height: 10px;
"></div>
<div name='circle3' id='circlez' style="
background: red;
width: 10px;
height: 10px;
"></div>
</body>
The distance between the centres of circles will become larger than the sum of their radii. Some pseudocode:
d = sqrt((x1 - x2)^2 + (y1 - y2)^2)
if(d > r1+r2)
print("It is out!");
else
print("It is inside!")
where your circle of radius r1 is at (x1, y1) and another one with radius r2 is at (x2, y2).