current position:Home>Realize JS keyframes animation with web animations API -- infinite circular scrolling of text
Realize JS keyframes animation with web animations API -- infinite circular scrolling of text
2021-08-27 08:53:35 【Liu 666】
Record small thoughts
background
For the API The excavation of , From a need
- use css3 Realize a component of infinite circular scrolling of text , Do not use setInterval
- When the mouse clicks on it , Animation stops , Users can scroll through the scroll bar
- When the mouse leaves , Animation continues
Text scrolls infinitely , There are still many references on the Internet , Don't worry about this plan . The trouble is that , mouse hover Go up and pause 、 There is no problem restoring animation , But the scrolling of animation is not scrollTop Of , How do you know how much you've rolled , How can you just css Just realize the above requirements ?? And mouse hover Leave and let the scroll bar disappear , This demand can't be done ...
The pattern is smaller , I didn't say I could only use one div, You can use two div To achieve , One div It has no animation effect and a scroll bar div, The other one has animation effect and no scroll bar div, mouse hover On the way up , Switch to non animated div On , When the mouse leaves, switch back to the animation effect div On
So the key point to realize this requirement is ,1 You need to know the scrolling distance of the animation ,2 You need to tell the animation how far the scroll bar scrolls , Let the animation roll on
At first, my understanding of animation effects was mainly css3 Of animation, So I found out how to know animation The rolling distance of , And then I found out CSS Object Model (CSSOM), It can be used js operation css Of API, Allow dynamic reading and modification css style , I haven't used it before , So I really don't know . But when I use it , Maybe the usage is wrong , You can get other styles of the page , But you can't get the animation style , So I found that this method may not be very suitable , Just keep looking at other methods .
For a long time , Found out Web Animation API - stay JavaScript Middle release CSS keyframes Power , That's crucial , The technical difficulties were solved all at once . The key :effect.getComputedTiming().progress、currentTime
Okay , There are plans , Start implementation
effect
Realization
The function point
- Text scrolls in an infinite loop
- Scrolling animation effects and mouse scrolling follow whether the mouse hover Switch , And the position of the elements rolling in the two ways should be well connected
Mainly used :
effect.getComputedTiming().progress: The scrolling progress of the animation , Multiply by the height of the text area , You know how far you've rolled currentTime: By setting this property, you can control the current scrolling position of the animation
Online effect and code ( The code is easy to understand , Just look at the code )
attach vue Component code , Scroll up and down , Other rolling directions can be adjusted by themselves translate3d y Shaft parameters
<template>
<div
:id='scrollWrapperId'
:class='wrapperClassName'
>
<div
class="scroll-hidden"
:style="{height:height,width:width}"
>
<div class='scroll-content'>
<slot></slot>
<slot></slot>
</div>
</div>
<div
class="scroll-auto"
:style="{width:width}"
>
<div>
<slot></slot>
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Scroll',
props: {
wrapperClassName: String,
scrollWrapperId: {
type: String,
default: 'scroll-wrapper'
},
height: String, // With units
width: {
type: String,
default: '100%'
},
options: { // keyframes Parameters
type: Object,
default: () => ({
duration: 3000
})
}
},
mounted() {
let scrollTop;
const scrollHiddenDom = document.querySelector(`#${this.scrollWrapperId} > .scroll-hidden`);
const scrollAutoDom = document.querySelector(`#${this.scrollWrapperId} > .scroll-auto`);
const animationContentDom = document.querySelector(`#${this.scrollWrapperId} > .scroll-hidden > .scroll-content`);
const offsetHeight = animationContentDom.offsetHeight / 2;

const keyFrames = [
{
transform: 'translate3d(0, 0, 0)',
offset: 0 // 0%
}, {
transform: 'translate3d(0, -50%, 0)',
offset: 1 // 100%
}
];
const keyFramesOptions = {
duration: this.options.duration / 1,
delay: 0,
iterations: Infinity,
easing: 'linear',
fill: 'forwards', // Defines when the animation no longer plays , How the animation should apply the style to its target When the animation is not playing , The target element retains the calculation style defined in the last key frame
direction: 'normal'// Defines whether the animation should play normally
};

if (!animationContentDom.animate) { // If the browser does not support scrolling Just show the sliding area directly
scrollHiddenDom.style.visibility = 'hidden';
scrollHiddenDom.style.height = 0;
scrollAutoDom.style.visibility = 'visible';
scrollAutoDom.style.height = this.height;
return;
}
const myanimation = animationContentDom.animate(keyFrames, Object.assign({}, keyFramesOptions, this.options));
scrollHiddenDom.addEventListener('mouseenter', () => {
myanimation.pause();
const animationProcess = myanimation.effect.getComputedTiming().progress; // animation Rolling progress Range 0-1
scrollTop = offsetHeight * animationProcess;
scrollHiddenDom.style.visibility = 'hidden';
scrollHiddenDom.style.height = 0;
scrollAutoDom.style.visibility = 'visible';
scrollAutoDom.style.height = this.height;
scrollAutoDom.scrollTop = scrollTop;
});
scrollAutoDom.addEventListener('mouseleave', () => {
scrollHiddenDom.style.visibility = 'visible';
scrollHiddenDom.style.height = this.height;
scrollAutoDom.style.visibility = 'hidden';
scrollAutoDom.style.height = 0;
// Through the rolling distance , Calculate the time value of the corresponding animation jump to x second from start of animation
myanimation.currentTime = scrollAutoDom.scrollTop / (offsetHeight / this.options.duration / 1);
myanimation.play();
});
}
};
</script>
<style lang='scss' scoped>
.scroll-hidden {
visibility: visible;
overflow: hidden;
}
.scroll-auto {
visibility: hidden;
height: 0;
overflow: auto;
}
</style>
Copy code
copyright notice
author[Liu 666],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827085330947S.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich