Baby Moon Using HTML CSS & Js With Source Code

Baby Moon Using Html Css & Js

Source Code of Baby Moon Are Below You can Copy Past It or You can download It Using Link

Link is Given After This Code

Index.html

	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>Baby Moon</title>
	<link rel="stylesheet" href="./style.css">

	</head>
	<body>
	<
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 532 349" style="enable-background:new 0 0 532 349;" xml:space="preserve">

	<g id="moon">
	<g id="body">
	<ellipse id="base" transform="matrix(0.9963 -8.631246e-002 8.631246e-002 0.9963 -16.3195 23.57)" class="st1" cx="264.4" cy="200.5" rx="126" ry="126"/>
	<g id="craters">
	<path id="crater" class="st1" d="M189.4,100.1c0,0-1.4-4,2.1-6.5c3.4-2.4,11-7.4,11-7.4s4.9-1.8,6.8,1.4L189.4,100.1z"/>
	<path id="crater_1" class="st1" d="M171.3,283c0,0-2.3,5.2-0.3,6.9c2,1.7,16.8,15.5,16.8,15.5s2.3,2.1,8.6-0.7L171.3,283z"/>
	<path id="crater_9" class="st2" d="M264.4,74.5c0,0,94.6,27.6,94.6,126s-83.7,125.6-83.7,125.6s99.1-3.8,114.4-111.7
	c0,0,6.2-2.5,6.2-7.7s0-16.4,0-16.4s-0.1-6.2-6.8-7.9C389.1,182.3,378.5,74.5,264.4,74.5z"/>
	<circle id="crater_8" class="st3" cx="342.6" cy="141.3" r="12.5"/>
	<circle id="crater_7" class="st3" cx="316.5" cy="109.8" r="8.8"/>
	<path id="crater_6" class="st4" d="M238.8,112.5c0,0-8.6-3.8-14.1,3.4c-6,7.8-1.8,15.3-1.8,15.3s4.9,10.3,15.3,9.3
	s11.8-8.6,10.6-12.9"/>
	<path id="crater_4" class="st4" d="M229.9,281.8c0,0-4.7-2.1-7.7,1.8c-3.3,4.2-1,8.3-1,8.3s2.7,5.6,8.3,5s6.4-4.7,5.8-7"/>
	<path id="crater_2" class="st4" d="M320.9,269.3c0,0-3.7-0.5-5.1,2.8c-1.5,3.6,1,6.1,1,6.1s3,3.4,6.9,1.9s3.6-4.6,2.7-6.1"/>
	</g>
	</g>
	<g id="eyes">
	<path id="eye-left" class="st2" d="M219.7,199.9c-7.6,0-13.8-6.2-13.8-13.8s6.2-13.8,13.8-13.8s13.8,6.2,13.8,13.8
	S227.3,199.9,219.7,199.9z"/>
	<path id="eye-right" class="st2" d="M312.3,199.9c-7.6,0-13.8-6.2-13.8-13.8s6.2-13.8,13.8-13.8c7.6,0,13.8,6.2,13.8,13.8
	S319.9,199.9,312.3,199.9z"/>
	</g>
	<g id="mouth-cheeks">
	<circle id="cheek-left" class="st2" cx="199.2" cy="206.7" r="6.8"/>
	<circle id="cheek-right" class="st2" cx="333" cy="206.7" r="6.8"/>
	<path id="mouth" fill="#151845" d="M253.8,211.3h26c0,0,5.6,1.1,3.8,6.4s-9.4,10.1-16.1,10.1s-13.3-2.1-17.1-10
	C250.3,217.8,247.4,211.9,253.8,211.3z"/>
	<path id="mouth-morph" class="st5" d="M266.7,228.6c-5,0-9.1-4.1-9.1-9.1s4.1-9.1,9.1-9.1s9.1,4.1,9.1,9.1
	S271.8,228.6,266.7,228.6z"/>
	<path id="teeth" fill="#EAF2FD" d="M264.1,211.3v1c0,1.5,1.2,2.7,2.7,2.7l0,0c1.4,0,2.6-1.2,2.6-2.6v-1.1H264.1z"/>
	</g>
	</g>
	<g id="stars">
	<path id="star-1" class="st6" d="M86.5,262.6c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4S88.3,262.6,86.5,262.6z"/>
	<path id="star-2" class="st7" d="M33.2,222c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2s6.2,2.8,6.2,6.2
	C39.3,219.2,36.6,222,33.2,222z"/>
	<path id="star-3" class="st8" d="M79.4,190.3c-2.3,0-4.2-1.9-4.2-4.2s1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2S81.7,190.3,79.4,190.3z"/>
	<path id="star-4" class="st8" d="M94.8,87.6c-2.9,0-5.3-2.4-5.3-5.3s2.4-5.3,5.3-5.3s5.3,2.4,5.3,5.3S97.7,87.6,94.8,87.6z"/>
	<path id="star-5" class="st7" d="M181.9,43.5c-1.5,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6S183.4,43.5,181.9,43.5z"/>
	<path id="star-6" class="st8" d="M322.4,29.1c-2.6,0-4.7-2.1-4.7-4.7s2.1-4.7,4.7-4.7s4.7,2.1,4.7,4.7S325,29.1,322.4,29.1z"/>
	<path id="star-7" class="st7" d="M390.2,62.6c-2.6,0-4.7-2.1-4.7-4.7s2.1-4.7,4.7-4.7s4.7,2.1,4.7,4.7S392.8,62.6,390.2,62.6z"/>
	<path id="star-8" class="st6" d="M448,65.2c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4S449.9,65.2,448,65.2z"/>
	<path id="star-9" class="st8" d="M501.3,117.7c-1.4,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6S502.7,117.7,501.3,117.7z"
	/>
	<path id="star-10" class="st7" d="M456.8,176.1c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8
	S460,176.1,456.8,176.1z"/>
	<path id="star-11" class="st6" d="M504.5,228.1c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8
	S507.7,228.1,504.5,228.1z"/>
	<path id="star-12" class="st8" d="M451.1,279.9c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8
	S454.3,279.9,451.1,279.9z"/>
	<path id="star-1-morph" class="st9" d="M86.9,246c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.1-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c3-1.7,9.1-5.8,12.2-12.5
	C85.6,245.3,86.6,245.3,86.9,246z"/>
	<path id="star-2-morph" class="st9" d="M33.6,202.6c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.2-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c4.7-2.6,9.1-5.7,12.2-12.5
	C32.3,201.9,33.3,201.9,33.6,202.6z"/>
	<path id="star-3-morph" class="st9" d="M79.9,172.9c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.2-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c2.9-1.7,9.1-5.8,12.2-12.5
	C78.6,172.2,79.6,172.2,79.9,172.9z"/>
	<path id="star-4-morph" class="st9" d="M94.9,69.1c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.2-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c2.9-1.7,9.1-5.7,12.2-12.5
	C93.6,68.4,94.6,68.4,94.9,69.1z"/>
	<path id="star-5-morph" class="st9" d="M182.4,27.6c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.2-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c2.9-1.7,9.1-5.8,12.2-12.5
	C181.1,26.9,182.1,26.9,182.4,27.6z"/>
	<path id="star-6-morph" class="st9" d="M323.2,11.2c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.2-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c2.9-1.7,9.1-5.8,12.2-12.5
	C321.9,10.5,322.9,10.5,323.2,11.2z"/>
	<path id="star-7-morph" class="st9" d="M390.6,44.6c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.1-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c3-1.7,9.1-5.8,12.2-12.5
	C389.3,43.9,390.3,43.9,390.6,44.6z"/>
	<path id="star-8-morph" class="st9" d="M448.4,49.3c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7c-3.3,1.5-9.4,5.2-12.5,12.5
	c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.2-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c2.9-1.7,9.1-5.8,12.2-12.5
	C447.1,48.6,448.1,48.6,448.4,49.3z"/>
	<path id="star-9-morph" class="st9" d="M501.8,101.8c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7
	c-3.3,1.5-9.4,5.2-12.5,12.5c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.1-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6c3-1.6,9.1-5.7,12.2-12.5
	C500.5,101.1,501.5,101.1,501.8,101.8z"/>
	<path id="star-10-morph" class="st9" d="M457.5,156.9c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7
	c-3.3,1.5-9.4,5.2-12.5,12.5c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.1-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6
	c5.4-2.5,9.1-5.7,12.2-12.5C456.2,156.2,457.2,156.2,457.5,156.9z"/>
	<path id="star-11-morph" class="st9" d="M505.2,208.9c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7
	c-3.3,1.5-9.4,5.2-12.5,12.5c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.1-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6
	c5.4-2.5,9.1-5.7,12.2-12.5C503.9,208.2,504.9,208.2,505.2,208.9z"/>
	<path id="star-12-morph" class="st9" d="M451.6,261.8c1.4,3.3,4.9,9.3,12.4,12.5c0.7,0.3,0.8,1.3,0.1,1.7
	c-3.3,1.5-9.4,5.2-12.5,12.5c-0.3,0.7-1.3,0.7-1.7,0c-1.5-3.2-5.1-9.1-12.1-12.6c-0.7-0.3-0.7-1.3-0.1-1.6
	c5.4-2.5,9.1-5.7,12.2-12.5C450.3,261.1,451.3,261.1,451.6,261.8z"/>
	</g>

	<div id="pupils">
	<div class="eye"></div>
	<div class="eye"></div>
	</div>

	<div id="brightness"></div>
	</svg>
	<!-- partial -->
	<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
	<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
	<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js'></script><script src="./script.js"></script>

	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	// Variables //
	let timer
	let rot
	const eye = $(".eye")
	const pupils = CSSRulePlugin.getRule(".eye:after")

	// Functions //
	// Moon
	function rotateMoon() {
	const rotateTL = gsap.timeline({repeat: -1, yoyo: true})
	rotateTL.set("#body", {transformOrigin: "50% 50%"})
	rotateTL.to("#body", {rotateZ: 12, duration: 6, ease: "power1.inOut"})
	}

	function floatMoon() {
	const floatTL = gsap.timeline({repeat: -1, yoyo: true})
	floatTL.to("#body", 2, {y: -6, ease: "power1.inOut"})

	const mouthCheeksTL = gsap.timeline({repeat: -1, yoyo: true})
	mouthCheeksTL.to("#mouth-cheeks", 2, {y: -3, ease: "power1.inOut"})
	}

	function shimmeringStars() {
	const starsTL = gsap.timeline({repeat: -1, delay: 1})

	starsTL.to("#star-7", .5, {morphSVG: "#star-7-morph", ease: "power3.Out"})
	starsTL.to("#star-7", .5, {morphSVG: "#star-7", ease: "power3.Out"})

	starsTL.to("#star-3", .5, {delay: -.15, morphSVG: "#star-3-morph", ease: "power3.Out"})
	starsTL.to("#star-3", .5, {morphSVG: "#star-3", ease: "power3.Out"})

	starsTL.to("#star-12", .5, {delay: -.35, morphSVG: "#star-12-morph", ease: "power3.Out"})
	starsTL.to("#star-12", .5, {morphSVG: "#star-12", ease: "power3.Out"})

	starsTL.to("#star-11", .5, {delay: -.7, morphSVG: "#star-11-morph", ease: "power3.Out"})
	starsTL.to("#star-11", .5, {morphSVG: "#star-11", ease: "power3.Out"})

	starsTL.to("#star-2", .5, {delay: -.35, morphSVG: "#star-2-morph", ease: "power3.Out"})
	starsTL.to("#star-2", .5, {morphSVG: "#star-2", ease: "power3.Out"})

	starsTL.to("#star-1", .5, {delay: -.7, morphSVG: "#star-1-morph", ease: "power3.Out"})
	starsTL.to("#star-1", .5, {morphSVG: "#star-1", ease: "power3.Out"})

	starsTL.to("#star-6", .5, {delay: -.7, morphSVG: "#star-6-morph", ease: "power3.Out"})
	starsTL.to("#star-6", .5, {morphSVG: "#star-6", ease: "power3.Out"})

	starsTL.to("#star-8", .5, {delay: -.9, morphSVG: "#star-8-morph", ease: "power3.Out"})
	starsTL.to("#star-8", .5, {morphSVG: "#star-8", ease: "power3.Out"})

	starsTL.to("#star-4", .5, {delay: -.9, morphSVG: "#star-4-morph", ease: "power3.Out"})
	starsTL.to("#star-4", .5, {morphSVG: "#star-4", ease: "power3.Out"})

	starsTL.to("#star-9", .5, {delay: -.35, morphSVG: "#star-9-morph", ease: "power3.Out"})
	starsTL.to("#star-9", .5, {morphSVG: "#star-9", ease: "power3.Out"})

	starsTL.to("#star-10", .5, {delay: -.35, morphSVG: "#star-10-morph", ease: "power3.Out"})
	starsTL.to("#star-10", .5, {morphSVG: "#star-10", ease: "power3.Out"})

	starsTL.to("#star-5", .5, {delay: -.35, morphSVG: "#star-5-morph", ease: "power3.Out"})
	starsTL.to("#star-5", .5, {morphSVG: "#star-5", ease: "power3.Out"})
	}

	// Pointer
	function track() {
	document.addEventListener("mousemove", (e) => {
	pointerEyesStart()
	pointerMouthStart()

	clearTimeout(timer)

	timer = setTimeout(() => {
	pointerEyesStop()
	pointerMouthStop()
	}, 300)
	})
	}

	function pointerEyesStart() {
	const x = (eye.offset().left) + (eye.width() / 2)
	const y = (eye.offset().top) + (eye.height() / 2)
	const rad = Math.atan2(event.pageX - x, event.pageY - y)
	rot = (rad * (180 / Math.PI) * -1) + 180
	gsap.to(eye, 0, {rotateZ: rot})
	}

	function pointerEyesStop() {
	}

	function pointerMouthStart() {
	gsap.to("#mouth", .5, {morphSVG: "#mouth-morph"})
	gsap.to("#teeth", .5, {y: -1})
	}

	function pointerMouthStop() {
	gsap.to("#mouth", .5, {morphSVG: "#mouth", ease: "back.out(1.7)"})
	}

	function shy() {
	$("#moon").on("mouseenter", () => {
	gsap.to("#cheek-left, #cheek-right", 1, {fill: "#f7d4e8"})
	gsap.to("#cheek-left, #cheek-right", 1, {scale: 1.5, y: 3, transformOrigin: "50% 50%"})

	gsap.to(pupils, 2, {bottom: "11px", ease: "elastic.out"})
	})
	$("#moon").on("mouseleave", () => {
	gsap.to("#cheek-left, #cheek-right", 1, {fill: "#d3dced"})
	gsap.to("#cheek-left, #cheek-right", 1, {scale: 1, y: 0, transformOrigin: "50% 50%"})

	gsap.to(pupils, 2, {bottom: "16px", ease: "elastic.out"})
	})
	}

	// Initialize
	function init() {
	rotateMoon()
	floatMoon()
	shimmeringStars()
	track()
	shy()
	}

	init()

