Анимация с нуля, JavaScript (3 шага)

Анимация с нуля, JavaScript (3 шага)

привет хакеры!

вам не нужны никакие внешние библиотеки для вашей анимации (любого уровня), только немного CSS, javascript и немного логики.

1. просто напишите код для статической страницы

2. Если для этой анимации не требуется никаких событий, просто напишите ключевые кадры CSS для этого класса. (просто погуглите «ключевые кадры»), чтобы учиться с нуля.

.tomo-main-text {
margin: 0;position: relative;font-family: General Sans;font-style: normal;font-weight: 600;font-size: 124px;line-height: 176px;letter-spacing: 0.005em;background-image: radial-gradient(105.13% 2778.43% at -3.4% 0%, #171717 3.51%, #626262 28.1%,#ffffff 45.46%, #5bfaca 56.33%, #00ffe0 69.24%, #4d4d4d 80.19%, #0b0b0b 100%);-webkitbackground-clip: text;-webkit-text-fill-color: transparent;color: transparent;animation: animatedTomoMainText 5s infinite alternate-reverse;background-size: 300%;background-position: -100%;}
@keyframes animatedTomoMainText {
to {
background-position: 100%;
}}

3. если вы хотите показать эффекты анимации для некоторых событий, просто послушайте это, используя window.addEventListener(type, listener);, и измените класс, используя javascript, в котором вы определили ключевые кадры.

function showTechAppMobile() {
var reveals = document.querySelectorAll('.tech-app-layer-mobile')
var windowHeight = window.innerHeight;
var revealTop = reveals[0].getBoundingClientRect().top;
var revealPoint = 250
if (revealTop < windowHeight - revealPoint) {
reveals[0].classList.add('active')
} else {
reveals[0].classList.remove('active')
}
}

4. Лучшая анимация основана на прокрутке. Для этого у нас есть 2 динамических элемента.

(добавив для этого полный фрагмент кода)

var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop / scrollArea || 0;
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var stack2 = document.querySelector('.stack2')
var stack3 = document.querySelector('.stack3')
var stack4 = document.querySelector('.stack4')
window.addEventListener('scroll', function () {
var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop / scrollArea || 0;
if (scrollTop < 4400) {
stack2.style.top = "190px"
stack3.style.top = "235px"
stack4.style.top = "280px"
}
if (scrollTop > 4400 && scrollTop < 4678) {
stack2.style.top = -4400 + 190 + scrollTop + 'px';
stack3.style.top = -4400 + 235 + scrollTop + 'px';
stack4.style.top = -4400 + 280 + scrollTop + 'px';
}
if (scrollTop > 4400 && scrollTop < 4950) {
stack3.style.top = -4400 + 235 + scrollTop + 'px';
stack4.style.top = -4400 + 280 + scrollTop + 'px';
}
if (scrollTop > 4400 && scrollTop < 5210) {
stack4.style.top = -4400 + 280 + scrollTop + 'px';
}

ПРИМЕЧАНИЕ: код javascript должен присутствовать в разделе сценария вашего index.html либо напрямую, либо путем импорта отдельного файла js.