Мобильная версияЯ пытаюсь создать веб-сайт с большим количеством анимации прокрутки (текст замаскирован). Первая анимация с увеличением звезды работает очень хорошо, но вторая анимация не работает. Анимация воспроизводится как обычно, но после завершения она не возвращается к обычной прокрутке. После завершения анимации текст под ним также должен продолжаться.
Я почти уверен, что мне нужно установить его как относительный, но, похоже, не могу заставить его работать. p>
Кроме того, не предлагайте использовать ScrollTrigger, потому что он не останется на CodePen навсегда, и я не хочу получать Club GSAP.
По какой-то причине я не могу использовать фрагменты стека, поэтому вот полный код:
Код: Выделить всё
Lorem Ipsum
Login
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt.
Lorem.
Ipsum.
Dolor Sit Amet.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Get Started
Placeholder Heading
Placeholder Title
[h4]Placeholder Subtitle[/h4]
Placeholder text for description.
Placeholder Title
[h4]Placeholder Subtitle[/h4]
Placeholder text for description.
Placeholder Title
[h4]Placeholder Subtitle[/h4]
Placeholder text for description.
Placeholder Title
[h4]Placeholder Subtitle[/h4]
Placeholder text for description.
This text should appear after this scroll animation (but it doesn't!)
Код: Выделить всё
@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
/* Import fonts */
/* Global Styles */
body {
background: black;
overflow-x: hidden;
min-height: 800vh;
margin: 0;
font-family: sans-serif;
/* Fallback font */
}
input {
padding: 12px;
width: 80%;
border-radius: 8px;
border: none;
left: 50%;
position: relative;
transform: translate(-50%);
margin-top: 42px;
}
.hero {
padding: 16px;
position: fixed;
width: 100%;
height: 100vh;
background: radial-gradient(circle at 0% -10%, var(--gradient-color), transparent 38%);
}
.hero-text {
color: white !important;
font-size: 64px;
font-family: "Varela Round", sans-serif;
/* Default to Varela Round, fallback to sans-serif */
display: inline-block;
position: relative;
z-index: 10;
}
.hero-text svg {
transform: translateY(-4px);
display: inline;
vertical-align: middle;
background-color: transparent;
}
.content {
color: white;
display: none;
font-family: "Varela Round";
text-align: center;
}
.highlight {
color: #e3b505;
}
.btn-base,
.modal .login,
.backbtn {
border-radius: 20px;
border: none;
padding: 0 12px;
height: 30px;
background: #e3b505;
font-size: 16px;
font-weight: bold;
}
.btn-base:hover,
.modal .login:hover,
.backbtn:hover {
background: #c8a104;
}
.getstarted {
padding: 8px 16px;
border-radius: 32px;
height: auto;
}
.nav {
position: fixed;
top: -36px;
background: radial-gradient(circle at 0% center, #066ab2, transparent 80%);
backdrop-filter: blur(8px);
width: calc(100% - 32px);
height: 36px;
z-index: 1000;
left: 50%;
transform: translate(-50%, 0);
max-width: 500px;
border-radius: 32px;
}
button:active {
transform: scale(0.9)
}
button {
transition: transform 0.1s;
}
.btncontainer {
margin-top: 48px;
left: 50%;
position: relative;
transform: translate(-50%);
display: inline-block;
}
.btn-close {
position: absolute;
right: 8px;
top: 8px;
width: 32px;
height: 32px;
background: #95190C;
color: white
}
.btn-close:hover {
background: #711409;
}
.loader {
height: 24px;
width: 24px;
border: 3px solid transparent;
border-bottom: 3px solid black;
border-radius: 32px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.login-modal h1 {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: -20
}
.brand.gradient.teal.text {
background: #107E7D;
background: -webkit-linear-gradient(#28E2DF, #0C5A59);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand.gradient.blue.text {
background: #066AB1;
background: -webkit-linear-gradient(#89CBFB, #05528A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand.gradient.blue.extra {
background: #066AB1;
background: -webkit-linear-gradient(#C4E5FD, #05528A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand.gradient.red.text {
margin-top: 0;
background: #971A0C;
background: -webkit-linear-gradient(#F6877B, #711409);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
font-size: 32px;
}
.subtitle {
font-size: 14px;
background: -webkit-linear-gradient(#eee, #3f3f3f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle::after,
.subtitle::before {
content: '';
width: 64px;
height: 1px;
display: inline-block;
}
.subtitle::before {
transform: translate(-8px, -4px);
background: linear-gradient(-90deg, #aaa 0%, transparent 100%);
right: 120%;
top: 50%;
}
.subtitle::after {
transform: translate(8px, -4px);
background: linear-gradient(90deg, #aaa 0%, transparent 100%);
left: 120%;
top: 50%;
}
h1.gray.tw-heading {
font-size: 48px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.spacer-240 {
height: 240px;
}
.gen-card {
width: calc(25% - 14px);
margin: 0 4px;
display: inline-block;
height: 360;
background: transparent;
backdrop-filter: blur(4px);
opacity: 0;
border-radius: 16px;
text-align: center;
padding: 12px;
border: 1px solid #555
}
.gen-card h2 {
margin: 0;
}
.fixed {
position: fixed;
}
.relative{
position: relative;
}
/* .anim.brand.red.text{
margin-top: 0;
background: #971A0C;
background: -webkit-linear-gradient(#F6877B, #711409);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
Код: Выделить всё
function setTransformOriginToChild() {
const parent = document.querySelector('.hero-text');
const child = document.querySelector('.hero-text .star');
const parentRect = parent.getBoundingClientRect();
const childRect = child.getBoundingClientRect();
const childCenterX = (childRect.left - 10 + childRect.right) / 2;
const childCenterY = (childRect.top + 4 + childRect.bottom) / 2;
const transformOriginX = (childCenterX - parentRect.left) / parentRect.width * 100;
const transformOriginY = (childCenterY - parentRect.top) / parentRect.height * 100;
parent.style.transformOrigin = `${transformOriginX}% ${transformOriginY}%`;
}
window.addEventListener('resize', setTransformOriginToChild);
// Function to split text into multiple spans
function splitTextIntoSpans() {
// Get the container element
const container = document.querySelector('.hero-text');
// Get the text content of the container
const text = container.textContent;
// Create a document fragment to hold the new span elements
const fragment = document.createDocumentFragment();
// Define words to style
const wordsToStyle = {
'future': '#066AB2',
'sit': '#066AB2'
};
// Helper function to create span elements for text
function createSpansForText(text, color = '') {
const fragment = document.createDocumentFragment();
for (let char of text) {
const span = document.createElement('span');
span.textContent = char;
if (color) {
span.classList.add("brand")
span.classList.add("gradient")
span.classList.add("blue")
span.classList.add("text")
span.classList.add("extra")
}
fragment.appendChild(span);
}
return fragment;
}
// Process the text letter by letter
let index = 0;
while (index < text.length) {
// Find the next word or space
let nextSpace = text.indexOf(' ', index);
if (nextSpace === -1) {
nextSpace = text.length;
}
var word = text.slice(index, nextSpace);
// Add a space character after the word
if (nextSpace < text.length) {
word += ' ';
}
// Create spans for each letter of the word
const color = wordsToStyle[word.trim()] || '';
const wordFragment = createSpansForText(word, color);
fragment.appendChild(wordFragment);
// If the word add a special span element after it
if (word.trim() === 'sit') {
const starSpan = document.createElement('span');
starSpan.className = 'star';
starSpan.innerHTML = `
`;
fragment.appendChild(starSpan);
}
// Move to the next word
index = nextSpace + 1;
}
// Clear the original container
container.textContent = '';
// Append the fragment to the container
container.appendChild(fragment);
}
function calculateTravelDistance() {
// Get the .star element
const starElement = document.querySelector('.hero-text .star');
// Get the bounding rectangle of the .star element
const starRect = starElement.getBoundingClientRect();
// Get the center of the .star element
const starCenterX = starRect.left + starRect.width / 2;
const starCenterY = starRect.top + starRect.height / 2;
// Get the center of the screen
const screenCenterX = window.innerWidth / 2;
const screenCenterY = window.innerHeight / 2;
// Calculate the amount to move the element
const moveX = screenCenterX - starCenterX;
const moveY = screenCenterY - starCenterY;
return { moveX, moveY };
}
// Call the function to split the text
window.addEventListener('load', () => {
splitTextIntoSpans();
setTransformOriginToChild()
tl = gsap.timeline({
})
tl.set(".hero-text span", { filter: "blur(32px)" })
tl.set(".hero", { "--gradient-color": "#FFD700" })
tl.set(".hero-text svg", { fill: "white" })
tl.to(".hero-text span", { filter: "blur(0px)", duration: 0.5, stagger: 0.05 })
tl.to(".top-right", { opacity: 0, duration: 0.8 }, "
Подробнее здесь: [url]https://stackoverflow.com/questions/79040516/how-to-set-elements-back-to-relative-after-keeping-it-on-fixed[/url]