view raw script.js hosted with ❤ by GitHub

	.st0{fill:#151845;}
	.st1{fill:#EAF2FD;}
	.st2{fill:#D3DCED;}
	.st3{fill:#EAF2FE;}
	.st4{fill:none;stroke:#D2DBEB;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
	.st5{display:none;fill:#171A46;}
	.st6{fill:#F41C33;}
	.st7{fill:#FFFFFF;}
	.st8{fill:#1C86F3;}
	.st9{display:none;fill:#FFFFFF;}

	body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #151845;
	}

	@-moz-document url-prefix() {
	svg {
	width: 720px;
	}
	}

	svg {
	min-width: 720px;
	}

	#brightness {
	position: absolute;
	z-index: -1;
	box-shadow: 0 0 90px rgba(255, 255, 255, .6);
	margin-top: 70px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	}

	#pupils {
	pointer-events: none;
	position: absolute;
	}

	.eye {
	margin-top: 35px;
	position: relative;
	display: inline-block;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	max-width: 50px;
	max-height: 50px;
	pointer-events: none;
	transform: scale(1.1);
	}

	.eye:after {
	position: absolute;
	bottom: 16px;
	right: 10px;
	width: 20px;
	height: 20px;
	background: #151845;
	border-radius: 50%;
	content: "";
	}

	.eye:last-child {
	margin-left: 80px;
	}

	@media (max-width: 720px) {
	@-moz-document url-prefix() {
	svg {
	width: 420px;
	max-width: 420px;
	}
	}

	svg {
	min-width: 420px;
	}

	#brightness {
	margin-top: 40px;
	width: 190px;
	height: 190px;
	}

	#pupils {
	transform: scale(.6);
	}
	}

	@media (max-height: 420px) {
	svg {
	min-width: 420px;
	}

	#brightness {
	margin-top: 40px;
	width: 190px;
	height: 190px;
	}

	#pupils {
	transform: scale(.6);
	}
	}

view raw style.css hosted with ❤ by GitHub

Author Description

CodeWithNinju

Baby Moon Using HTML CSS & Js With Source Code | CodeWithNinju

Baby Moon Using HTML CSS & Js With Source Code

Index.html

Click hear For Download Source Code

Code With Ninju

No comments:

Post a Comment

Search This Blog

Ninju

Recent

Popular

Comments

Website Template

How To Make A Portfolio Website | CodeWithNinju

Animated Scrolling Page Using HTML CSS JAVASCRIPT With Source Code | Code With NInju

Archive

Labels

Labels

Cocoking

Contact Form

Author Description

Author Social Links

CodeWithNinju

Baby Moon Using HTML CSS & Js With Source Code | CodeWithNinju

Baby Moon Using HTML CSS & Js With Source Code

Index.html

Click hear For Download Source Code

Code With Ninju

You may also like:

No comments:

Post a Comment

Search This Blog

Ninju

Recent

Popular

Comments

Website Template

How To Make A Portfolio Website | CodeWithNinju

Animated Scrolling Page Using HTML CSS JAVASCRIPT With Source Code | Code With NInju

Archive

Labels

Labels

Cocoking

Contact Form