swiper carousel + animation + mask image - javascript

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')

Related

How to trigger click on canvas object and DOM element that is placed on top of object at the same time?

I have some circles that can be added to a fabricjs canvas. Each circle is an object, while outside my javascript code I have a DOM element, that looks like this:
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
This element triggers a tooltip with Tippjs (a js tooltip package), that has the following code (don't mind the each loop, I should also mention below code is outside the canvas function):
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
Inside my function where I declare everything for the canvas, I have the following code to place the DOM element on top of the canvas object:
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
This works, and the tooltip shows when clicked, but in my canvas function I also have a click function which toggles an image for a specific circle when clicked. I need both to trigger at the same time when the circle is clicked, now when I click a circle, the image appears, but only after I click a second time, the tooltip appears too, not at the same first click.
Removing the image by clicking a second time also doesn't work untill I click on another circle and then click back on the previously clicked circle.
The strange thing is, when I remove one of the two functions (tooltip click, or image toggle click) it works instant, but together only the image toggle works right away but the tooltip only after a second click. Why is that?
The entire code can be seen here (click the small circles to test): https://codepen.io/twan2020/pen/jOVaWMm
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</body>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
for (const ho of canvas.getObjects()) {
// check for 'hotspot' class
if (ho.class && ho.class === 'hotspot') {
ho.on('mousedown', () => {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default"
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
// image was previously loaded
for (const o of canvas.getObjects()) {
// find the correct image on the canvas
if (o.id && o.id === 'img-' + ho.name) {
// toggle the visible property
o.visible = !o.visible;
break;
}
}
}
positionBtn(ho);
});
}
}
})();
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
</script>
</html>
Also, is it possible to attach different tooltips to each dot/circle?
The reason why it didn't work is that you have just 1 DIV hotspot and you move this hotspot on mousedown and expect it to trigger the onclick event afterward which doesn't work. The reason why it works on second click is that the hotspot it now there.
The solution is to have the same amount of DIV as you have hotspot. This allows you to have unique popup message. Currently it displays the same message for each hotspot.
There is an onShow(instance), and onHide(instance) for the tippy property which allows you to carryout extra functionality when these hotspot are clicked on. In your case you want to load images related to the selected hotspot. This eliminate having two events setup.
There was also a problem toggling images. I fixed this but I am not 100% certain it is working how you would like this to work.
Also you had HTML tags outside the <body> tag and HTML content aren't supposed to exist outside body.
I kept most of your original code as much as I can.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
</head>
<body>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent1 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 1
</div>
</span>
<span id="cirkel2" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent2 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 2
</div>
</span>
<span id="cirkel3" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent3 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 3
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj, index) {
var absCoords = canvas.getAbsoluteCoords(obj);
var element = document.getElementById('cirkel'+index);
element.style.left = (absCoords.left - btnWidth / 10) + 'px';
element.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
canvas.getObjects().forEach(function(ho, index) {
positionBtn(ho, index + 1);
});
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
onShow(instance) {
canvas.getObjects().forEach(function(ho, index) {
if (ho.class && ho.class === 'hotspot') {
if (instance.id == index + 1) {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default",
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
printzelf.trippyHotspotImage = true;
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
for (const o of canvas.getObjects()) {
if (o.id && o.id === 'img-' + ho.name) {
o.visible = true;
break;
}
}
canvas.renderAll();
}
}
}
});
},
onHide(instance) {
for (const o of canvas.getObjects()) {
if (o.trippyHotspotImage) {
o.visible = false;
}
}
canvas.renderAll();
},
content: function (reference) {
return reference.querySelector('.tooltipcontent' + (i + 1));
}
});
});
})();
</script>
</body>
</html>
It looks like the first time the click event isn't fired right after the mousedown one the first time. The framework you use seems to prevent this because a process (by the listener) is performed.
(It may be related to event propagation but at this time I still didn't find out how to prevent a click event to be fired after a mouseup.)
What I would call a workaround: to display the tool tip in the same click, i.e. a mousedown event followed by a mouseup one, you can set mouseup value for the trigger property, which displays the tool tip:
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'mouseup', /* <-- here */
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
The mouseup event will be fired if the mousedown occurred on the circle.
Working snippet.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</body>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
for (const ho of canvas.getObjects()) {
// check for 'hotspot' class
if (ho.class && ho.class === 'hotspot') {
ho.on('mousedown', () => {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default"
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
// image was previously loaded
for (const o of canvas.getObjects()) {
// find the correct image on the canvas
if (o.id && o.id === 'img-' + ho.name) {
// toggle the visible property
o.visible = !o.visible;
break;
}
}
}
positionBtn(ho);
});
}
}
})();
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'mouseup',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
</script>
</html>

