Maybe this is a silly question but I am unable to include a chart for each point on a map.
I am collecting the data from a JSON, this data I print it in the popup, each one with its class .scoreA, .scoreB... I would like from this data to create a chart for each point like the one I have. I would prefer to take them from the content of the popup (.scoreA, .scoreB) rather than from the JSON in case the structure changes. is it possible?
var mymap = L.map('mapid').setView([39.46975, -0.37739], 8 );
L.tileLayer('https://api.mapbox.com/styles/v1/jamaldols/cktwljkom0vzo18l9ggtnky83/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 12,
minZoom: 8,
id: 'mapbox/standard',
tileSize: 512,
zoomOffset: -1,
// maxNativeZoom: 16,
accessToken: ''
}).addTo(mymap);
$.getJSON('data.geo.json', function (geojson) {
L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: function (feature, layer) {
const coordinates = feature.geometry.coordinates;
const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});
console.log( `Coordinates: ${coordinates}`);
console.log( `Coordinates N: ${normalizedCoordinates}`);
const content =
`
<p id="heading">${feature.properties.name}</p>
<p class="scoreA"><strong>ScoreA: </strong>${feature.properties.scoreA}</p>
<p class="scoreB"><strong>ScoreB: </strong>${feature.properties.scoreB}</p>
<p class="scoreC"><strong>ScoreC: </strong>${feature.properties.scoreC}</p>
<p class="scoreD"><strong>ScoreD: </strong>${feature.properties.scoreD}</p>
<div class="popup__chart">chart</div>
`;
layer.on('click', function (e) {
document.getElementById("popup__content").innerHTML = content;
$(".popup").fadeOut(10);
$(".popup").fadeIn("slow");
console.log( `Click on ${feature.properties.name}`);
const maxZoom = mymap.getMaxZoom();
console.log(maxZoom)
mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});
});
}
}).addTo(mymap);
});
//Chart
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["Score A", "Score B", "Score C", "Score D"],
datasets: [{
label: "City",
backgroundColor: "rgba(200,0,0,1)",
data: [65, 60, 90, 80]
},]
};
var radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData
});
$(document).ready(function(){
$(".popup__bar__close").click(function(){
$('.popup').css('display', 'none');
mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
});
});
html,
body {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
.popup-fixed {
position: fixed;
top: auto;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
margin: 0;
border-radius: 0;
}
.leaflet-popup-tip-container {
display: none;
}
.leaflet-popup-content-wrapper {
border-radius: 0;
}
.popup {
width: 300px;
padding-bottom: 50px;
background: white;
position: absolute;
top: 50px;
right: 50px;
border: none;
display:none;
z-index: 1000;
}
#heading {
font-size: 35px;
color:black;
text-transform: uppercase;
margin: 15px 0;
}
#main {
display: flex;
overflow: hidden;
}
.popup {
}
.popup__bar {
width: 100%;
height: 50px;
position: relative;
display: flex;
align-items: center;
background: black;
}
.popup__bar__close {
background-image: url(img/close.svg);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 30px;
width: 30px;
right: 15px;
transform: rotate(45deg);
cursor: pointer;
}
.popup__chart {
}
.popup__chart img{
max-width: 100%;
height: auto;
}
#popup__content {
padding: 0 30px;
}
#info {
}
#footer {
font-family: 'Roboto Condensed', sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 6px;
height: 70px;
position: absolute;
background: white;
bottom: 0;
width: calc(100% - 90px);
right: 0;
}
#marksChart {
display: block;
box-sizing: border-box;
height: 250px;
width: 250px;
position: absolute;
top: 100px;
left: 90px;
background: white;
z-index: 200000;
border-radius: 12px;
padding: 20px;
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#mapid {
height: calc(100vh - 70px);
width: calc(100vw - 90px);
}
body {
padding: 0;
margin: 0;
}
</style>
<main id="main">
<div id="mapid"></div>
</main>
<div class="chart-container" style="max-width: 200px;">
<canvas id="marksChart" width="200" height="400"></canvas>
</div>
<script>
</script>
<div class="popup">
<div class="popup__bar">
<div class="popup__bar__close"></div>
</div>
<div id="popup__content"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- <script type="text/javascript" src="data.geo.json"></script> -->
<script type="text/javascript" src="main.js"></script>
</body>
Change your javascript to following:
$.getJSON('data.geo.json', function (geojson) {
L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: function (feature, layer) {
const coordinates = feature.geometry.coordinates;
const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});
console.log( `Coordinates: ${coordinates}`);
console.log( `Coordinates N: ${normalizedCoordinates}`);
const content =
`
<p id="heading">${feature.properties.name}</p>
<p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
<p class="scoreB"><strong>ScoreB: </strong><span>${feature.properties.scoreB}</span></p>
<p class="scoreC"><strong>ScoreC: </strong><span>${feature.properties.scoreC}</span></p>
<p class="scoreD"><strong>ScoreD: </strong><span>${feature.properties.scoreD}</span></p>
<div class="popup__chart">chart</div>
`;
layer.on('click', function (e) {
var popupElm = document.getElementById("popup__content");
popupElm.innerHTML = content;
$(".popup").fadeOut(10);
$(".popup").fadeIn("slow");
console.log( `Click on ${feature.properties.name}`);
const maxZoom = mymap.getMaxZoom();
console.log(maxZoom)
mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});
var marksData = {
labels: ["Score A", "Score B", "Score C", "Score D"],
datasets: [{
label: "City",
backgroundColor: "rgba(200,0,0,1)",
data: [
popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
popupElm.querySelectorAll('.scoreB span')[0].innerHTML,
popupElm.querySelectorAll('.scoreC span')[0].innerHTML,
popupElm.querySelectorAll('.scoreD span')[0].innerHTML
],
},]
};
if(radarChart){
radarChart.destroy();
}
radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData
});
});
}
}).addTo(mymap);
});
//Chart
var marksCanvas = document.getElementById("marksChart");
var radarChart = null;
$(document).ready(function(){
$(".popup__bar__close").click(function(){
$('.popup').css('display', 'none');
mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
});
});
What changed:
Add in the Popup around the score value a span, so it can easily read out
<p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
Move the chart generation into the click function but keep the global variables
Destroy the existing chart, else an error is thrown radarChart.destroy();
Get the valus from popup and use it in the data array. It searches for the class .scoreA and then it get the child span element
popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
Btw. you can also get the values from the clicked layer:
data: [
layer.feature.properties.scoreA,
layer.feature.properties.scoreB,
layer.feature.properties.scoreC,
layer.feature.properties.scoreD,
]
Related
I dont know how but my hover in left arrow (#left) stop work suddenly. I dont change any line of code in css which can create this issue. I just change the some lines in js and when I start site in codepen it didin't work. (the right one works fine ;D)
code:
HTML
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel=”stylesheet” href=”text/style.css”>
</head>
<body>
<div class="container">
<div id="left">
<svg viewBox="0 0 256 512" width="50" title="angle-left">
<path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
</svg>
</div>
<div id="slides">
<div id="slide1"></div>
<div id="slide2"></div>
<div id="slide3"></div>
</div>
<ul class="slide_pointers">
<li id="slide_pointer1"></li>
<li id="slide_pointer2"></li>
<li id="slide_pointer3"></li>
</ul>
<div id="right" >
<svg viewBox="0 0 256 512" width="50" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg>
</div>
</div>
</body>
</html>
CSS
body
{
background-color: #000;
}
.container
{
display: flex;
width: 1000px;
height: 500px;
border-radius: 25px;
margin: auto;
margin-top: 10%;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
}
#slides
{
width: 600px;
height: 300px;
margin-top: -100px;
position: absolute;
padding: 100px;
}
.slide_pointers
{
width: 800px;
height: 50px;
position: relative;
margin-top: 400px;
margin-left: 70px;
}
.slide_pointers > li
{
float: left;
list-style-type: none;
height: 10px;
width: 100px;
background-color: #9c9c9c;
margin-left: 80px;
margin-top: 40px;
border-radius: 25px;
}
#destription
{
font-size: 30px;
}
#right
{
right: -60px;
}
#right:hover
{
opacity: 0.7;
}
#left
{
margin-right: 40px;
}
#left : hover
{
opacity: 0.7;
}
JS
var slide1 = {
object: document.querySelector("#slide1"),
name: "WORK",
destription: "I'm programing since I have 7 years old. I started with html, c++. Then I findout python and I can say that i love this language. I learned some c# for making games in unity. I use lua for LOVE engine to also making games. Now I endup with JS/HTML/CSS to be the greatest, youngest frontend developer.",
active: true,
color: "#751BB5",
};
var slide2 = {
object: document.querySelector("#slide2"),
name: "LEARNING",
destription: "Before I end primmary school I have course where we do robots and we programmmed they in C and Python. We won some tournamets (First and Seccound place's).",
active: false,
color: "#14cba8",
};
var slide3 = {
object: document.querySelector("#slide3"),
name: "PASSION",
destription: "Since I have started learning programing my only reason to started it was dream to create something big. Something that anyone will remember for years. And this dream pushes me to learn more.",
active: false,
color: "#7ecb20",
};
var slide_pointer1 = {
object: document.querySelector("#slide_pointer1"),
};
var slide_pointer2 = {
object: document.querySelector("#slide_pointer2"),
};
var slide_pointer3 = {
object: document.querySelector("#slide_pointer3"),
};
var buttonLeft = document.querySelector("#right");
var buttonRight = document.querySelector("#left");
var container = document.querySelector(".container");
let slides = [slide1, slide2, slide3];
let slide_pointers = [slide_pointer1, slide_pointer3, slide_pointer2]
Refresh();
buttonRight.onclick = function WaitForClickRight()
{
for(let i = 0; i<3; i++)
{
if(slides[i].active)
{
if(i + 1 == 3)
{
slides[0].active = true;
slides[i].active = false;
}
else
{
slides[i+1].active = true;
slides[i].active = false;
}
Refresh();
break;
}
}
}
buttonLeft.onclick = function WaitForClickLeft()
{
for(let i = 0; i<3; i++)
{
if(slides[i].active)
{
if(i - 1 == -1)
{
slides[i].active = false;
slides[2].active = true;
}
else
{
slides[i].active = false;
slides[i-1].active = true;
}
Refresh();
break;
}
}
}
function Refresh()
{
for(let i = 0; i<3; i++)
{
if(slides[i].active == true)
{
slides[i].object.innerHTML = "<h1>" + slides[i].name + "</h1> <br> <p id='destription'>" + slides[i].destription + "</p>";
container.style.backgroundColor = slides[i].color;
slide_pointers[i].object.style.backgroundColor = "#484848";
}
else
{
slides[i].object.innerHTML = "";
slide_pointers[i].object.style.backgroundColor = "#9c9c9c";
}
}
}
and codepen: https://codepen.io/pawe-wojas/pen/NWYygWp
In the codepen, you had #left.hover instead of #left:hover
I changed the CSS to the below and it worked for me.
body
{
background-color: #000;
}
.container
{
display: flex;
width: 1000px;
height: 500px;
border-radius: 25px;
margin: auto;
margin-top: 10%;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
}
#slides
{
width: 600px;
height: 300px;
margin-top: -100px;
margin-left: 100px;
position: absolute;
padding: 100px;
}
.slide_pointers
{
width: 800px;
height: 50px;
position: relative;
margin-top: 400px;
margin-left: 70px;
}
.slide_pointers > li
{
float: left;
list-style-type: none;
height: 10px;
width: 100px;
background-color: #9c9c9c;
margin-left: 80px;
margin-top: 40px;
border-radius: 25px;
}
#destription
{
font-size: 30px;
}
#right
{
right: -60px;
}
#right:hover
{
opacity: 0.7;
}
#left
{
margin-right: 40px;
}
#left:hover
{
opacity: 0.7;
}
Your content in slide is overlay left arrow, it will work when you try to add margin-left: 100px; on slides class.
I'm starting to code this year and sorry if my english is not good enough,
I have a problem with a progress bar with JS,
I have on my console an "uncaught TypeError who charge infinitly and say to me that we can charge the properties on style...
The first step was working but when the bar is supposed to become interactive it's not working
const tll = gasp.timeline({
paused: true
});
tll.to("#percent", "#bar", {
duration: .2,
opacity: 0,
zIndex: -1
});
tll.to("#preloader", {
duration: .8,
width: "0%"
});
tll.from(".container", {
duration: 1.5,
y: "-150%"
}, "-=.2");
tll.to("container h1", {
opacity: 1,
textShadow: "12px 20px rgba(255, 255, 255,0.23)",
skewY: 10,
y: "10%",
stagger: {
amount: .4
}
});
var width = 1;
var bar = document.getElementById("barconfirm");
var id;
function move() {
id = setInterval(frame, 10);
}
function frame() {
if (width > 100) {
clearInterval(id);
tll.play();
} else {
width++;
bar.style.width = width + "%";
document.getElementById("percent").innerHTML = width + "%";
}
}
* {
margin: 0;
padding: 0;
overflow: hidden;
}
#preloader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 100;
background-color: #0f0f0f;
flex-direction: column;
}
#percent {
color: white;
font-family: "Neutral Face";
}
#bar {
width: 60%;
margin-top: 20%;
}
#barconfirm {
width: 1%;
padding: 1px 0px;
background-color: white;
}
.container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: gray;
}
.container h1 {
font-family: 'Monument';
text-transform: uppercase;
font-size: 40px;
opacity: 0;
}
<body onload="move()">
<div id="preloader">
<div id="percent">1%</div>
<div id="bar">
<div id="barconfirm"></div>
</div>
</div>
<div class="container">
<h1>Leo Clemente</h1>
</div>
Thanks to you all for your help, I want if you can an explanation more than just a code because I'm here to learn too and have a great day!
The issue in passing the selector to the tll.to method, it accepts ONE selector, so choose one of yours for tll.to("#percent", "#bar", {...}).
It will work as well whether you choose percent or bar. Also, according to the document, the dependency variable name is gsap.
You can check out an online snippet from here
I am building an app, when I click the card it flip and also generate a random word. Then I hover the random word. The program is calling responsiveVoice api, passing the parameters and it speaks the word. My issue here is this only works for the first time. when I click the card again the card flip then I hover over the random text it repeat the last words + new word. Any idea how to solve the javascript array?
var cards = [
{ animal: "Dog", animal_type: "A" },
{ animal: "Pig", animal_type: "B" },
{ animal: "Hippopo", animal_type: "B" },
{ animal: "Cat", animal_type: "A" },
];
const
$card = document.querySelector('.card'),
$demo = document.querySelector('#demo');
let display_text = true;
$card.addEventListener('click', function () {
$card.classList.toggle('is-flipped');
if (display_text) {
var random_num = Math.floor(Math.random() * 4);
$demo.innerHTML = cards[random_num].animal;
//here
$("#demo").hover(function(){
speak();
});
function speak() {
responsiveVoice.speak(cards[random_num].animal, "UK English Male");
}
//end
}
display_text = !display_text;
});
body { font-family: sans-serif; }
.scene {
width: 308px;
height: 446px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
/*line-height: 260px;*/
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
/*background: red;*/
}
.card__face--back {
background: #009688;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<img src="./css/images/pokemon_card.png" width="304" height="442" alt="">
</div>
<div class="card__face card__face--back">
<p id="demo">Back</p>
</div>
</div>
</div>
<p>Click card to flip.</p>
<!-- web speech api -->
<script src="https://code.responsivevoice.org/responsivevoice.js?key=QugTbpmd"></script>
</body>
</html>
i have put the hover event out of click event..
var cards = [{
animal: "Dog",
animal_type: "A"
},
{
animal: "Pig",
animal_type: "B"
},
{
animal: "Hippopo",
animal_type: "B"
},
{
animal: "Cat",
animal_type: "A"
},
];
const
$card = document.querySelector('.card'),
$demo = document.querySelector('#demo');
let display_text = true;
var random_num;
//here
$("#demo").hover(function() {
speak();
});
function speak() {
responsiveVoice.speak(cards[random_num].animal, "UK English Male");
}
//end
$card.addEventListener('click', function() {
$card.classList.toggle('is-flipped');
if (display_text) {
random_num = Math.floor(Math.random() * 4);
$demo.innerHTML = cards[random_num].animal;
}
display_text = !display_text;
});
body {
font-family: sans-serif;
}
.scene {
width: 308px;
height: 446px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
/*line-height: 260px;*/
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
/*background: red;*/
}
.card__face--back {
background: #009688;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<img src="./css/images/pokemon_card.png" width="304" height="442" alt="">
</div>
<div class="card__face card__face--back">
<p id="demo">Back</p>
</div>
</div>
</div>
<p>Click card to flip.</p>
<!-- web speech api -->
<script src="https://code.responsivevoice.org/responsivevoice.js?key=QugTbpmd"></script>
</body>
</html>
I've set up a little script that causes an image to slowly follow the mouse, creating a parallax effect. To make it feel a bit less janky, I added a small bit that checks if the mouse leaves the body, to just reset the animation. Unfortunately, that addition is making it so whenever I hover over an <a>, very briefly the parallax resets. The effect is most visible when you mouse onto an <a> and immediately stop moving the mouse.
I've tried switching between $(document).mouseout and $('body').mouseout to no avail.
$.fn.parallax = function(resistance, mouse) {
$e = $(this);
gsap.to($e, 0.2, {
x: -((mouse.clientX - window.innerWidth / 2) / resistance),
y: -((mouse.clientY - window.innerHeight / 2) / resistance)
});
};
$('body').mousemove(function(e) {
$('.mouse-with img').parallax(-10, e);
});
$('body').mouseout(function() {
gsap.to($('.mouse-with img'), 0.5, {
x: 0,
y: 0
});
});
html {
font-size: 16px;
height: 100%;
}
body {
font-size: 1em;
font-family: Arial, Helvetica, Sans-serif;
color: #000;
line-height: 100%;
min-height: 100%;
margin: 0px;
position: relative;
overflow: hidden;
overflow-y: auto;
}
.mouse-with {
margin: -150px 0 0 -200px;
position: absolute;
top: 50%;
left: 50%;
}
a {
position: fixed;
top: 10px;
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<div class="mouse-with">
<img src="https://picsum.photos/400/300" alt="" />
</div>
123 456-7890
All you need is to check if relatedTarget of mouseout is within body:
$.fn.parallax = function(resistance, mouse) {
$e = $(this);
gsap.to($e, 0.2, {
x: -((mouse.clientX - window.innerWidth / 2) / resistance),
y: -((mouse.clientY - window.innerHeight / 2) / resistance)
});
};
$('body').mousemove(function(e) {
$('.mouse-with img').parallax(-10, e);
});
$('body').mouseout(function(e) {
if (!$(e.relatedTarget).closest('body').is(this))
gsap.to($('.mouse-with img'), 0.5, {
x: 0,
y: 0
});
});
html {
font-size: 16px;
height: 100%;
}
body {
font-size: 1em;
font-family: Arial, Helvetica, Sans-serif;
color: #000;
line-height: 100%;
min-height: 100%;
margin: 0px;
position: relative;
overflow: hidden;
overflow-y: auto;
}
.mouse-with {
margin: -150px 0 0 -200px;
position: absolute;
top: 50%;
left: 50%;
}
a {
position: fixed;
top: 10px;
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<div class="mouse-with">
<img src="https://picsum.photos/400/300" alt="" />
</div>
123 456-7890
I have a code which displays congradulations and displays stars popping out when body loads in a blue screen for for a timeout of 4000
when body loads it calls a function animatecongrat() which has two functions in it given below
The text congradulations is animated in function animatetext(), and stars animated in animateblobs()
My problem is text congradulation is animated and bluescreen appears for a timeout of 4000 but stars ( var numberOfStars = 20; in blob) are not appearing and animated in blue screen.
How to solve this? How do i achieve this effect?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<script>
var timeOut;
function animateCongrat()
{
debugger;
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
reset();
var numberOfStars = 20;
for (var i = 0; i < numberOfStars; i++) {
$('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
}
animateText();
animateBlobs();
hideCongratAndBlueBody();
}
function addBlueBody() {
$('body').addClass('bodyblue');
$('#2').hide();
$('.hiddenimage').show();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$('body').removeClass('bodyblue');
}, 4000);
}
function reset() {
$.each($('.blob'), function(i) {
TweenMax.set($(this), {
x: 0,
y: 0,
opacity: 1
});
});
TweenMax.set($('h1'), {
scale: 1,
opacity: 1,
rotation: 0
});
}
function animateText() {
TweenMax.from($('h1'), 0.8, {
scale: 0.4,
opacity: 0,
rotation: 15,
ease: Back.easeOut.config(4),
});
}
function animateBlobs() {
debugger;
var xSeed = _.random(500, 500);
debugger;
var ySeed = _.random(300, 300);
$.each($('.blob'), function(i) {
var $blob = $(this);
var speed = _.random(1, 5);
var rotation = _.random(5, 100);
var scale = _.random(0.8, 1.5);
var x = _.random(-xSeed, xSeed);
var y = _.random(-ySeed, ySeed);
TweenMax.to($blob, speed, {
x: x,
y: y,
ease: Power1.easeOut,
opacity: 0,
rotation: rotation,
scale: scale,
onStartParams: [$blob],
onStart: function($element) {
$element.css('display', 'block');
},
onCompleteParams: [$blob],
onComplete: function($element) {
$element.css('display', 'none');
}
});
});
}
#font-face {
font-family: 'Sigmar One';
font-style: normal;
font-weight: 400;
src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}
#import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
.bodyblue {
background: #3da1d1;
color: #fff;
width: 0.3vw;
height: 0.5vh;
}
.congrats {
position: absolute;
top: 140px;
width: 550px;
height: 100px;
padding: 20px 10px;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
display: none;
}
h1 {
transform-origin: 50% 50%;
font-size: 50px;
font-family: 'Sigmar One', cursive;
cursor: pointer;
z-index: 2;
text-align: center;
width: 100%;
position: absolute;
top:-10.5vh;
left: 0.3vw;
}
.blob {
height: 50px;
width: 50px;
color: #ffcc00;
position: absolute;
top: 45%;
left: 45%;
z-index: 1;
font-size: 30px;
display: none;
}
.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
body{
background-image:
background-size: 100vw 100vh;
}
.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}
ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="animateCongrat();">
<div class="congrats">
<h1>Congratulations!</h1>
</div>
</body>