Apply a codepen mouse animation to wix website

Ask the community
,
1

Hi I have this animation I want to apply to my Wix site, I know all the code has got to all go within an embedded HTML iframe, but I can’t get the animation to apply to the mouse. Does anyone know how I would get the animation to apply to the whole website? Thanks

https://codepen. io/igcorreia/details/pJvOpL?fbclid=IwAR1I4c8Byy0xYZ_26o8oqrx5abd1N_M1rrZuI2gh-dyWADWBmyWR-olSSn8
2

Currently, my HTML document looks like this:

<!doctype html>

<html lang="en">
<style>
* {
	cursor: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
html {
	font-family: 'Lato', sans-serif;
	min-height: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
	cursor: none;
}
html body {
	min-height: 100%;
	height: 100%;
	cursor: none;
	margin: 0;
	padding: 0;
}
html body #copy {
	position: absolute;
	bottom: 0;
	height: 40px;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	line-height: 14px;
	font-size: 10px;
	font-weight: 400;
	z-index: 999;
}
html body #copy a {
	color: #898989;
	text-decoration: none;
	transition: all 0.3s ease-in-out 0s;
	cursor: none;
}
html body #copy a b {
	font-weight: 700;
}
html body #copy a:hover {
	color: #fff;
}
html body .box {
	position: absolute;
	width: 25px;
	height: 25px;
	top: 50%;
	left: 50%;
	margin: -50 0 0 -50px;
	border-radius: 50px;
	-webkit-backface-visibility: hidden;
	opacity: 0;
	cursor: none;
}
html body .box.arrow {
	background: url('http://lmgtfy. com/assets/mouse_arrow_windows_aero-b118000dc97d4558d6db021793acc613.png') no-repeat 0 0 transparent;
	border-radius: 0;
}
html #intro {
	position: relative;
	font-size: 20px;
	font-weight: 100;
	text-align: center;
	float: none;
	display: block;
	width: 100%;
	color: #767676;
	cursor: none;
	padding-top: 80px;
	text-transform: uppercase;
}

html #intro .select span {
	color: #fff;
	font-weight: 400;
	padding: 0 20px;
	position: relative;
	letter-spacing: 1px;

</style>

<body>
	<div id="intro"></div>
	<script src="https://cdnjs.cloudflare. com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare. com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
	<script type="text/javascript">
		
		var $box = $('.box'),
		inter = 30,
		speed = 0;

		function moveBox(e) {
  //TweenMax.killTweensOf();
  $box.each(function(index, val) {
  	TweenLite.to($(this), 0.05, { css: { left: e.pageX, top: e.pageY},delay:0+(index/750)});
  });
}

$(window).on('mousemove', moveBox);

$box.each(function(index, val) {
	index = index + 1;
	TweenMax.set(
		$(this),{
			autoAlpha: 1,
			delay:0
		});
});
TweenMax.set(
	$('.text:nth-child(30)'), {
		autoAlpha: 1,
		delay: 0
	}
	);

//V2.0
$('.pointer').mouseover(function(){
  //console.log('cursor');
  $box.addClass('arrow');
});
$('.circle').mouseover(function(){
  //console.log('circle');
  $box.removeClass('arrow');
});
</script>
</body>

</html>
3

You can’t use parent, window, top, etc. to access the page. The HtmlComponent is sandboxed and does not allow access to the parent’s DOM.

4

Thanks for your reply, so would the whole site have to go within the html embed, or is there a way to access the parents dom?

5

@eporrelli90 An HtmlComponent is an element on a site page, you can’t embed the whole site in an HtmlComponent.

As I mentioned in my previous comment… no , the HtmlComponent does not allow access to the parent’s DOM.