Develop Reference

swiper carousel + animation + mask image

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

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

jQuery animate complete not working

The animation itself is working but why isn't my complete function working?
fiddle: https://jsfiddle.net/jzhang172/5kfbw066/1/
$(".ok").animate({
height:"300px"
},{
duration:2000
}, {complete:function(){
alert('hey');
}
});
.ok{
background:blue;
height:100px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

complete is a property just as duration
$(".ok").animate({
height: "300px"
}, {
duration: 2000,
complete: function() {
alert('hey');
}
});
.ok {
background: blue;
height: 100px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

complete callback should be passed as the method on the second param object to the animate(), not as a different object.
Updated Fiddle
$(".ok").animate({
height: "300px"
}, { // <--- Pass `complete` callback as part of this object.
duration: 2000,
complete: function() {
alert('hey');
}
});
$(".ok").animate({
height: "300px"
}, { // <--- Pass `complete` callback as part of this object.
duration: 2000,
complete: function() {
alert('hey');
}
});
.ok {
background: blue;
height: 100px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>
Or, it can also be passed as last parameter to animate
$(".ok").animate({
height: "300px"
}, 2000,
function() {
alert('hey');
}
);
$(".ok").animate({
height: "300px"
}, 2000,
function() {
alert('hey');
}
);
.ok {
background: blue;
height: 100px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>

check the pointer position on an element in jquery

I have this simple reveal caption on hover animation using jquery, I am using hover and animate in jquery. Everything is working fine except in one case - when the hovering on image animation is done and the caption is revealed, if the mouse pointer was on the revealed caption the hovering out animation starts, assuming I hovered out of the image ... so i want to check if the mouse pointer is on the image itself or on the caption before applying the hovering out handler.
edited here is the markup
$( ".img-1" ).hover(function() {
$( ".cap-1" )
.animate({ "opacity": "1" }, 100 )
.animate({ "top": "-=50%" }, 200 )
.animate({ "top": "+=10%" }, 200 );
}, function() {
$( ".cap-1" )
.animate({ "top": "+=40%" }, 300 )
.animate({ "opacity": "0" }, 100 );
});
.img-1 {
width: 100%;
height: 400px;
background-color: rgba(0,0,0,0.4);
}
.friends-caption {
position: absolute;
width: 79.5%;
height: 37%;
top: 99%;
bottom: 0px;
left: 20px;
right: 0px;
background-color: rgba(102, 102, 102, 0.7);
border: none;
font-size: 16px;
font-family: inherit;
text-align: center;
color: #fff;
padding-top: 8%;
opacity: 0;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
<p class="friends-caption cap-1">Costa Cafe</p>
</div>

http://liveweave.com/C8NNC6
http://jsfiddle.net/zwzoresL/
Why not just apply the hover on the container instead of the image?
$('.col-sm-2').hover(function () {
$( ".cap-1" )
.animate({
"opacity": "1",
"top": "-=75%"
}, 300 )
.animate({
"top": "+=25%"
}, 200 );
}, function () {
$( ".cap-1" )
.animate({
"top": "+=50%",
"opacity": "0"
}, 300 );
});
.img-1 {
width: 100%;
height: 50%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.4);
}
.friends-caption {
position: absolute;
height: 25%;
top: 384px;
left: 10%;
right: 10%;
background: rgb(102, 102, 102);
background: rgba(102, 102, 102, 0.7);
border: none;
font: 16px inherit;
text-align: center;
color: #fff;
padding-top: 16px;
cursor: default;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
<p class="friends-caption cap-1">Costa Cafe</p>
</div>

The simplest solution to your problem would be to add a pointer-events property to your .friends-caption css rule:
.friends-caption {
/* existing rules */
pointer-events: none;
}
This will prevent mouse events from triggering from the caption element (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
However, this solution might not have the cross-browser compatibility that you desire. In that case, I think we can do the following to achieve a solution in JavaScript / jQuery:
First, for better organization, let's move the animate steps into their own functions:
var animateIn = function () {
$('.cap-1' )
.animate({ "opacity": "1" }, 100 )
.animate({ "top": "-=50%" }, 200 )
.animate({ "top": "+=10%" }, 200 );
};
var animateOut = function () {
$('.cap-1')
.animate({ "top": "+=40%" }, 300 )
.animate({ "opacity": "0" }, 100 );
};
We can attach the hover event to the .cap-1 element as well as the .img-1 because we want to know when the mouse has entered either element. Next, we need to use a setTimeout in our unhover handler because we want time to track if the mouse has moved from one of our targeted elements to the other -- if it has, we can clear our timeout, cancelling our animateOut call. Lastly, we will need to track whether our caption is in the "in" state so that we don't allow it to animate in when it is aleady in, or out when it is already out (which would cause the caption to repeatedly jump up or down our page):
var hover_timeout;
var caption_is_in;
$('.img-1,.cap-1').hover(function () {
if ('number' === typeof hover_timeout) {
clearTimeout(hover_timeout);
}
if (!caption_is_in) {
caption_is_in = true;
animateIn();
}
}, function () {
hover_timeout = setTimeout(function () {
if (caption_is_in) {
caption_is_in = false;
animateOut();
}
}, 50);
});
I have created a fiddle which can be found at: http://jsfiddle.net/76484/sqyc0b61/.
EDIT:
I have realized that my solution is incomplete because the caption can still trigger the hover event when it is in its "out" state. To fix this, we could add a 'container' class to the element that contains the image and caption and add the following css rule:
.container {
position:relative;
overflow:hidden;
}
Updated fiddle: http://jsfiddle.net/76484/sqyc0b61/1/

How to control animate function on button click?

I have two divs named "arrow" and "inner". I am trying to control the animate slide function when the div is clicked but have been unfortunate. The issue is noticeable when clicking very fast on the "arrow" div after user stops clicking the div is still sliding. I set the animate function under a small delay but I still experience lag. Here is my example code:
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").delay(400).animate({marginRight: "-100px"}, 500 );
out=0;
}
});
});
</script>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>

Just change your code
$("#inner").animate({marginRight: "0px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
and
$("#inner").animate({marginRight: "-100px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
Please see following Link for example : http://jsfiddle.net/UAYTw/1/
you can also use $("#inner").stop(true, false).animate() instead of $("#inner").stop(true, true).animate(). as per your choice.

Using Ravi's code props to him - toggle is cleaner in my opinion
DEMO
$(document).ready(function() {
$("#arrow").toggle(
function(){
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
},
function(){
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
}
);
});

You can use .animate().stop() method to stop the animation.
Demo: http://jsfiddle.net/YKn7c/

this may help:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
function () {
$("#effect").stop().animate({ opacity: '0', height: '130' }, 300);
}
);
edited:
If You dont want to be closed:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
null
);