Skip to content

Commit

Permalink
added footer text effect, cursor animation, minor changes to all the …
Browse files Browse the repository at this point in the history 
…div,added indian flag
  • Loading branch information
@Somraj-234
Somraj-234 committed Jul 16, 2024
1 parent 17778a7 commit 2f6daa7
Show file tree
Hide file tree
Showing 4 changed files with 354 additions and 68 deletions.
Binary file added img/indian_flag.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 71 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
<title>Obys Agency</title>
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sheryjs/dist/Shery.css" /> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aayushchouhan24/sheryjs@main/dist/Shery.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet"/>
<!-- animate css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="crsr"></div>
<div class="mousefollower"></div>
<!-- <div id="crsr"></div> -->
<!-- <div class="mousefollower"></div> -->
<div id="loader">
<div class="line">
<div id="line1-part1">
Expand Down Expand Up @@ -63,6 +64,7 @@ <h2>Graphic</h2>
<div class="hero" id="hero4">
<h1>Experince</h1>
</div>
<img id="flag" src="./img/indian_flag.png" alt="">
</div>
<div id="page2" data-scroll data-scroll-speed="-1.4">
<div id="video-container">
Expand All @@ -77,15 +79,33 @@ <h1>Experince</h1>
<h1>Our Projects</h1>
<div class="underline"></div>
<div id="img-div-container">
<div class="image-div">
<img src="./img/Olga_Prudka_1.jpeg" alt="">
<img src="./img/Olga_Prudka_2.jpeg" alt="">
<div id="f1-container" class="img-text">
<h2 id="head">Olga Prudka</h2>
<div id="first-img" class="image-div">
<img src="./img/Olga_Prudka_1.jpeg" alt="">
<img src="./img/Olga_Prudka_2.jpeg" alt="">
</div>
<div class="txt">
<h2>Logo design, Website design, Development </h2>
<h2>2023</h2>
</div>
<div class="underline"></div>
</div>
<div class="image-div">
<img src="./img/AIM-1.jpeg" alt="">
<img src="./img/AIM-2.jpeg" alt="">

<div class="img-text">
<h2 id="head">AIM</h2>
<div class="image-div">
<img src="./img/AIM-1.jpeg" alt="">
<img src="./img/AIM-2.jpeg" alt="">
</div>
<div class="txt">
<h2>Logo design, Website design, Development </h2>
<h2>2024</h2>
</div>
<div class="underline"></div>
</div>


<div class="page3-circle">
<svg class="button__arrow" viewBox="0 0 91 118" fill="none">
<path d="M15.2307 57.4152L15.9378 56.708L15.2307 56.0009L14.5236 56.708L15.2307 57.4152ZM34.9813 77.1658L34.2742 77.8729L35.9813 79.58L35.9813 77.1658L34.9813 77.1658ZM0.151478 72.4944L-0.555622 71.7873L-1.26273 72.4944L-0.555622 73.2015L0.151478 72.4944ZM45.29 117.633L44.5828 118.34L45.29 119.047L45.9971 118.34L45.29 117.633ZM60.3692 102.554L61.0763 103.261L61.7839 102.553L61.0758 101.846L60.3692 102.554ZM60.3685 102.553L59.6614 101.846L58.9538 102.553L59.6619 103.261L60.3685 102.553ZM90.427 72.4944L91.1341 73.2015L91.8412 72.4944L91.1341 71.7873L90.427 72.4944ZM75.3478 57.4152L76.0549 56.7081L75.3478 56.001L74.6407 56.7081L75.3478 57.4152ZM56.3065 76.4565L55.3065 76.4565L55.3065 78.8707L57.0136 77.1636L56.3065 76.4565ZM56.3065 0.120074L57.3065 0.120074L57.3065 -0.879926L56.3065 -0.879926L56.3065 0.120074ZM34.9813 0.120076L34.9813 -0.879924L33.9813 -0.879924L33.9813 0.120076L34.9813 0.120076ZM14.5236 58.1223L34.2742 77.8729L35.6884 76.4587L15.9378 56.708L14.5236 58.1223ZM0.858585 73.2015L15.9378 58.1223L14.5236 56.708L-0.555622 71.7873L0.858585 73.2015ZM45.9971 116.926L0.858585 71.7873L-0.555622 73.2015L44.5828 118.34L45.9971 116.926ZM59.662 101.846L44.5828 116.926L45.9971 118.34L61.0763 103.261L59.662 101.846ZM59.6619 103.261L59.6625 103.261L61.0758 101.846L61.0751 101.845L59.6619 103.261ZM61.0756 103.26L91.1341 73.2015L89.7199 71.7873L59.6614 101.846L61.0756 103.26ZM91.1341 71.7873L76.0549 56.7081L74.6407 58.1223L89.7199 73.2015L91.1341 71.7873ZM74.6407 56.7081L55.5994 75.7494L57.0136 77.1636L76.0549 58.1223L74.6407 56.7081ZM57.3065 76.4565L57.3065 0.120074L55.3065 0.120074L55.3065 76.4565L57.3065 76.4565ZM56.3065 -0.879926L34.9813 -0.879924L34.9813 1.12008L56.3065 1.12007L56.3065 -0.879926ZM33.9813 0.120076L33.9813 77.1658L35.9813 77.1658L35.9813 0.120076L33.9813 0.120076Z" fill="currentColor"></path></svg>
Expand All @@ -104,14 +124,33 @@ <h1>Our Projects</h1>
</div>
</div>

