摘要:在这个系列里分享一些简单,但是很有意思的交互效果附上地址和地址滚动,添加对应加载的比如巧用实现文字和遮罩层的动画效果文字动画遮罩层动画首先然后把且,这样就实现了遮罩层的进场和退出效果随机获取数组项
在这个系列里分享一些简单,但是很有意思的交互效果~
附上demo地址和github地址
滚动,添加对应加载的class(比如loaded)
巧用animation实现文字和遮罩层的动画效果
文字动画: opacity 0 -> 1;
遮罩层动画: 首先width 0 -> 100%,然后把width 100% -> 0且left 0 -> 100%,这样就实现了遮罩层的进场和退出效果;
html:
-
SANDWICHES & PANCAKE
GARDEN
MORNING & TOMORROW & FRIEND
ORANGE & BIRD & SHEEP & CUP & BUS
APPLE & FRUIT & CAR
CAKE & PICTURE & CAT & STAMP
PLANE & BOOK & RACKET & GLASS & BED
-
APPLE
BANANA & PINE APPLE & SHEEP
BANANA & PINE APPLE
-
PUMPKIN & TARO & CARROT
-
HORSERADISH & LETTUCE
PUMPKIN & TARO & CARROT
HORSERADISH & LETTUCE
POTATO & BURDOCK
-
EGG & BAG & ROSE & CHAIR & BAT
FISH & NOTEBOOK & PENCIL & DOG & DESK
WATCH & MITT & MILK & FLOWER
DOOR & BOAT & PIANO &
-
POTATO & BURDOCK
APPLE
BANANA & PINE APPLE
LETTER
CAP & TAPE & MAIL & BOX
-
APPLE
BANANA & PINE APPLE
TURNIP & OKRA & PEA
-
SHIITAKE & BEEFSTEAK PLANT
css:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #000;
}
main {
padding: 10vw 0;
}
ul {
width: 100%;
max-width: 70%;
margin: 0 auto;
}
li {
margin: 10vw 0;
text-align: left;
}
p {
display: block;
color: #fff;
font-family: "Lato", sans-serif;
font-size: 2vw;
font-weight: 900;
line-height: 1.2;
}
p+p {
margin-top: 10px;
}
li:first-child {
margin-top: 0;
}
li:last-child {
margin-bottom: 0;
}
li:nth-child(even) {
text-align: right;
}
a {
color: #fff;
}
a:hover {
text-decoration: none;
}
[data-reveal="content"] {
display: inline-block;
position: relative;
}
[data-reveal="cover"] {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
z-index: 1;
}
[data-reveal="text"] {
opacity: 0;
}
@keyframes reveal-cover {
0% {
width: 0;
left: 0;
}
44% {
width: 100%;
left: 0;
}
54% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@keyframes reveal-text {
0% {
opacity: 0;
}
44% {
opacity: 0;
}
54% {
opacity: 1;
}
}
[data-js="reveal"].loaded [data-reveal="cover"] {
animation: reveal-cover 1.5s ease-in-out;
}
[data-js="reveal"].loaded [data-reveal="text"] {
opacity: 1;
animation: reveal-text 1.5s ease-in-out;
}
javascript:
const COLOR_LIST = ["#7f00ff", "#ff00ff", "#0000ff", "#007fff", "#00ffff"];
let $targetList;
const init = () => {
$targetList = document.querySelectorAll("[data-js="reveal"]");
setup();
window.addEventListener("scroll", onScroll, false);
window.dispatchEvent(new Event("scroll"));
}
// 随机获取数组项
const getArrayRandomValue = (array) => array[Math.floor(Math.random() * array.length)];
const setup = () => {
for (const $target of $targetList) {
const content = $target.innerHTML;
const color = "revealColor" in $target.dataset ? $target.dataset.revealColor : getArrayRandomValue(COLOR_LIST);
$target.innerHTML = `${content}`;
}
}
const onScroll = () => {
const windowH = window.innerHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const isMostScroll = document.body.clientHeight <= scrollTop + windowH;
for (const $target of $targetList) {
if ($target.classList.contains("loaded")) continue;
const rect = $target.getBoundingClientRect();
const top = rect.top + scrollTop;
if (isMostScroll || top <= scrollTop + (windowH * .8)) $target.classList.add("loaded");
}
}
document.addEventListener("DOMContentLoaded", init, false);
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53978.html