TweenMax hover out is not triggering animation

I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.
function over(){
TweenMax.to($(".grid-item-20"), 1, {
width: "50%",
ease: Expo.easeInOut
});
};
function out(){
TweenMax.to($("grid-item-20"), 1, {
width: "0",
ease: Expo.easeInOut,
});
};
$(".grid-item-17 a").hover(over, out);
.grid-item-20 {
border-bottom: 1px solid #000;
width: 0%;
}
<div class="grid-item-17">
Home
</div>
<div class="grid-item-20">
</div>
You're missing the dot on your selector
function out(){
TweenMax.to($(".grid-item-20"), 1, {
width: "0",
ease: Expo.easeInOut,
});
};
function over(){
TweenMax.to($(".grid-item-20"), 1, {
width: "50%",
ease: Expo.easeInOut
});
};
function out(){
TweenMax.to($(".grid-item-20"), 1, {
width: "0",
ease: Expo.easeInOut,
});
};
$(".grid-item-17 a").hover(over, out);
.grid-item-20 {
border-bottom: 1px solid #000;
width: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="grid-item-17">
Home
</div>
<div class="grid-item-20">
</div>

Burger menu animation where it follows the cursor (tweenmax)

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>

Can't get Scrollmagic plugin to work as example

Link to wanted behavior (slide on scroll): http://scrollmagic.io/examples/advanced/section_slides_manual.html
I copied the source from the site but am having trouble reciprocating it's behavior. I know there are some css that is moving from the source but it seems to be more of a javascript issue that I can't figure out.
Fiddle Link: https://jsfiddle.net/zcgxxj44/
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideContainer", 0.5, {z: -150}) // move back in 3D space
.to("#slideContainer", 1, {x: "-25%"}) // move in to first panel
.to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space
// animate to third panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-50%"})
.to("#slideContainer", 0.5, {z: 0})
// animate to forth panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-75%"})
.to("#slideContainer", 0.5, {z: 0});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "500%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
.addTo(controller);
});
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
position:relative;
}
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
}
#slideContainer {
width: 400%; /* to contain 4 panels, each with 100% of window width */
height: 500px;
background:red;
}
.panel {
height: 100%;
width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
float: left;
background:blue;
}
.hola{
background:green;
height:120vw;
width:100vw;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/jquery.gsap.min.js"></script>
<div class="hola"></div>
<div id="pinContainer">
<div id="slideContainer">
<section class="panel blue">
<b>ONE</b>
</section>
<section class="panel turqoise">
<b>TWO</b>
</section>
<section class="panel green">
<b>THREE</b>
</section>
<section class="panel bordeaux">
<b>FOUR</b>
</section>
</div>
</div>
Below is the working example of the same.
$(function() { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideContainer", 0.5, {
z: -150
}) // move back in 3D space
.to("#slideContainer", 1, {
x: "-25%"
}) // move in to first panel
.to("#slideContainer", 0.5, {
z: 0
}) // move back to origin in 3D space
// animate to third panel
.to("#slideContainer", 0.5, {
z: -150,
delay: 1
})
.to("#slideContainer", 1, {
x: "-50%"
})
.to("#slideContainer", 0.5, {
z: 0
})
// animate to forth panel
.to("#slideContainer", 0.5, {
z: -150,
delay: 1
})
.to("#slideContainer", 1, {
x: "-75%"
})
.to("#slideContainer", 0.5, {
z: 0
});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "500%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
});
<link href="http://scrollmagic.io/css/examples.css" rel="stylesheet" />
<link href="http://scrollmagic.io/css/style.css" rel="stylesheet" />
<link href="http://scrollmagic.io/css/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://scrollmagic.io/js/examples.js"></script>
<script src="http://scrollmagic.io/js/lib/modernizr.custom.min.js"></script>
<script src="http://scrollmagic.io/js/lib/highlight.pack.js"></script>
<script src="http://scrollmagic.io/js/examples.js"></script>
<script src="http://scrollmagic.io/js/lib/greensock/TweenMax.min.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
<div id="content-wrapper">
<div id="example-wrapper">
<div class="scrollContent">
<section class="demo" id="section-slides">
<style type="text/css">
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
#slideContainer {
width: 400%;
/* to contain 4 panels, each with 100% of window width */
height: 100%;
}
.panel {
height: 100%;
width: 25%;
/* relative to parent -> 25% of 400% = 100% of window width */
float: left;
}
</style>
<div id="pinContainer">
<div id="slideContainer">
<section class="panel blue">
<b>ONE</b>
</section>
<section class="panel turqoise">
<b>TWO</b>
</section>
<section class="panel green">
<b>THREE</b>
</section>
<section class="panel bordeaux">
<b>FOUR</b>
</section>
</div>
</div>
</section>
</div>
</div>
</div>