<div class="image-div">
<img src="./img/OCHI.jpeg" alt="">
<img src="./img/OCHI_2-1.jpeg" alt="">
</div>
<div class="image-div">
<img src="./img/Laxer_1-2.jpeg" alt="">
<img src="./img/Laxer_2.jpeg" alt="">
</div>
<div id="f3-container" class="img-text">
<h2 id="head">OCHI</h2>
<div class="image-div">
<img src="./img/OCHI.jpeg" alt="">
<img src="./img/OCHI_2-1.jpeg" alt="">
</div>
<div class="txt">
<h2>Website design, Development </h2>
<h2>2022</h2>
</div>
<div class="underline"></div>
</div>

<div id="f4-container" class="img-text">
<h2 id="head">David Laxer</h2>
<div class="image-div">
<img src="./img/Laxer_1-2.jpeg" alt="">
<img src="./img/Laxer_2.jpeg" alt="">
</div>
<div class="txt">
<h2>Website design, Development </h2>
<h2>2022</h2>
</div>
<div class="underline"></div>
</div>


</div>


Expand Down Expand Up @@ -218,7 +257,10 @@ <h1><span>Partners</span> - Science - Travel - </h1>
</div>
</div>
<div id="footer" data-scroll data-scroll-speed="-1.4">
<h1>Let's Create</h1>
<div id="footer-text">
<h1>Let's Create</h1>
<h2>Let's Create</h1>
</div>
<div class="underline"></div>
<div id="footer-div">
<div class="box">
Expand All @@ -238,7 +280,7 @@ <h5>India</h5>
</div>
<div class="box">
<h6>Say Hi!</h6>
<h5>[email protected]</h5>
<h5 id="email">[email protected]</h5>
</div>
</div>
<div class="underline">
Expand All @@ -255,6 +297,16 @@ <h6>Obys agency ©️ 2024</h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.155.0/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/aayushchouhan24/sheryjs@main/dist/Shery.js"></script>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!-- lettering js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js" integrity="sha512-VJ/iYbiu1eJ6yLimfTi65t2R9TFcG5D9X8ZCfbbEFhTfPnKJh8byoKXEawi5ScJZBYL1eiirL1+MczZDx0Tz9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- textillate js -->
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/jquery.textillate.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/TextPlugin.min.js"></script>

