摘要:在這個系列里分享一些簡單,但是很有意思的交互效果附上地址和地址滾動,添加對應加載的比如巧用實現文字和遮罩層的動畫效果文字動畫遮罩層動畫首先然后把且,這樣就實現了遮罩層的進場和退出效果隨機獲取數組項
在這個系列里分享一些簡單,但是很有意思的交互效果~
附上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);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104373.html