1873
No
이 코드를 사용하여 div를 흔들어
$('.target').effect( 'shake', {times:4}, 1000 ); 수직으로 흔들고 흔들림의 높이도 설정할 수 있습니까?
- 도움이 되나요?-jsfiddle.net/HjFUK/87 ??
- 수직 흔들림은 다음과 같이 적용될 수 있습니다. $('.target').effect('bounce')
- @ABFORCE Shake Effect는 수직 이동도 지원하므로 반드시 그런 것은 아닙니다.
- @Itay : 당신 말이 맞지만 이것은 지름길입니다
다음과 같은 옵션을 설정할 수 있습니다. direction 과 distance Shake Effect API에 나와 있습니다.
$('.target').effect( 'shake', { direction: 'up', times: 4, distance: 10}, 1000 ); jsFiddle 데모
Shake Effect API
방향 (기본값 : "왼쪽")
유형: 문자열 "left"또는 "right"값은 요소를 수평으로 흔들고 "up"또는 "down"값은 요소를 수직으로 흔들 것입니다. 이 값은 효과의 첫 번째 단계에서 요소가 축을 따라 이동해야하는 방향을 지정합니다.
거리 (기본값 : 20)
유형: 번호 흔들릴 거리.
간단한 jQuery 및 JavaScript 지식을 사용하여 수행하는 방법은 다음과 같습니다. setInterval:
jQuery.fn.shake = function() { $el = $(this); setInterval(function(){ if ($el.hasClass('shake')) { $el.removeClass('shake'); } else { $el.addClass('shake'); }; }, 320); }; $('.button').shake(); 클래스 추가 및 제거는 DOM에서 속성을 수정하는 것보다 적은 리소스를 사용합니다. 그리고 우리는 또한 우리에 적용된 CSS 전환을 활용할 수 있습니다. .button:
.button { margin-top: 0; -webkit-transition: margin-top 300ms ease-out; -moz-transition: margin-top 300ms ease-out; -o-transition: margin-top 300ms ease-out; transition: margin-top 300ms ease-out; } .button.shake { margin-top: 15px; } 마지막 메모는 .button 요소는 div에 배치됩니다. position: absolute 그래서 그 아래의 모든 것을 밀지 않습니다.
Jquery 또는 CSS에서이 작업을 수행 할 수 있습니다.
1.jQuery 이 플러그인 사용 :
http://jackrugile.com/jrumble/
2.CSS
http://elrumordelaluz.github.io/csshake/
도움이 되었기를 바랍니다.
jQueryUI가 필요하고 라이브러리를 포함하고 싶지 않기 때문에 밑줄을 사용하는 솔루션이 있습니다 (밑줄을 사용하는 경우)
_(4).times(function(n){ _.delay(function(){ $('element').css('margin-left', (((n+1)%2)*5)+'px'); }, n*70); }); A / 순수 CSS, JS 종속성 없음-마우스를 올리면 흔들림 :
.target:hover{ animation: shake 0.5s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 25% { transform: translate(-1px, -2px) rotate(-1deg); } 50% { transform: translate(1px, -1px) rotate(1deg); } 75% { transform: translate(3px, 1px) rotate(-1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } B / jQuery로 제어-흔들기 시작 click, 중지 mouseout:
$('.target').on('click', function(){ $(this).css({ 'animation' : 'shake 0.5s', 'animation-iteration-co
출처 :
JQuery 쉐이크를 사용하여 div를 수직으로 쉐이크하는 방법
https://ko.ntcdoon.org/568947-how-to-shake-a-div-DXKLXA
샘플
1.설정
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function(){
$(".portfolio-item" ).on("mouseover", function(){
$(this).effect('bounce',{ direction:'left', times:1, distance: 3},100, callback);
});
});
function callback() {
}
</script>
2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>샘플</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<link href="css/styles.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">
샘플
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
메뉴
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#services"><span>홍길동</span>님 안녕하세요!</a></li>
<li class="nav-item"><a class="btn btn-primary btn-xl text-uppercase btn-custom" href="#portfolio">로그아웃</a></li>
</ul>
</div>
</div>
</nav>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">샘플</h2>
<h3 class="section-subheading text-muted"> </h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 1-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/1.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Threads</div>
<div class="portfolio-caption-subheading text-muted">Illustration</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 2-->
<div class="portfolio-item" >
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/2.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Explore</div>
<div class="portfolio-caption-subheading text-muted">Graphic Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 3-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/3.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Finish</div>
<div class="portfolio-caption-subheading text-muted">Identity</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<!-- Portfolio item 4-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/4.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Lines</div>
<div class="portfolio-caption-subheading text-muted">Branding</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<!-- Portfolio item 5-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Southwest</div>
<div class="portfolio-caption-subheading text-muted">Website Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<!-- Portfolio item 6-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/6.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Window</div>
<div class="portfolio-caption-subheading text-muted">Photography</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About-->
<!-- Footer-->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
</div>
</div>
</footer>
<!-- Portfolio Modals-->
<!-- Portfolio item 1 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Threads
</li>
<li>
<strong>Category:</strong>
Illustration
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 2 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/2.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Explore
</li>
<li>
<strong>Category:</strong>
Graphic Design
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 3 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/3.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Finish
</li>
<li>
<strong>Category:</strong>
Identity
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 4 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/4.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Lines
</li>
<li>
<strong>Category:</strong>
Branding
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 5 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/5.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Southwest
</li>
<li>
<strong>Category:</strong>
Website Design
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 6 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/6.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Window
</li>
<li>
<strong>Category:</strong>
Photography
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/scripts.js"></script>
<script>
$(function(){
$(".portfolio-item" ).on("mouseover", function(){
$(this).effect('bounce',{ direction:'left', times:1, distance: 3},100, callback);
});
});
function callback() {
}
</script>
</body>
</html>
댓글 ( 4)
댓글 남기기