jQuery circle progress bar and percentage text animation when screen visible

I'm a novice in jQuery and I'm using jquery-circle-progress plugin by kottenator. I've four circles and I want to animate its bar and percentage text when it's area visible on the screen. Like most of websites make the effect.
Could anyone please help me to make that effect with a little explanation? Thanks in advance, Dear. My fiddle
HTML:
<section class="firstDiv"></section>
<section class="secondDiv"></section>
<div class="thirdDiv">
<div id="circle1">
<span class="rate">85%</span>
</div>
<div id="circle2">
<span class="rate">90%</span>
</div>
<div id="circle3">
<span class="rate">80%</span>
</div>
<div id="circle4">
<span class="rate">70%</span>
</div>
</div>
CSS:
section{ height: 700px; overflow: hidden;}
.firstDiv{ background: blue;}
.secondDiv{ background: yellow;}
.thirdDiv div{
float: left;
width: 25%;
overflow: hidden;
margin: 50px 0;
position: relative;
}
.rate{
position: absolute;
top: 40%;
left: 25%;
}
JS:
$('#circle1').circleProgress({
value: 0.85,
size: 100,
fill: {
gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
}
});
$('#circle2').circleProgress({
value: 0.90,
size: 100,
fill: {
gradient: ["#00B050", "#00CA00", "#9EEC00"]
}
});
$('#circle3').circleProgress({
value: 0.80,
size: 100,
fill: {
gradient: ["#FDFD00", "#FDE700", "#CDF500"]
}
});
$('#circle4').circleProgress({
value: 0.70,
size: 100,
fill: {
gradient: ["#123FAA", "#3914AE", "#0B63A3"]
}
});
My fiddle
Ok, It was a pretty good experience. I've solved the problem by using jquery.appear plugin. I've insert my full code into this portion of code:
var el = $('.circle'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if (!inited) {
el.circleProgress({ value: 0.7 });
inited = true;
}
});
It's a nice plugin, which execute the code when the div(in my case .thirdDiv) on screen. My full JS code is below:
var el = $('.thirdDiv'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if (!inited) {
$("#circle1").circleProgress({
value: 0.7,
size: 100,
fill: {
gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
}
});
$("#circle2").circleProgress({
value: 0.90,
size: 100,
fill: {
gradient: ["#00B050", "#00CA00", "#9EEC00"]
}
});
$("#circle3").circleProgress({
value: 0.80,
size: 100,
fill: {
gradient: ["#FDFD00", "#FDE700", "#CDF500"]
}
});
$("#circle4").circleProgress({
value: 0.70,
size: 100,
fill: {
gradient: ["#123FAA", "#3914AE", "#0B63A3"]
}
});
inited = true;
}
});
Thanks everybody :)

Categories

Resources