Çözüldü Hareketli konu önizlemesi (thread preview)

[oXoloria]

Destek istenen forum

https://pvper.gg

Merhaba konu başlığı üstüne gelince konu önizlemesi sistemi forumumda aktif benim aradığım şey konu içeriğinin o pop-up içinde yukarı doğru kayması ve bir kısmının gözükebilir olması.
Bunun eklentisi mevcut mu yoksa sadece kod ile mi yapılabilir ?

Bu kodda ne hatalı ?

@keyframes pvperstool {
    100% {
        transform: translateY(max(-50%, -400px));
    }
}

.tooltip--preview .tooltip-content-inner {
    animation: pvperstool 3s linear;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}

 

[Apyazılım]

@Ugur hocam yardımcı ola bilir belki

 

[eTiKeT™]

Böyle bir eklenti görmedim ne yazık ki ve bunun için eklenti gereklidir.

 

[Ugur]

.tooltip-content-inner sabittir kaymaz, içindekini kaydırmanız gerekiyor.

.tooltip--preview .tooltip-content-inner .bbWrapper

 

[oXoloria]

.tooltip-content-inner sabittir kaymaz, içindekini kaydırmanız gerekiyor.

.tooltip--preview .tooltip-content-inner .bbWrapper

@Ugur hocam keyframes kodunda bir sıkıntı var site bozuluyor kaydedince sebebini anlamadım
Ya da bir çözüm varsa

animation: pvperstool 3s linear;

şu kısım için onu düzelteyim ben bilemedim nasıl yapacağımı

 

[Ugur]

@Ugur hocam keyframes kodunda bir sıkıntı var site bozuluyor kaydedince sebebini anlamadım
Ya da bir çözüm varsa

animation: pvperstool 3s linear;

şu kısım için onu düzelteyim ben bilemedim nasıl yapacağımı

Şunu dene:

@keyframes pvperstool {
    100% {
        transform: translateY(-250px);
    }
}
.tooltip--preview .tooltip-content-inner .bbWrapper {
    animation: pvperstool 3s linear;
    animation-fill-mode: forwards;
    animation-delay: 0.5s
}

 

[oXoloria]

Bu kodda bir sıkıntı var anladığım kadarı ile sizin verdiğiniz ile çalıştı teşekkür ederim

translateY(max(-50%, -400px))

Tek sorun şu an çok hızlı hareket etmesi onu deneme yanılma yolu ile düzeltirim sanırım

Kullanacak olan varsa bu hali gayet ideal -50px i kendinize göre değiştirin akış hızı için

@keyframes pvperstool {
    100% {
        transform: translateY(-50px);
    }
}
.tooltip--preview .tooltip-content-inner .bbWrapper {
    animation: pvperstool 3s linear;
    animation-fill-mode: forwards;
    animation-delay: 0.5s
}