Skip to content

Commit ce78fd5

Browse files
KodingKhurramKodingKhurram
authored
Add files via upload
1 parent 75c2af4 commit ce78fd5

2 files changed

Lines changed: 374 additions & 0 deletions

File tree

‎animate.js‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
/*
2+
* animate.js - http://animate-dynamic.tk/
3+
* Version - 1.1.3
4+
* Licensed under the MIT license - https://opensource.org/licenses/MIT
5+
6+
* Copyright (c) 2021 Mohammed Khurram (KodingKhurram)
7+
*/
8+
9+
$(window).on("load", function() {
10+
//Dramatic animations, initialization
11+
$(".aniUtil_dramatic").each(function() {
12+
$(this).css("opacity", 0);
13+
});
14+
15+
//If the element is already visible on screen
16+
$("*[class*='ani_']").each(function() {
17+
var ani_Class = "";
18+
var ani_classes = "";
19+
var classname = this.classList;
20+
$(classname).each(function(){
21+
if(this.match(/^ani_/)){
22+
ani_Class = this;
23+
var animation = this.split("_")[1];
24+
ani_classes = "animate__animated animate__"+animation;
25+
}
26+
});
27+
28+
//Check visibility
29+
if( ((!$(this).hasClass("aniUtil_onClick")) && (!$(this).hasClass("aniUtil_onMouse")) && (!$(this).is('[class*="aniUtil_onKey"]'))) ){
30+
if (isScrolledIntoView(this) === true ) {
31+
if(!$(this).hasClass("aniUtil_animating") && !$(this).hasClass("animate__animated")){
32+
if($(this).hasClass("aniUtil_dramatic")){
33+
$(this).css("opacity", 100);
34+
}
35+
$(this).addClass("aniUtil_animating");
36+
$(this).addClass(ani_classes);
37+
this.addEventListener("animationend", () => {
38+
$(this).removeClass("aniUtil_animating");
39+
});
40+
}
41+
}
42+
else{
43+
if( $(this).hasClass("aniUtil_active") && !$(this).hasClass("aniUtil_animating")){
44+
if($(this).hasClass("aniUtil_dramatic")){
45+
$(this).css("opacity", 0);
46+
}
47+
$(this).removeClass(ani_classes);
48+
}
49+
}
50+
}
51+
52+
//on Click
53+
if($(this).hasClass("aniUtil_onClick")){
54+
$(this).click(function(){
55+
if($(this).hasClass("aniUtil_dramatic")){
56+
$(this).css("opacity", 100);
57+
}
58+
$(this).addClass(ani_classes);
59+
if($(this).hasClass("aniUtil_active")){
60+
this.addEventListener('animationend', () => {
61+
$(this).removeClass(ani_classes);
62+
});
63+
}
64+
else{
65+
$(this).removeClass("aniUtil_onClick");
66+
}
67+
});
68+
}
69+
70+
//On mouse over
71+
if($(this).hasClass("aniUtil_onMouse")){
72+
$(this).mouseover(function(){
73+
if($(this).hasClass("aniUtil_dramatic")){
74+
$(this).css("opacity", 100);
75+
}
76+
$(this).addClass(ani_classes);
77+
if($(this).hasClass("aniUtil_active")){
78+
this.addEventListener('animationend', () => {
79+
$(this).removeClass(ani_classes);
80+
});
81+
}
82+
else{
83+
$(this).removeClass("aniUtil_onMouse");
84+
}
85+
});
86+
}
87+
});
88+
89+
/*Custome animations goes here*/
90+
91+
//aniCus_clickDisabled
92+
$("*[class*='aniCus_clickDisabled']").each(function() {
93+
$(this).click(function(){
94+
if($(this).hasClass("aniCus_clickDisabled")){
95+
$(this).attr('style', 'border: 2px solid red !important');
96+
$(this).addClass("animate__animated animate__shakeX animate__faster");
97+
this.addEventListener('animationend', () => {
98+
$(this).css({"border": "revert"});
99+
$(this).removeClass("animate__animated animate__shakeX animate__faster");
100+
});
101+
}
102+
});
103+
});
104+
105+
//aniCus_tubeLight
106+
$("*[class*='aniCus_tubeLight']").each(function() {
107+
//Check visibility
108+
if( ((!$(this).hasClass("aniUtil_onClick")) && (!$(this).hasClass("aniUtil_onMouse")) && (!$(this).is('[class*="aniUtil_onKey"]'))) ){
109+
if (isScrolledIntoView(this) === true) {
110+
aniCus_tubeLight(this, 1);
111+
}
112+
else{
113+
if( $(this).hasClass("aniUtil_active") ){
114+
if($(this).hasClass("aniUtil_dramatic")){
115+
$(this).css("opacity", 0);
116+
}
117+
$(this).removeClass("animate__animated animate__fadeIn animate__slower");
118+
}
119+
}
120+
}
121+
122+
//on Click
123+
if($(this).hasClass("aniUtil_onClick")){
124+
$(this).click(function(){
125+
aniCus_tubeLight(this, 2);
126+
});
127+
}
128+
129+
//on Mouse
130+
if($(this).hasClass("aniUtil_onMouse")){
131+
$(this).mouseover(function(){
132+
aniCus_tubeLight(this, 3);
133+
});
134+
}
135+
});
136+
137+
//On scroll of Division
138+
$(".aniUtil_scrollDiv").each(function(){
139+
$(this).scroll(function() {
140+
var parent = this;
141+
$("*[class*='aniIn_']").each(function() {
142+
var ani_Class = "";
143+
var ani_classes = "";
144+
var classname = this.classList;
145+
$(classname).each(function(){
146+
if(this.match(/^aniIn_/)){
147+
ani_Class = this;
148+
var animation = this.split("_")[1];
149+
ani_classes = "animate__animated animate__"+animation;
150+
}
151+
});
152+
153+
//When scrolled in to view
154+
if( ((!$(this).hasClass("aniUtil_onClick")) && (!$(this).hasClass("aniUtil_onMouse")) && (!$(this).is('[class*="aniUtil_onKey"]'))) ){
155+
if (isScrolledIntoDivView(this, parent) === true) {
156+
if($(this).hasClass("aniUtil_dramatic")){
157+
$(this).css("opacity", 100);
158+
}
159+
$(this).addClass(ani_classes);
160+
}
161+
else{
162+
if( $(this).hasClass("aniUtil_active") ){
163+
if($(this).hasClass("aniUtil_dramatic")){
164+
$(this).css("opacity", 0);
165+
}
166+
$(this).removeClass(ani_classes);
167+
}
168+
}
169+
}
170+
});
171+
});
172+
});
173+
});
174+
175+
//On scroll of Window
176+
$(window).scroll(function() {
177+
178+
$("*[class*='ani_']").each(function() {
179+
var ani_Class = "";
180+
var ani_classes = "";
181+
var classname = this.classList;
182+
$(classname).each(function(){
183+
if(this.match(/^ani_/)){
184+
ani_Class = this;
185+
var animation = this.split("_")[1];
186+
ani_classes = "animate__animated animate__"+animation;
187+
}
188+
});
189+
190+
//Check visibility
191+
if( ((!$(this).hasClass("aniUtil_onClick")) && (!$(this).hasClass("aniUtil_onMouse")) && (!$(this).is('[class*="aniUtil_onKey"]'))) ){
192+
if (isScrolledIntoView(this) === true ) {
193+
if(!$(this).hasClass("aniUtil_animating") && !$(this).hasClass("animate__animated")){
194+
if($(this).hasClass("aniUtil_dramatic")){
195+
$(this).css("opacity", 100);
196+
}
197+
$(this).addClass("aniUtil_animating");
198+
$(this).addClass(ani_classes);
199+
this.addEventListener("animationend", () => {
200+
$(this).removeClass("aniUtil_animating");
201+
});
202+
}
203+
}
204+
else{
205+
if( $(this).hasClass("aniUtil_active") && !$(this).hasClass("aniUtil_animating")){
206+
if($(this).hasClass("aniUtil_dramatic")){
207+
$(this).css("opacity", 0);
208+
}
209+
$(this).removeClass(ani_classes);
210+
}
211+
}
212+
}
213+
});
214+
215+
/* Custom animations goes here */
216+
//aniCus_tubeLight
217+
$("*[class*='aniCus_tubeLight']").each(function() {
218+
//Check visibility
219+
if( ((!$(this).hasClass("aniUtil_onClick")) && (!$(this).hasClass("aniUtil_onMouse")) && (!$(this).is('[class*="aniUtil_onKey"]'))) ){
220+
if (isScrolledIntoView(this) === true ) {
221+
if(!$(this).hasClass("aniUtil_animating") && !$(this).hasClass("animate__animated")){
222+
aniCus_tubeLight(this, 1);
223+
}
224+
}
225+
else{
226+
if( $(this).hasClass("aniUtil_active") && !$(this).hasClass("aniUtil_animating")){
227+
if($(this).hasClass("aniUtil_dramatic")){
228+
$(this).css("opacity", 0);
229+
}
230+
$(this).removeClass("animate__animated animate__fadeIn animate__slower");
231+
}
232+
}
233+
}
234+
});
235+
});
236+
237+
//On key KeyPress
238+
$(document).keyup(function(e){
239+
$("*[class*='ani_']").each(function() {
240+
var ani_Class = "";
241+
var ani_classes = "";
242+
var classname = this.classList;
243+
$(classname).each(function(){
244+
if(this.match(/^ani_/)){
245+
ani_Class = this;
246+
var animation = this.split("_")[1];
247+
ani_classes = "animate__animated animate__"+animation;
248+
}
249+
});
250+
251+
//When key is pressed
252+
if($(this).is('[class*="aniUtil_onKey"]')){
253+
var elem = this;
254+
var key = "";
255+
var classname = this.classList;
256+
$(classname).each(function(){
257+
if(this.match(/^aniUtil_onKey/)){
258+
key = this.split("-")[1];
259+
}
260+
});
261+
if(e.code == key){
262+
if($(elem).hasClass("aniUtil_dramatic")){
263+
$(elem).css("opacity", 100);
264+
}
265+
$(elem).addClass(ani_classes);
266+
if($(elem).hasClass("aniUtil_active")){
267+
elem.addEventListener('animationend', () => {
268+
$(elem).removeClass(ani_classes);
269+
});
270+
}
271+
else{
272+
$(elem).removeClass("aniUtil_onKey");
273+
}
274+
}
275+
}
276+
});
277+
});
278+
279+
//Functions definitions
280+
281+
// Check if element is scrolled into view
282+
function isScrolledIntoView(elem) {
283+
var docViewTop = $(window).scrollTop();
284+
var docViewBottom = docViewTop + $(window).height();
285+
286+
var elemTop = $(elem).offset().top;
287+
var elemBottom = elemTop + $(elem).height();
288+
289+
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
290+
}
291+
292+
// Check if element is scrolled into division view
293+
function isScrolledIntoDivView(elem, parent) {
294+
var parentTop = $(parent).offset().top;
295+
var parentBottom = parentTop + $(parent).height();
296+
297+
var elemTop = $(elem).offset().top;
298+
var elemBottom = elemTop + $(elem).height();
299+
300+
return ((elemBottom <= parentBottom) && (elemTop >= parentTop));
301+
}
302+
303+
/* Custom animation function definitions */
304+
305+
//aniCus_tubeLight
306+
function aniCus_tubeLight(elem, type){
307+
//For click, mouse, and key animations
308+
if( type == 2 || type == 3 || type == 4){
309+
if(!$(elem).hasClass("animate__animated") && !$(elem).hasClass("aniUtil_animating")){
310+
if($(elem).hasClass("aniUtil_dramatic")){
311+
$(elem).css("opacity", 100);
312+
}
313+
$(elem).addClass("aniUtil_animating");
314+
$(elem).addClass("animate__animated animate__flash animate__repeat-2 animate__faster");
315+
elem.addEventListener('animationend', () => {
316+
$(elem).removeClass("animate__animated animate__flash animate__repeat-2 animate__faster");
317+
$(elem).addClass("animate__animated animate__fadeOut animate__slow");
318+
elem.addEventListener("animationend", () => {
319+
$(elem).removeClass("animate__animated animate__fadeOut animate__slow");
320+
$(elem).addClass("animate__animated animate__flash animate__faster");
321+
elem.addEventListener("animationend", () => {
322+
$(elem).removeClass("animate__animated animate__flash animate__faster");
323+
$(elem).addClass("animate__animated animate__fadeIn animate__slower");
324+
elem.addEventListener("animationend", () => {
325+
$(elem).removeClass("aniUtil_animating");
326+
});
327+
if($(elem).hasClass("aniUtil_active")){
328+
elem.addEventListener('animationend', () => {
329+
$(elem).removeClass("animate__animated animate__fadeIn animate__slower");
330+
});
331+
}
332+
else{
333+
if( type == 2) $(elem).removeClass("aniUtil_onClick");
334+
else if( type == 3) $(elem).removeClass("aniUtil_onMouse");
335+
}
336+
});
337+
});
338+
});
339+
}
340+
}
341+
//For ordinary animations
342+
else if( type == 1 ){
343+
if(!$(elem).hasClass("animate__animated") && !$(elem).hasClass("aniUtil_animating")){
344+
if($(elem).hasClass("aniUtil_dramatic")){
345+
$(elem).css("opacity", 100);
346+
}
347+
$(elem).addClass("aniUtil_animating");
348+
$(elem).addClass("animate__animated animate__flash animate__repeat-2 animate__faster");
349+
elem.addEventListener('animationend', () => {
350+
$(elem).removeClass("animate__animated animate__flash animate__repeat-2 animate__faster");
351+
$(elem).addClass("animate__animated animate__fadeOut animate__slow");
352+
elem.addEventListener("animationend", () => {
353+
$(elem).removeClass("animate__animated animate__fadeOut animate__slow");
354+
$(elem).addClass("animate__animated animate__flash animate__faster");
355+
elem.addEventListener("animationend", () => {
356+
$(elem).removeClass("animate__animated animate__flash animate__faster");
357+
$(elem).addClass("animate__animated animate__fadeIn animate__slower");
358+
elem.addEventListener('animationend', () => {
359+
$(elem).removeClass("aniUtil_animating");
360+
});
361+
});
362+
});
363+
});
364+
}
365+
}
366+
}

0 commit comments

Comments
 (0)