Как создать плавное появление текста или изображения?

Для создания плавного появления текста или изображения можно использовать CSS свойство `transition`. Например, чтобы сделать плавное появление текста при наведении курсора мыши, можно добавить следующий код:

```css
.text {
  opacity: 0;
  transition: opacity 0.5s;
}

.text:hover {
  opacity: 1;
}
```

Для плавного открытия и закрытия спойлера в HTML с использованием JavaScript можно использовать следующий код:

```html
<!-- HTML -->
<button onclick="toggleSpoiler()">Показать/скрыть спойлер</button>
<div id="spoiler" style="display: none;">
  Текст спойлера
</div>
```

```javascript
// JavaScript
function toggleSpoiler() {
  var spoiler = document.getElementById("spoiler");
  if (spoiler.style.display === "none") {
    spoiler.style.display = "block";
  } else {
    spoiler.style.display = "none";
  }
}
```

Чтобы страница поднималась вверх вместе с закрывающимся спойлером до его открытия, можно добавить следующий код в функцию `toggleSpoiler()`:

```javascript
function toggleSpoiler() {
  var spoiler = document.getElementById("spoiler");
  var topOffset = spoiler.offsetTop;
  var windowTopOffset = window.scrollY;
  
  if (spoiler.style.display === "none") {
    window.scrollTo({top: topOffset - window.innerHeight + 200, behavior: 'smooth'});
    spoiler.style.display = "block";
  } else {
    spoiler.style.display = "none";
    window.scrollTo({top: windowTopOffset, behavior: 'smooth'});
  }
}
```

Этот код плавно прокрутит страницу к началу спойлера перед его открытием и вернет к текущему положению после его закрытия.