패럴랙스안건에 넘나좋은 플러그인 발견
예시사이트에 찾은 플러그인 ,,오엠지 감사합니다,,
덕분에 머리깨질일은 없네영
찾아보니까 한국에서는 잘 안쓰는? 안유명한가보다,,
다들 그냥 바닐라로 만든느거겟지,,
난아직 익숙하지않아서,,,,,,모테!!!!
https://min30327.github.io/luxy.js/
Luxy.js｜Inertia scroll and parallax effect plugin in Vanilla.js
Usage Wrap the entire content with the element specified in the wrapper option. Please exclude fixed elements. ... Entire content Add .luxy-el to the element for which parallax effect is to be specified. Specify the speed of the parallax effect with the da
min30327.github.io
깃허브들어가보니까 무려 5년전에만든ㄴ거네
심지어 일본사람이 만들었어! 그래서 일본에서만 쓰이는건가(아닐수도..)
燕三条製包丁の藤次郎株式会社｜TOJIRO JAPAN
tojiro.net
위에 사이트에서 참고하면서 한번 만들어봐야지
일단 다운로드 해주고 HTML을작성
나는 제이쿼리좋아하니까 제이쿼리도가져오고.
<body>
<div id="luxy">
<article>
<div class="l-kv__txt1 inside luxy-fixed lazyloaded">
<p class="en">
<span>FROM TSUBAME-SANJO <br class="sp-only" />TO THE WORLD</span>
</p>
<h2 class="h"><span class="t1">燕三条から</span><span class="t2">世界へ</span></h2>
</div>
</article>
<article>
<div class="l-kv__txt1 lazyloaded">
<p class="en">FROM TSUBAME-SANJO <br class="sp-only" />TO THE WORLD</p>
</div>
</article>
<article>
<div class="luxy-el" data-speed-y="5" data-offset="-50"></div>
</article>
</div>
<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/luxy.js"></script>
<script src="js/main.js"></script>
</body>
참고사이트에서 HTML뺏겨와서 클래스명같은게 내스탈이아님
속도나 위치 등을 세밀하게 지정할 수 있는 옵션도 따로 있다
| data-offset | 픽셀 단위의 오프셋(좌표, 표시 위치)을 지정 |
| data-speed-y | 세로 병렬 스크롤 효과의 속도를 지정 |
| data-horizontal | '1'로 설정하면 수평 시차 스크롤을 활성화 |
| data-speed-x | 수평 병렬 스크롤 효과의 속도를 지정 |
// inertia scroll
var _ua = window.navigator.userAgent.toLowerCase();
var isTablet = /(windows.*touch.*tablet pc)|ipad|(android(?!.*mobile))|(firefox.*tablet)|kindle|silk|playbook/i.test(_ua);
var isMobile = /(windows.*phone)|iphone|ipod|(android(?!.*mobile))|(firefox.*mobile)|blackberry/i.test(_ua);
luxy.init({
wrapperSpeed: isMobile || isTablet ? 1 : 0.1
});
$(document).ready(function() {
var luxySettings = {
wrapperSpeed: 0.1,
target: '#luxy',
};
luxy.init(luxySettings);
var firstArticleHeight = $('article:first-child').height();
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop < firstArticleHeight) {
$('article:first-child h2').css('top', scrollTop);
} else {
$('article:first-child h2').css('top', firstArticleHeight);
}
});
});
그리고 JS로 따로 설정해주는방법도있는거같다
GPT한테물어보거나 참고사이트에서 뜯어왔지만 ,,ㅎ
GPT에게 물어보면 물어볼수록 실력이 감퇴되는거같다,,,,,,,,큰일이다,,
안쓰도록 하겠슴다,!(거짃말)
ㅇㅣ제 패럴랙스따위 두렵지않,,다!
💥추가💥
gsap이랑 같이 쓸라고 했더니......작동안됨............썅~~~~~~~~~
어쩜이리 맘대로 안되는걸까