페이지가 새로 고쳐지 자마자 실행되는 순간 화면 밖에서 움직이는 텍스트가 있습니다. 햄버거 아이콘을 클릭하면 호출되는 기능이 필요합니다. 그런 다음 아이콘을 열고 다시 클릭하면 가능한 경우 첫 번째 문자 (C)가 처음으로 돌아와서 기능이 반전되기를 원합니다.
jQuery("#button").click(function() {
jQuery(".line1").toggleClass("open1");
jQuery(".line2").toggleClass("open2");
jQuery(".line3").toggleClass("open3");
});
(function text_loop(i) {
setTimeout(function() {
if (i <= 15)
$("#logo_text span").eq(i).addClass("slide_out");
i++;
text_loop(i);
}, 100);
})(0);
#burger_container {
background-color: #404041;
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 60px;
z-index: 101;
}
svg {
margin: 20px auto 0 auto;
display: block;
}
#logo_text {
transform: rotate(-90deg);
margin-top: 350px;
font-size: 40px;
color: #ffffff;
font-weight: 700;
}
#logo_text span {
font-weight: 400;
position: relative;
top: 0;
transition: top 1s ease;
}
#logo_text span.slide_out {
top: -60px;
transition: top 0.5s ease;
}
.line1,
.line2,
.line3 {
transition: all 0.3s ease;
}
.open1 {
transform-origin: top left;
transform: translatex(3px) translatey(-1px) rotate(45deg);
width: 33px;
}
.open2 {
opacity: 0;
}
.open3 {
transform-origin: bottom left;
transform: translatex(3px) translatey(1px) rotate(-45deg);
width: 33px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id="burger_container">
<div>
<svg id="button" style="height: 26px; width: 26px;">
<g style="" fill="#f04d43">
<rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
<rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
<rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
</g>
</svg>
<div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span> <span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
</div>
</div>
그것을 함수로 호출하면 setTimeout
if 문에서 중괄호로 감싸지 않습니다.
jQuery("#button").click(function() {
jQuery(".line1").toggleClass("open1");
jQuery(".line2").toggleClass("open2");
jQuery(".line3").toggleClass("open3");
var currentClass = $("#logo_text span").eq(0).attr('class');
if(currentClass === undefined || currentClass == "slide_in") {
text_loop(0, 'slide_out');
}
else {
text_loop(0, 'slide_in');
}
});
function text_loop(i, classname) {
setTimeout(function() {
if(i <= 15) {
$("#logo_text span").eq(i).attr('class', classname);
i++;
text_loop(i, classname);
}
}, 100);
}
#burger_container {
background-color: #404041;
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 60px;
z-index: 101;
}
svg {
margin: 20px auto 0 auto;
display: block;
}
#logo_text {
transform: rotate(-90deg);
margin-top: 350px;
font-size: 40px;
color: #ffffff;
font-weight: 700;
}
#logo_text span {
font-weight: 400;
position: relative;
top: 0;
transition: top 1s ease;
}
#logo_text span.slide_out {
top: -60px;
transition: top 0.5s ease;
}
#logo_text span.slide_in {
top: 0px;
transition: top 0.5s ease;
}
.line1,
.line2,
.line3 {
transition: all 0.3s ease;
}
.open1 {
transform-origin: top left;
transform: translatex(3px) translatey(-1px) rotate(45deg);
width: 33px;
}
.open2 {
opacity: 0;
}
.open3 {
transform-origin: bottom left;
transform: translatex(3px) translatey(1px) rotate(-45deg);
width: 33px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id="burger_container">
<div>
<svg id="button" style="height: 26px; width: 26px;">
<g style="" fill="#f04d43">
<rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
<rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
<rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
</g>
</svg>
<div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span> <span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다