Предыстория: Эффекты дизайна внешнего интерфейса становятся все более и более крутыми, и этих крутых эффектов можно добиться с помощью эффектов анимации CSS3 и js. С помощью простого кода можно добиться очень крутых эффектов.原理： используйте js для отслеживания положения ScrollTop , определения положения изображения через top и достижения параллаксной прокрутки при прокрутке до целевой позиции, используйте атрибут анимации CSS3 для достижения эффекта дрожания;
Сопутствующие фотографии материалов:
часть стиля:
<стиль>
.index-module--nftBox--3H_AP {
высота: 200вх;
фоновый повтор: без повтора;
размер фона: обложка;
фоновая позиция: 50%;
ширина: 100%;
}
.index-module--moto--3sEm1 {
позиция: абсолютная;
слева: 0;
вверху: -400px; /*Фиксированная точка положения инициализации модели автомобиля*/
фоновое изображение: url(https://resource.nreal.cn/web/images/home/motuo.png);/*изображение автомобиля*/
переход: 0,5 с;
-webkit-transform: перевести (0);
трансформировать: перевести (0);
}
.index-module--moto--3sEm1.is-active{ /*Влияние дрожания модели автомобиля*/
анимация: прыжок .1с легкость выхода 5 поочередно;
}
@keyframes jump {/*Эффект дрожания модели автомобиля*/
от { сверху: -30 пикселей }
до { сверху: 6 пикселей }
}
.index-module--moto--3sEm1, .index-module--nftBox--3H_AP {
высота: 200вх;
фоновый повтор: без повтора;
размер фона: обложка;
фоновая позиция: 50%;
ширина: 100%;
}
.index-module--title--rSrVs {
непрозрачность: 1;
ширина: 80%;
маржа: 0 авто;
}
.index-module--titleBox--1VS2L {
высота: 50вх;
дисплей: гибкий;
оправдание-содержание: центр;
выровнять-элементы: по центру;
позиция: абсолютная;
верх: 0;
осталось: 50%;
-webkit-transform: транслировать(-50%);
трансформировать: транслировать(-50%);
}
.hoZaHW {
имя анимации: ewofWB;
продолжительность анимации: 300 мс;
количество итераций анимации: бесконечно;
преобразование-начало: центр-центр;
состояние анимации-игры: работает;
}
/* @keyframes ewofWB {
0% { слева: 0 пикселей; сверху: 0 пикселей;}
25% { слева: 200 пикселей; сверху: 0 пикселей;}
50% { слева: 200 пикселей; сверху: 200 пикселей;}
75% { слева: 0 пикселей; сверху: 200 пикселей;}
100% { слева: 0 пикселей; сверху: 0 пикселей;}
} */
.index-module--nftTitle--20OyY {
ширина: 100%;
максимальная ширина: 800 пикселей;
}
.index-module--duang--5jpDr {
-webkit-animation: index-module--circleP--3P-V7 1.3s;
анимация: index-module--circleP--3P-V7 1.3s;
-webkit-transform: TranslateY(400px);
преобразование: TranslateY (400 пикселей);
}
.index-module--moto--3sEm1 {
позиция: абсолютная;
слева: 0;
-webkit-transform: перевести (0);
трансформировать: перевести (0);
}
</стиль>html-часть:
<div id="layout-container" class="content">
<div class="index-module--nftBox--3H_AP" style="background-image:url(https://resource.nreal.cn/web/images/home/motuobg.jpg)">
<div class="index-module--nftBox--3H_AP"></div>
<div class="index-module--moto--3sEm1" id="scrollup"></div>
<div class="index-module--title--rSrVs index-module--titleBox--1VS2L">
<div dur="300" class="sc-bdVaJa hoZaHW">
<img src="https://resource.nreal.cn/web/images/home/title.png" class="index-module--nftTitle--20OyY">
</div>
</div>
</div>
</div>js-часть:
<тип сценария="текст/javascript">
window.onscroll= функция(){
//Переменная t — это расстояние от верха при прокрутке полосы прокрутки var t = document.documentElement.scrollTop||document.body.scrollTop;
var прокрутка = document.getElementById('прокрутка');
//При прокрутке до 200 пикселей сверху if(t>=200){ Scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
Scrollup.style.top=6+"px";
if(scrollup.style.top == '6px'){
document.getElementById("прокрутка").classList.add("активен")
}
}else{//Вернуться к обычному режиму прокрутки.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
Scrollup.style.top=-400+"px";
document.getElementById("прокрутка").classList.remove("активен")
}
}
</скрипт>На этом завершается статья об использовании CSS для достижения эффектов параллаксной прокрутки и размытия. Чтобы получить дополнительную информацию о CSS-прокрутке параллакса, выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы будете поддерживать даункоды в будущем. .com!