Skip to content

Commit c179322

Browse files
iamwatchdogsiamwatchdogs
authored
PR #35: Blend Mode Website
added a website Merge pull request #35 from Inija-2503/blend
2 parents 75093f5 + 3f34868 commit c179322

File tree

3 files changed

+700
-0
lines changed

3 files changed

+700
-0
lines changed

‎Blend-animation/main.js‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
$( "#nav-btn" ).on( "click", function() {
2+
$('#takeover-nav').toggleClass("shown");
3+
$('.sticky-nav').toggleClass("difference");
4+
});
5+
6+
7+
8+
///Initiation Variables
9+
var icon_1 = document.getElementById("nav-btn");
10+
var topLine_1 = document.getElementById("top-line-1");
11+
var middleLine_1 = document.getElementById("middle-line-1");
12+
var bottomLine_1 = document.getElementById("bottom-line-1");
13+
var state_1 = "menu"; // can be "menu" or "arrow"
14+
var topLineY_1;
15+
var middleLineY_1;
16+
var bottomLineY_1;
17+
var topLeftY_1;
18+
var topRightY_1;
19+
var bottomLeftY_1;
20+
var bottomRightY_1;
21+
var topLeftX_1;
22+
var topRightX_1;
23+
var bottomLeftX_1;
24+
var bottomRightX_1;
25+
26+
///Animation Variables
27+
var segmentDuration_1 = 15;
28+
var menuDisappearDurationInFrames_1 = segmentDuration_1;
29+
var arrowAppearDurationInFrames_1 = segmentDuration_1;
30+
var arrowDisappearDurationInFrames_1 = segmentDuration_1;
31+
var menuAppearDurationInFrames_1 = segmentDuration_1;
32+
var menuDisappearComplete_1 = false;
33+
var arrowAppearComplete_1 = false;
34+
var arrowDisappearComplete_1 = false;
35+
var menuAppearComplete_1 = false;
36+
var currentFrame_1 = 1;
37+
38+
///Menu Disappear
39+
function menuDisappearAnimation_1() {
40+
currentFrame_1++;
41+
if ( currentFrame_1 <= menuDisappearDurationInFrames_1 ) {
42+
window.requestAnimationFrame( ()=> {
43+
//top line
44+
topLineY_1 = AJS.easeInBack( 37, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
45+
topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
46+
//bottom line
47+
bottomLineY_1 = AJS.easeInBack( 63, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
48+
bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
49+
//recursion
50+
menuDisappearAnimation_1();
51+
});
52+
} else {
53+
middleLine_1.style.opacity = "0";
54+
currentFrame_1 = 1;
55+
menuDisappearComplete_1 = true;
56+
openMenuAnimation_1();
57+
}
58+
}
59+
60+
///Cross Appear
61+
function arrowAppearAnimation_1() {
62+
currentFrame_1++;
63+
if ( currentFrame_1 <= arrowAppearDurationInFrames_1 ) {
64+
window.requestAnimationFrame( ()=> {
65+
//top line
66+
topLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
67+
topLeftY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
68+
bottomRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
69+
bottomRightY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
70+
topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
71+
//bottom line
72+
bottomLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
73+
bottomLeftY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
74+
topRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
75+
topRightY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
76+
bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
77+
//recursion
78+
arrowAppearAnimation_1();
79+
});
80+
} else {
81+
currentFrame_1 = 1;
82+
arrowAppearComplete_1 = true;
83+
openMenuAnimation_1();
84+
}
85+
}
86+
87+
///Combined Open Menu Animation
88+
function openMenuAnimation_1() {
89+
if ( !menuDisappearComplete_1 ) {
90+
menuDisappearAnimation_1();
91+
} else if ( !arrowAppearComplete_1) {
92+
arrowAppearAnimation_1();
93+
}
94+
}
95+
96+
///Cross Disappear
97+
function arrowDisappearAnimation_1() {
98+
currentFrame_1++;
99+
if ( currentFrame_1 <= arrowDisappearDurationInFrames_1 ) {
100+
window.requestAnimationFrame( ()=> {
101+
//top line
102+
topLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
103+
topLeftY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
104+
bottomRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
105+
bottomRightY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
106+
topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
107+
//bottom line
108+
bottomLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
109+
bottomLeftY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
110+
topRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
111+
topRightY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
112+
bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
113+
//recursion
114+
arrowDisappearAnimation_1();
115+
});
116+
} else {
117+
middleLine_1.style.opacity = "1";
118+
currentFrame_1 = 1;
119+
arrowDisappearComplete_1 = true;
120+
closeMenuAnimation_1();
121+
}
122+
}
123+
124+
///Menu Appear
125+
function menuAppearAnimation_1() {
126+
currentFrame_1++;
127+
if ( currentFrame_1 <= menuAppearDurationInFrames_1 ) {
128+
window.requestAnimationFrame( ()=> {
129+
//top line
130+
topLineY_1 = AJS.easeOutBack( 50, 37, menuDisappearDurationInFrames_1, currentFrame_1 );
131+
topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
132+
//bottom line
133+
bottomLineY_1 = AJS.easeOutBack( 50, 63, menuDisappearDurationInFrames_1, currentFrame_1 );
134+
bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
135+
//recursion
136+
menuAppearAnimation_1();
137+
});
138+
} else {
139+
currentFrame_1 = 1;
140+
menuAppearComplete_1 = true;
141+
closeMenuAnimation_1();
142+
}
143+
}
144+
145+
///Close Menu Animation
146+
function closeMenuAnimation_1() {
147+
if ( !arrowDisappearComplete_1 ) {
148+
arrowDisappearAnimation_1();
149+
} else if ( !menuAppearComplete_1 ) {
150+
menuAppearAnimation_1();
151+
}
152+
}
153+
154+
///Events
155+
icon_1.addEventListener( "click", ()=> {
156+
if ( state_1 === "menu" ) {
157+
openMenuAnimation_1();
158+
state_1 = "arrow";
159+
arrowDisappearComplete_1 = false;
160+
menuAppearComplete_1 = false;
161+
} else if ( state_1 === "arrow" ) {
162+
closeMenuAnimation_1();
163+
state_1 = "menu";
164+
menuDisappearComplete_1 = false;
165+
arrowAppearComplete_1 = false;
166+
}
167+
});
168+
169+
170+
// Cursor
171+
document.addEventListener("DOMContentLoaded", function(event) {
172+
var cursor = document.querySelector(".custom-cursor");
173+
var links = document.querySelectorAll("a, button, #nav-btn, input.btn");
174+
175+
var initCursor = false;
176+
177+
for (var i = 0; i < links.length; i++) {
178+
var selfLink = links[i];
179+
180+
selfLink.addEventListener("mouseover", function() {
181+
cursor.classList.add("custom-cursor--link");
182+
});
183+
selfLink.addEventListener("mouseout", function() {
184+
cursor.classList.remove("custom-cursor--link");
185+
});
186+
}
187+
188+
189+
window.onmousemove = function(e) {
190+
var mouseX = e.clientX;
191+
var mouseY = e.clientY;
192+
193+
if (!initCursor) {
194+
// cursor.style.opacity = 1;
195+
TweenLite.to(cursor, 0.5, {
196+
opacity: 1
197+
});
198+
initCursor = true;
199+
}
200+
201+
TweenLite.to(cursor, 0, {
202+
top: mouseY + "px",
203+
left: mouseX + "px"
204+
});
205+
};
206+
207+
window.ontouchmove = function(e) {
208+
var mouseX = e.touches[0].clientX;
209+
var mouseY = e.touches[0].clientY;
210+
if (!initCursor) {
211+
// cursor.style.opacity = 1;
212+
TweenLite.to(cursor, 0.3, {
213+
opacity: 1
214+
});
215+
initCursor = true;
216+
}
217+
218+
TweenLite.to(cursor, 0, {
219+
top: mouseY + "px",
220+
left: mouseX + "px"
221+
});
222+
};
223+
224+
window.onmouseout = function(e) {
225+
TweenLite.to(cursor, 0.3, {
226+
opacity: 0
227+
});
228+
initCursor = false;
229+
};
230+
231+
window.ontouchstart = function(e) {
232+
TweenLite.to(cursor, 0.3, {
233+
opacity: 1
234+
});
235+
};
236+
237+
window.ontouchend = function(e) {
238+
setTimeout( function() {
239+
TweenLite.to(cursor, 0.3, {
240+
opacity: 0
241+
});
242+
}, 200);
243+
};
244+
245+
});
246+

0 commit comments

Comments
 (0)