01.hover-ぽよん
View more
02.hover-テキスト回転
View more
View more
03.hover-テキスト回転+背景
View more
View more
04.hover-テキスト回転+ぽよん
View more
View more
05.hover-テキスト回転+背景出現(ラウンド)
View more
View more
×
<a class="btn-body-1" href="">
<span class="btn-text-1">View more</span>
</a>
import { gsap, TweenMax, Back } from "gsap";
const box = document.querySelectorAll(".btn-body-1");
const pointer = document.querySelectorAll(".btn-text-1");
let index;
box.forEach((target) => {
target.addEventListener("mouseenter", () => {
target.addEventListener("mousemove", linkMove);
function linkMove(e) {
index = [].slice.call(box).indexOf(target);
var target_rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - target_rect.left;
var y = e.clientY - target_rect.top;
//ベース
TweenMax.to(target, 0.9, { ease: Back.easeOut, left: (target.clientWidth / 2 - x) / -5, top: (target.clientHeight / 2 - y) / -5 });
//ポインター
TweenMax.to(pointer[index], 0.5, { ease: Back.easeOut, left: (target.clientWidth / 2 - x) / -5, top: (target.clientHeight / 2 - y) / -5 });
}
target.addEventListener("mouseleave", () => {
//index = [].slice.call(box).indexOf(m_box);
target.removeEventListener("mousemove", linkMove);
//ベース
TweenMax.to(target, 0.9, { ease: Back.easeOut, left: 0, top: 0 });
//ポインター
TweenMax.to(pointer[index], 0.5, { ease: Back.easeOut, left: 0, top: 0 });
});
});
});
<a class="btn-body-2" href="">
<span class="btn-text-2 enter-t1"><span>View more</span></span>
<span class="btn-text-2 enter-t2"><span>View more</span></span>
</a>
import { gsap, TweenMax, Power1 } from "gsap";
const box2 = document.querySelectorAll(".btn-body-2");
const enterT1 = document.querySelectorAll(".enter-t1 span");
const enterT2 = document.querySelectorAll(".enter-t2 span");
let index;
TweenMax.to(enterT1, 0, { ease: Power1.easeOut, top: -50 });
box2.forEach((target) => {
target.addEventListener("mouseover", () => {
target.addEventListener("mouseenter", linkMove);
function linkMove(e) {
index = [].slice.call(box2).indexOf(target);
var target_rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - target_rect.left;
var y = e.clientY - target_rect.top;
TweenMax.fromTo(enterT1[index], 0.5, { ease: Power1.easeOut, top: -50 }, { ease: Power1.easeOut, top: 0 });
TweenMax.fromTo(enterT2[index], 0.5, { ease: Power1.easeOut, top: 0 }, { ease: Power1.easeOut, top: 50 });
}
});
});
<a class="btn-body-3" href="">
<span class="btn-text-3 enter-t1-2"><span>View more</span></span>
<span class="btn-text-3 enter-t2-2"><span>View more</span></span>
<span class="btn-bg-3"></span>
</a>
import { gsap, TweenMax, Power1 } from "gsap";
const box3 = document.querySelectorAll(".btn-body-3");
const enterT1_2 = document.querySelectorAll(".enter-t1-2 span");
const enterT2_2 = document.querySelectorAll(".enter-t2-2 span");
const box_bg3 = document.querySelectorAll(".btn-bg-3");
let index;
TweenMax.to(enterT1_2, 0, { ease: Power1.easeOut, top: 50, rotate: -15 });
TweenMax.to(box_bg3, 0, { ease: Power1.easeOut, top: 150, rotate: -15 });
box3.forEach((target) => {
target.addEventListener("mouseover", () => {
target.addEventListener("mouseenter", linkMove);
function linkMove(e) {
index = [].slice.call(box3).indexOf(target);
var target_rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - target_rect.left;
var y = e.clientY - target_rect.top;
TweenMax.fromTo(box3[index], 0.5, { ease: Power1.easeOut, scale: 1 }, { ease: Power1.easeOut, scale: 0.95 });
TweenMax.fromTo(enterT1_2[index], 0.5, { ease: Power1.easeOut, top: 50, rotate: -15 }, { ease: Power1.easeOut, top: 0, rotate: 0 });
TweenMax.fromTo(enterT2_2[index], 0.5, { ease: Power1.easeOut, top: 0, rotate: 0 }, { ease: Power1.easeOut, top: -50, rotate: -15 });
TweenMax.fromTo(box_bg3[index], 0.5, { ease: Power1.easeOut, top: 150, rotate: 0 }, { ease: Power1.easeOut, top: 0, rotate: 0 });
TweenMax.fromTo(enterT1_2[index], 0.5, {}, { color: "#fff" });
}
});
target.addEventListener("mouseleave", () => {
TweenMax.fromTo(box_bg3[index], 0.5, { ease: Power1.easeOut, top: 0, rotate: 0 }, { ease: Power1.easeOut, top: -150, rotate: 2.5 });
TweenMax.fromTo(enterT1_2[index], 0.5, { color: "#fff" }, { color: "#222" });
TweenMax.fromTo(box3[index], 0.5, { ease: Power1.easeOut, scale: 0.95 }, { ease: Power1.easeOut, scale: 1 });
});
});
.btn-body-3 {
display: inline-block;
width: 200px;
height: 40px;
padding: 30px;
background: #eee;
position: relative;
border-radius: 100px;
text-decoration: none;
overflow: hidden;
z-index: 1;
border: 2px solid #222;
}
.btn-text-3 {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
color: #111;
display: inline-block;
overflow: hidden;
z-index: 3;
span {
display: inline-block;
position: relative;
}
}
.btn-bg-3 {
background: #222;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
<a class="btn-body-4" href="">
<span class="btn-text-4 enter-t1-4"><span>View more</span></span>
<span class="btn-text-4 enter-t2-4"><span>View more</span></span>
</a>
import { gsap, TweenMax, Back, Power1 } from "gsap";
const box4 = document.querySelectorAll(".btn-body-4");
const enterT1_4 = document.querySelectorAll(".enter-t1-4 span");
const enterT2_4 = document.querySelectorAll(".enter-t2-4 span");
let index;
TweenMax.to(enterT1_4, 0, { ease: Power1.easeOut, top: 50, rotate: -15 });
box4.forEach((target) => {
target.addEventListener("mouseover", () => {
target.addEventListener("mouseenter", linkMove);
function linkMove(e) {
index = [].slice.call(box4).indexOf(target);
var target_rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - target_rect.left;
var y = e.clientY - target_rect.top;
TweenMax.fromTo(enterT1_4[index], 0.5, { ease: Power1.easeOut, top: 50, rotate: -15 }, { ease: Power1.easeOut, top: 0, rotate: 0 });
TweenMax.fromTo(enterT2_4[index], 0.5, { ease: Power1.easeOut, top: 0, rotate: 0 }, { ease: Power1.easeOut, top: -50, rotate: -15 });
}
target.addEventListener("mousemove", linkMove2);
function linkMove2(e) {
index = [].slice.call(box4).indexOf(target);
var target_rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - target_rect.left;
var y = e.clientY - target_rect.top;
//ベース
TweenMax.to(target, 0.9, { ease: Back.easeOut, left: (target.clientWidth / 2 - x) / -5, top: (target.clientHeight / 2 - y) / -5, rotate: (target.clientWidth / 2 - x) * 0.05 });
}
target.addEventListener("mouseleave", () => {
//index = [].slice.call(box).indexOf(m_box);
target.removeEventListener("mousemove", linkMove);
//ベース
TweenMax.to(target, 0.9, { ease: Back.easeOut, left: 0, top: 0, rotate: 0 });
//ポインター
//TweenMax.fromTo(enterT1_4[index], 0.5, { color: "#fff" }, { color: "#222" });
TweenMax.fromTo(box4[index], 0.5, { ease: Power1.easeOut, scale: 0.95 }, { ease: Power1.easeOut, scale: 1 });
});
});
});
.btn-body-4 {
display: inline-block;
width: 200px;
height: 40px;
padding: 30px;
background: #111;
position: relative;
border-radius: 100px;
text-decoration: none;
overflow: hidden;
z-index: 1;
border: 2px solid #222;
}
.btn-text-4 {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
color: #eee;
display: inline-block;
overflow: hidden;
z-index: 3;
span {
display: inline-block;
position: relative;
}
}
<a class="btn-body-5" href="">
<span class="btn-text-5 enter-t1-5"><span>View more</span></span>
<span class="btn-text-5 enter-t2-5"><span>View more</span></span>
<span class="btn-bg-5"></span>
</a>
.btn-body-5 {
display: inline-block;
width: 200px;
height: 40px;
padding: 30px;
background: rgb(103, 121, 219);
position: relative;
text-decoration: none;
overflow: hidden;
z-index: 1;
}
.btn-text-5 {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
color: #fff;
display: inline-block;
overflow: hidden;
z-index: 3;
span {
display: inline-block;
position: relative;
}
}
.btn-bg-5 {
background: rgb(82, 96, 174);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
import { gsap, TweenMax, Power1 } from "gsap";
const box5 = document.querySelectorAll(".btn-body-5");
const enterT1_5 = document.querySelectorAll(".enter-t1-5 span");
const enterT2_5 = document.querySelectorAll(".enter-t2-5 span");
const box_bg5 = document.querySelectorAll(".btn-bg-5");
let index;
TweenMax.to(enterT1_5, 0, { ease: Power1.easeOut, top: 50, rotate: 0 });
TweenMax.to(box_bg5, 0, { ease: Power1.easeOut, top: 150, borderRadius: 200, scale: 1.2 });
box5.forEach((target) => {
target.addEventListener("mouseover", () => {
target.addEventListener("mouseenter", linkMove);
function linkMove(e) {
index = [].slice.call(box5).indexOf(target);
var target_rect = e.currentTarget.getBoundingClientRect();
var x = e.clientX - target_rect.left;
var y = e.clientY - target_rect.top;
TweenMax.fromTo(box_bg5[index], 0.3, { ease: Power1.easeOut, top: 150, borderRadius: 200, scale: 1.2 }, { ease: Power1.easeOut, top: 0, borderRadius: 0, scale: 1 });
TweenMax.fromTo(enterT1_5[index], 0.5, { ease: Power1.easeOut, top: 50, rotate: 0 }, { ease: Power1.easeOut, top: 0, rotate: 0 });
TweenMax.fromTo(enterT2_5[index], 0.5, { ease: Power1.easeOut, top: 0, rotate: 0 }, { ease: Power1.easeOut, top: -50, rotate: 0 });
}
});
target.addEventListener("mouseleave", () => {
TweenMax.to(box_bg5[index], 0.3, { ease: Power1.easeOut, top: 150, borderRadius: 200, scale: 1.2 });
TweenMax.fromTo(enterT2_5[index], 0.5, { ease: Power1.easeOut, top: -50, rotate: 0 }, { ease: Power1.easeOut, top: 0, rotate: 0 });
TweenMax.fromTo(enterT1_5[index], 0.5, { ease: Power1.easeOut, top: 0, rotate: 0 }, { ease: Power1.easeOut, top: 50, rotate: 0 });
});
});