<script src="script.js"></script>
</body>
</html>
Expand Down
139 changes: 131 additions & 8 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ tl.from("#line1-part1, .line h2", {
//hide loader
tl.to("#loader",{
opacity:0,
duration:0.2, //0.2
delay:4 //4
duration:0, //0.2
delay:0 //4
});
tl.from("#page1",{
delay:0.2,
Expand Down Expand Up @@ -111,13 +111,17 @@ function cursorAnimation(){
Shery.mouseFollower({
//Parameters are optional.
// skew: true,
// ease: "cubic-bezier(0.23, 1, 0.320, 1)",
// duration: 1,
ease: "cubic-bezier(0.23, 1, 0.320, 1)",
duration: 1,
});

Shery.makeMagnet("#nav-part2 h4",{});

var video = document.querySelector("#video-container video");
Shery.makeMagnet("#nav-part2 h4",{});


//video play button animation

var video = document.querySelector("#video-container video");

var videoContainer = document.querySelector("#video-container")
videoContainer.addEventListener("mouseenter",function(){
Expand All @@ -142,6 +146,8 @@ videoContainer.addEventListener("mouseleave",function(){
})


//play pause button animation

var flag = 0


Expand All @@ -166,16 +172,133 @@ var flag = 0
})
}


//gooey effect
function sheryAnimation(){
Shery.imageEffect(".image-div",{
style: 5,
// debug: true,
config:{"a":{"value":2,"range":[0,30]},"b":{"value":0.25,"range":[-1,1]},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":0.7241195864976497},"ignoreShapeAspect":{"value":true},"shapePosition":{"value":{"x":0,"y":0}},"shapeScale":{"value":{"x":0.5,"y":0.5}},"shapeEdgeSoftness":{"value":0,"range":[0,0.5]},"shapeRadius":{"value":0,"range":[0,2]},"currentScroll":{"value":0},"scrollLerp":{"value":0.07},"gooey":{"value":true},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"durationOut":{"value":1,"range":[0.1,5]},"durationIn":{"value":1.5,"range":[0.1,5]},"displaceAmount":{"value":0.5},"masker":{"value":true},"maskVal":{"value":1.09,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":1},"noEffectGooey":{"value":true},"onMouse":{"value":1},"noise_speed":{"value":0.2,"range":[0,10]},"metaball":{"value":0.56,"range":[0,2]},"discard_threshold":{"value":0.5,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.5,"range":[0,2]},"noise_scale":{"value":10.69,"range":[0,100]}},
config:{"a":{"value":1.6,"range":[0,30]},"b":{"value":0.6,"range":[-1,1]},"zindex":{"value":"--9996999","range":[-9999999,9999999]},"aspect":{"value":0.7333170413977421},"ignoreShapeAspect":{"value":true},"shapePosition":{"value":{"x":0,"y":0}},"shapeScale":{"value":{"x":0.5,"y":0.5}},"shapeEdgeSoftness":{"value":0,"range":[0,0.5]},"shapeRadius":{"value":0,"range":[0,2]},"currentScroll":{"value":0},"scrollLerp":{"value":0.07},"gooey":{"value":true},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"durationOut":{"value":1,"range":[0.1,5]},"durationIn":{"value":1.5,"range":[0.1,5]},"displaceAmount":{"value":0.5},"masker":{"value":true},"maskVal":{"value":1,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":1},"noEffectGooey":{"value":false},"onMouse":{"value":1},"noise_speed":{"value":0.23,"range":[0,10]},"metaball":{"value":0.7,"range":[0,2]},"discard_threshold":{"value":0.62,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.5,"range":[0,2]},"noise_scale":{"value":10,"range":[0,100]}},
gooey: true,
});
}



//flag animation
document.addEventListener("mousemove",function(dets){
gsap.to("#flag",{
x:dets.x,
y:dets.y
})
})

document.querySelector("#hero3").addEventListener("mouseenter",function(){
gsap.to("#flag",{
opacity:1
})
})

document.querySelector("#hero3").addEventListener("mouseleave",function(){
gsap.to("#flag",{
opacity:0

})
})


// $(document).ready(function() {
// // Initialize Textillate
// $('#footer-fill, #footer-stroke').textillate({
// in: { effect: 'fadeIn' },
// out: { effect: 'fadeOut' },
// loop: false
// });

// const container = document.querySelector(".text-container");
// const fillText = document.querySelector("#footer-fill");
// const strokeText = document.querySelector("#footer-stroke");

// container.addEventListener("mouseenter", function() {
// gsap.to(fillText, { opacity: 0, duration: 0.5 });
// gsap.to(strokeText, { opacity: 1, duration: 0.5 });
// $('#footer-fill').textillate('out');
// $('#footer-stroke').textillate('in');
// });

// container.addEventListener("mouseleave", function() {
// gsap.to(fillText, { opacity: 1, duration: 0.5 });
// gsap.to(strokeText, { opacity: 0, duration: 0.5 });
// $('#footer-fill').textillate('in');
// $('#footer-stroke').textillate('out');
// });
// });



// document.addEventListener('DOMContentLoaded', function() {
// const container = document.querySelector(".text-container");
// const fillText = document.querySelector("#footer-fill");
// const strokeText = document.querySelector("#footer-stroke");

// container.addEventListener("mouseenter", function() {
// gsap.to(fillText, { opacity: 0, duration: 0.5 });
// gsap.to(strokeText, { opacity: 1, duration: 0.5 });
// });

// container.addEventListener("mouseleave", function() {
// gsap.to(fillText, { opacity: 1, duration: 0.5 });
// gsap.to(strokeText, { opacity: 0, duration: 0.5 });
// });
// });



// $('#footer-stroke').textillate({ in: { effect: 'rollIn' } });


function footerAnimation() {

var clutter = ""
var clutter2 = ""
document.querySelector("#footer h1").textContent.split("").forEach(function (elem) {
clutter += `<span>${elem}</span>`
})
document.querySelector("#footer h1").innerHTML = clutter
document.querySelector("#footer h2").textContent.split("").forEach(function (elem) {
clutter2 += `<span>${elem}</span>`
})
document.querySelector("#footer h2").innerHTML = clutter2


document.querySelector("#footer-text").addEventListener("mouseenter", function () {
gsap.to("#footer h1 span", {
opacity: 0,
stagger: 0.05
})
gsap.to("#footer h2 span", {
delay: 0.35,
opacity: 1,
stagger: 0.1
})
})
document.querySelector("#footer-text").addEventListener("mouseleave", function () {
gsap.to("#footer h1 span", {
opacity: 1,
stagger: 0.1,
delay: 0.35,

})
gsap.to("#footer h2 span", {
opacity: 0,
stagger: 0.05
})
})
}


loadingAnimation();
cursorAnimation();
locomotiveAnimation();
sheryAnimation();
sheryAnimation();
footerAnimation()
Loading

0 comments on commit 2f6daa7

Please sign in to comment.