File size: 4,282 Bytes
fcf8749 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | """
Animation Utility Functions
"""
import streamlit as st
import time
def fade_in(element_html, duration=0.5):
"""
Apply fade-in animation to HTML element
Args:
element_html: HTML string to animate
duration: Animation duration in seconds
"""
st.markdown(f"""
<style>
@keyframes fadeIn {{
from {{ opacity: 0; }}
to {{ opacity: 1; }}
}}
.fade-in-element {{
animation: fadeIn {duration}s ease-in;
}}
</style>
<div class="fade-in-element">
{element_html}
</div>
""", unsafe_allow_html=True)
def slide_in(element_html, direction="left", duration=0.5):
"""
Apply slide-in animation to HTML element
Args:
element_html: HTML string to animate
direction: 'left', 'right', 'up', or 'down'
duration: Animation duration in seconds
"""
transforms = {
"left": "translateX(-100%)",
"right": "translateX(100%)",
"up": "translateY(-100%)",
"down": "translateY(100%)"
}
start_transform = transforms.get(direction, "translateX(-100%)")
st.markdown(f"""
<style>
@keyframes slideIn {{
from {{
transform: {start_transform};
opacity: 0;
}}
to {{
transform: translate(0);
opacity: 1;
}}
}}
.slide-in-element {{
animation: slideIn {duration}s ease-out;
}}
</style>
<div class="slide-in-element">
{element_html}
</div>
""", unsafe_allow_html=True)
def pulse_animation(element_html, duration=1.5):
"""
Apply pulse animation to HTML element
Args:
element_html: HTML string to animate
duration: Animation duration in seconds
"""
st.markdown(f"""
<style>
@keyframes pulse {{
0%, 100% {{ transform: scale(1); }}
50% {{ transform: scale(1.05); }}
}}
.pulse-element {{
animation: pulse {duration}s ease-in-out infinite;
}}
</style>
<div class="pulse-element">
{element_html}
</div>
""", unsafe_allow_html=True)
def typing_effect(text, delay=0.05):
"""
Display text with typing effect (simulated)
Args:
text: Text to display
delay: Delay between characters in seconds
"""
placeholder = st.empty()
displayed_text = ""
for char in text:
displayed_text += char
placeholder.markdown(f"**{displayed_text}▌**")
time.sleep(delay)
placeholder.markdown(f"**{displayed_text}**")
def loading_spinner(message="Loading..."):
"""
Display a custom loading spinner
Args:
message: Loading message to display
"""
st.markdown(f"""
<div style="text-align: center; padding: 40px;">
<div class="spinner"></div>
<p style="color: #667eea; margin-top: 20px;">{message}</p>
</div>
<style>
.spinner {{
border: 4px solid #f0f2f6;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}}
@keyframes spin {{
0% {{ transform: rotate(0deg); }}
100% {{ transform: rotate(360deg); }}
}}
</style>
""", unsafe_allow_html=True)
def gradient_text(text, gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"):
"""
Display text with gradient color
Args:
text: Text to display
gradient: CSS gradient string
"""
st.markdown(f"""
<h2 style="background: {gradient};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
margin: 20px 0;">
{text}
</h2>
""", unsafe_allow_html=True)
def confetti_animation():
"""Display confetti animation"""
st.balloons()
def snow_animation():
"""Display snow animation"""
st.snow()
|